@sberbusiness/triplex-next 1.34.0 → 1.35.0

package/components/DateField/DateFieldTarget.js

@@ -1,62 +1,87 @@
-import { jsx as e, jsxs as w, Fragment as P } from "react/jsx-runtime";
-import { useContext as u } from "react";
-import { CalendarStrokeSrvIcon24 as y, CalendarStrokeSrvIcon20 as K, CalendarStrokeSrvIcon16 as T } from "@sberbusiness/icons-next";
-import { DatePickerExtendedContext as j } from "../DatePickerExtended/DatePickerExtendedContext.js";
-import { DateFieldContext as v } from "./DateFieldContext.js";
-import { MaskedField as A } from "../TextField/MaskedField.js";
-import { FormFieldClear as L } from "../FormField/components/FormFieldClear.js";
-import { ButtonIcon as O } from "../Button/ButtonIcon.js";
-import { isKey as C } from "../../utils/keyboard.js";
-import { EComponentSize as r } from "../../enums/EComponentSize.js";
-import { EFormFieldStatus as R } from "../FormField/enums.js";
-const b = {
-  [r.SM]: /* @__PURE__ */ e(T, { paletteIndex: 5 }),
-  [r.MD]: /* @__PURE__ */ e(K, { paletteIndex: 5 }),
-  [r.LG]: /* @__PURE__ */ e(y, { paletteIndex: 5 })
-}, Y = ({
-  size: a = r.MD,
-  postfix: x,
-  maskedInputProps: F,
-  onClear: l,
-  ...m
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useContext } from "react";
+import { CalendarStrokeSrvIcon24, CalendarStrokeSrvIcon20, CalendarStrokeSrvIcon16 } from "@sberbusiness/icons-next";
+import { DatePickerExtendedContext } from "../DatePickerExtended/DatePickerExtendedContext.js";
+import { DateFieldContext } from "./DateFieldContext.js";
+import { MaskedField } from "../TextField/MaskedField.js";
+import { FormFieldClear } from "../FormField/components/FormFieldClear.js";
+import { ButtonIcon } from "../Button/ButtonIcon.js";
+import { isKey } from "../../utils/keyboard.js";
+import { EComponentSize } from "../../enums/EComponentSize.js";
+import { EFormFieldStatus } from "../FormField/enums.js";
+const sizeToCalendarIconMap = {
+  [EComponentSize.SM]: /* @__PURE__ */ jsx(CalendarStrokeSrvIcon16, { paletteIndex: 5 }),
+  [EComponentSize.MD]: /* @__PURE__ */ jsx(CalendarStrokeSrvIcon20, { paletteIndex: 5 }),
+  [EComponentSize.LG]: /* @__PURE__ */ jsx(CalendarStrokeSrvIcon24, { paletteIndex: 5 })
+};
+const DateFieldTarget = ({
+  size = EComponentSize.MD,
+  postfix,
+  maskedInputProps,
+  onClear,
+  ...restProps
 }) => {
-  const { dropdownOpen: t, setDropdownOpen: n } = u(j), { inputFocusedRef: p, triggerChangeFromInput: I } = u(v), { status: k } = m, {
-    onFocus: i,
-    onBlur: c,
-    onKeyDown: s,
-    onClick: d,
-    ...D
-  } = F, f = k === R.DISABLED, S = (o) => {
-    p.current = !0, i == null || i(o);
-  }, h = (o) => {
-    p.current = !1, t || I(), c == null || c(o);
-  }, E = (o) => {
-    t || n(!0), d == null || d(o);
-  }, g = (o) => {
-    C(o.code, "ENTER") ? n(!t) : C(o.code, "SPACE") && (o.preventDefault(), n(!t)), s == null || s(o);
-  }, B = () => n(!t), M = () => /* @__PURE__ */ w(P, { children: [
-    l && /* @__PURE__ */ e(L, { onClick: l }),
-    /* @__PURE__ */ e(O, { active: t, disabled: f, onClick: B, children: b[a] }),
-    x
+  const { dropdownOpen, setDropdownOpen } = useContext(DatePickerExtendedContext);
+  const { inputFocusedRef, triggerChangeFromInput } = useContext(DateFieldContext);
+  const { status } = restProps;
+  const {
+    onFocus: onInputFocus,
+    onBlur: onInputBlur,
+    onKeyDown: onInputKeyDown,
+    onClick: onInputClick,
+    ...restInputProps
+  } = maskedInputProps;
+  const disabled = status === EFormFieldStatus.DISABLED;
+  const handleInputFocus = (event) => {
+    inputFocusedRef.current = true;
+    onInputFocus == null ? void 0 : onInputFocus(event);
+  };
+  const handleInputBlur = (event) => {
+    inputFocusedRef.current = false;
+    if (!dropdownOpen) {
+      triggerChangeFromInput();
+    }
+    onInputBlur == null ? void 0 : onInputBlur(event);
+  };
+  const handleInputClick = (event) => {
+    if (!dropdownOpen) {
+      setDropdownOpen(true);
+    }
+    onInputClick == null ? void 0 : onInputClick(event);
+  };
+  const handleInputKeyDown = (event) => {
+    if (isKey(event.code, "ENTER")) {
+      setDropdownOpen(!dropdownOpen);
+    } else if (isKey(event.code, "SPACE")) {
+      event.preventDefault();
+      setDropdownOpen(!dropdownOpen);
+    }
+    onInputKeyDown == null ? void 0 : onInputKeyDown(event);
+  };
+  const handleButtonClick = () => setDropdownOpen(!dropdownOpen);
+  const renderPostfixContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    onClear && /* @__PURE__ */ jsx(FormFieldClear, { onClick: onClear }),
+    /* @__PURE__ */ jsx(ButtonIcon, { active: dropdownOpen, disabled, onClick: handleButtonClick, children: sizeToCalendarIconMap[size] }),
+    postfix
   ] });
-  return /* @__PURE__ */ e(
-    A,
+  return /* @__PURE__ */ jsx(
+    MaskedField,
     {
-      size: a,
+      size,
       maskedInputProps: {
-        disabled: f,
-        onFocus: S,
-        onBlur: h,
-        onClick: E,
-        onKeyDown: g,
-        ...D
+        disabled,
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        onClick: handleInputClick,
+        onKeyDown: handleInputKeyDown,
+        ...restInputProps
       },
-      postfix: M(),
-      ...m
+      postfix: renderPostfixContent(),
+      ...restProps
     }
   );
 };
 export {
-  Y as DateFieldTarget
+  DateFieldTarget
 };
 //# sourceMappingURL=DateFieldTarget.js.map

package/components/DateField/DateFieldTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFieldTarget.js","sources":["../../../src/components/DateField/DateFieldTarget.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { CalendarStrokeSrvIcon16, CalendarStrokeSrvIcon20, CalendarStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { DatePickerExtendedContext } from \"../DatePickerExtended/DatePickerExtendedContext\";\nimport { DateFieldContext } from \"./DateFieldContext\";\nimport { MaskedField } from \"../TextField/MaskedField\";\nimport { FormFieldClear } from \"../FormField/components/FormFieldClear\";\nimport { ButtonIcon } from \"../Button/ButtonIcon\";\nimport { isKey } from \"../../utils/keyboard\";\nimport { EComponentSize } from \"../../enums\";\nimport { EFormFieldStatus } from \"../FormField/enums\";\nimport { IDateFieldTargetProps } from \"./types\";\n\n/** Соответствие размера иконке календаря. */\nconst sizeToCalendarIconMap = {\n    [EComponentSize.SM]: <CalendarStrokeSrvIcon16 paletteIndex={5} />,\n    [EComponentSize.MD]: <CalendarStrokeSrvIcon20 paletteIndex={5} />,\n    [EComponentSize.LG]: <CalendarStrokeSrvIcon24 paletteIndex={5} />,\n};\n\nexport const DateFieldTarget: React.FC<IDateFieldTargetProps> = ({\n    size = EComponentSize.MD,\n    postfix,\n    maskedInputProps,\n    onClear,\n    ...restProps\n}) => {\n    const { dropdownOpen, setDropdownOpen } = useContext(DatePickerExtendedContext);\n    const { inputFocusedRef, triggerChangeFromInput } = useContext(DateFieldContext);\n    const { status } = restProps;\n    const {\n        onFocus: onInputFocus,\n        onBlur: onInputBlur,\n        onKeyDown: onInputKeyDown,\n        onClick: onInputClick,\n        ...restInputProps\n    } = maskedInputProps;\n    const disabled = status === EFormFieldStatus.DISABLED;\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        inputFocusedRef.current = true;\n        onInputFocus?.(event);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        inputFocusedRef.current = false;\n\n        if (!dropdownOpen) {\n            triggerChangeFromInput();\n        }\n\n        onInputBlur?.(event);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n        if (!dropdownOpen) {\n            setDropdownOpen(true);\n        }\n        onInputClick?.(event);\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (isKey(event.code, \"ENTER\")) {\n            setDropdownOpen(!dropdownOpen);\n        } else if (isKey(event.code, \"SPACE\")) {\n            event.preventDefault();\n            setDropdownOpen(!dropdownOpen);\n        }\n\n        onInputKeyDown?.(event);\n    };\n\n    const handleButtonClick = () => setDropdownOpen(!dropdownOpen);\n\n    const renderPostfixContent = () => (\n        <>\n            {onClear && <FormFieldClear onClick={onClear} />}\n            <ButtonIcon active={dropdownOpen} disabled={disabled} onClick={handleButtonClick}>\n                {sizeToCalendarIconMap[size]}\n            </ButtonIcon>\n            {postfix}\n        </>\n    );\n\n    return (\n        <MaskedField\n            size={size}\n            maskedInputProps={{\n                disabled: disabled,\n                onFocus: handleInputFocus,\n                onBlur: handleInputBlur,\n                onClick: handleInputClick,\n                onKeyDown: handleInputKeyDown,\n                ...restInputProps,\n            }}\n            postfix={renderPostfixContent()}\n            {...restProps}\n        />\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAaA,MAAM,wBAAwB;AAAA,EAC1B,CAAC,eAAe,EAAE,GAAG,oBAAC,yBAAA,EAAwB,cAAc,GAAG;AAAA,EAC/D,CAAC,eAAe,EAAE,GAAG,oBAAC,yBAAA,EAAwB,cAAc,GAAG;AAAA,EAC/D,CAAC,eAAe,EAAE,GAAG,oBAAC,yBAAA,EAAwB,cAAc,EAAA,CAAG;AACnE;AAEO,MAAM,kBAAmD,CAAC;AAAA,EAC7D,OAAO,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,EAAE,cAAc,oBAAoB,WAAW,yBAAyB;AAC9E,QAAM,EAAE,iBAAiB,2BAA2B,WAAW,gBAAgB;AAC/E,QAAM,EAAE,WAAW;AACnB,QAAM;AAAA,IACF,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,WAAW,WAAW,iBAAiB;AAE7C,QAAM,mBAAmB,CAAC,UAA8C;AACpE,oBAAgB,UAAU;AAC1B,iDAAe;AAAA,EACnB;AAEA,QAAM,kBAAkB,CAAC,UAA8C;AACnE,oBAAgB,UAAU;AAE1B,QAAI,CAAC,cAAc;AACf,6BAAA;AAAA,IACJ;AAEA,+CAAc;AAAA,EAClB;AAEA,QAAM,mBAAmB,CAAC,UAA8C;AACpE,QAAI,CAAC,cAAc;AACf,sBAAgB,IAAI;AAAA,IACxB;AACA,iDAAe;AAAA,EACnB;AAEA,QAAM,qBAAqB,CAAC,UAAiD;AACzE,QAAI,MAAM,MAAM,MAAM,OAAO,GAAG;AAC5B,sBAAgB,CAAC,YAAY;AAAA,IACjC,WAAW,MAAM,MAAM,MAAM,OAAO,GAAG;AACnC,YAAM,eAAA;AACN,sBAAgB,CAAC,YAAY;AAAA,IACjC;AAEA,qDAAiB;AAAA,EACrB;AAEA,QAAM,oBAAoB,MAAM,gBAAgB,CAAC,YAAY;AAE7D,QAAM,uBAAuB,MACzB,qBAAA,UAAA,EACK,UAAA;AAAA,IAAA,WAAW,oBAAC,gBAAA,EAAe,SAAS,QAAA,CAAS;AAAA,IAC9C,oBAAC,cAAW,QAAQ,cAAc,UAAoB,SAAS,mBAC1D,UAAA,sBAAsB,IAAI,EAAA,CAC/B;AAAA,IACC;AAAA,EAAA,GACL;AAGJ,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,kBAAkB;AAAA,QACd;AAAA,QACA,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,WAAW;AAAA,QACX,GAAG;AAAA,MAAA;AAAA,MAEP,SAAS,qBAAA;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAGhB;"}

package/components/DateField/constants.js

@@ -1,5 +1,5 @@
-const t = "DD.MM.YYYY";
+const inputDateFormat = "DD.MM.YYYY";
 export {
-  t as inputDateFormat
+  inputDateFormat
 };
 //# sourceMappingURL=constants.js.map

package/components/DateField/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/components/DateField/constants.ts"],"sourcesContent":["/** Формат даты, отображаемый при вводе. */\nexport const inputDateFormat = \"DD.MM.YYYY\";\n"],"names":[],"mappings":"AACO,MAAM,kBAAkB;"}

package/components/DateField/index.js

@@ -1,5 +1,5 @@
-import { DateField as r } from "./DateField.js";
+import { DateField } from "./DateField.js";
 export {
-  r as DateField
+  DateField
 };
 //# sourceMappingURL=index.js.map

package/components/DateField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/DateField/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/DateField/utils.js

@@ -1,23 +1,32 @@
-import l from "moment";
-import { inputDateFormat as o } from "./constants.js";
-import { isDayDisabled as u } from "../Calendar/utils.js";
-const i = {
+import moment from "moment";
+import { inputDateFormat } from "./constants.js";
+import { isDayDisabled } from "../Calendar/utils.js";
+const DateFieldUtils = {
   /** Получить значения пикера. */
-  getPickerValues: (t, a, r, n) => {
-    if (t.length === 0)
+  getPickerValues: (value, format, limitRange, disabledDays) => {
+    if (value.length === 0) {
       return { calendarDate: null, inputString: "" };
-    const e = i.getCalendarDate(t, a, r, n);
-    return e === null ? { calendarDate: null, inputString: "" } : { calendarDate: e, inputString: e.format(o) };
+    }
+    const date = DateFieldUtils.getCalendarDate(value, format, limitRange, disabledDays);
+    if (date === null) {
+      return { calendarDate: null, inputString: "" };
+    }
+    return { calendarDate: date, inputString: date.format(inputDateFormat) };
   },
   /** Получить календарную дату. */
-  getCalendarDate: (t, a, r, n) => {
-    const e = l(t, a, !0);
-    return !e.isValid() || !i.isAvailableDate(e, t, r, n) ? null : e;
+  getCalendarDate: (value, format, limitRange, disabledDays) => {
+    const date = moment(value, format, true);
+    if (!date.isValid() || !DateFieldUtils.isAvailableDate(date, value, limitRange, disabledDays)) {
+      return null;
+    }
+    return date;
   },
   /** Является ли дата доступной. */
-  isAvailableDate: (t, a, r, n) => !(t.isBefore(r.dateFrom, "day") || t.isAfter(r.dateTo, "day") || u(a, n))
+  isAvailableDate: (date, value, limitRange, disabledDays) => {
+    return !(date.isBefore(limitRange.dateFrom, "day") || date.isAfter(limitRange.dateTo, "day") || isDayDisabled(value, disabledDays));
+  }
 };
 export {
-  i as DateFieldUtils
+  DateFieldUtils
 };
 //# sourceMappingURL=utils.js.map

package/components/DateField/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/DateField/utils.ts"],"sourcesContent":["import moment from \"moment\";\nimport { TPickedDate } from \"../Calendar/types\";\nimport { IDateLimitRange } from \"../../types/DateTypes\";\nimport { inputDateFormat } from \"./constants\";\nimport { isDayDisabled } from \"../Calendar/utils\";\n\n/** Значения DatePicker. */\ninterface IDatePickerValues {\n    inputString: string;\n    calendarDate: TPickedDate;\n}\n\n/** Утилиты для компонента DateField. */\nexport const DateFieldUtils = {\n    /** Получить значения пикера. */\n    getPickerValues: (\n        value: string,\n        format: string,\n        limitRange: IDateLimitRange,\n        disabledDays?: string[],\n    ): IDatePickerValues => {\n        if (value.length === 0) {\n            return { calendarDate: null, inputString: \"\" };\n        }\n\n        const date = DateFieldUtils.getCalendarDate(value, format, limitRange, disabledDays);\n\n        if (date === null) {\n            return { calendarDate: null, inputString: \"\" };\n        }\n\n        return { calendarDate: date, inputString: date.format(inputDateFormat) };\n    },\n\n    /** Получить календарную дату. */\n    getCalendarDate: (value: string, format: string, limitRange: IDateLimitRange, disabledDays?: string[]) => {\n        const date = moment(value, format, true);\n\n        if (!date.isValid() || !DateFieldUtils.isAvailableDate(date, value, limitRange, disabledDays)) {\n            return null;\n        }\n\n        return date;\n    },\n\n    /** Является ли дата доступной. */\n    isAvailableDate: (date: moment.Moment, value: string, limitRange: IDateLimitRange, disabledDays?: string[]) => {\n        return !(\n            date.isBefore(limitRange.dateFrom, \"day\") ||\n            date.isAfter(limitRange.dateTo, \"day\") ||\n            isDayDisabled(value, disabledDays)\n        );\n    },\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,iBAAiB;AAAA;AAAA,EAE1B,iBAAiB,CACb,OACA,QACA,YACA,iBACoB;AACpB,QAAI,MAAM,WAAW,GAAG;AACpB,aAAO,EAAE,cAAc,MAAM,aAAa,GAAA;AAAA,IAC9C;AAEA,UAAM,OAAO,eAAe,gBAAgB,OAAO,QAAQ,YAAY,YAAY;AAEnF,QAAI,SAAS,MAAM;AACf,aAAO,EAAE,cAAc,MAAM,aAAa,GAAA;AAAA,IAC9C;AAEA,WAAO,EAAE,cAAc,MAAM,aAAa,KAAK,OAAO,eAAe,EAAA;AAAA,EACzE;AAAA;AAAA,EAGA,iBAAiB,CAAC,OAAe,QAAgB,YAA6B,iBAA4B;AACtG,UAAM,OAAO,OAAO,OAAO,QAAQ,IAAI;AAEvC,QAAI,CAAC,KAAK,QAAA,KAAa,CAAC,eAAe,gBAAgB,MAAM,OAAO,YAAY,YAAY,GAAG;AAC3F,aAAO;AAAA,IACX;AAEA,WAAO;AAAA,EACX;AAAA;AAAA,EAGA,iBAAiB,CAAC,MAAqB,OAAe,YAA6B,iBAA4B;AAC3G,WAAO,EACH,KAAK,SAAS,WAAW,UAAU,KAAK,KACxC,KAAK,QAAQ,WAAW,QAAQ,KAAK,KACrC,cAAc,OAAO,YAAY;AAAA,EAEzC;AACJ;"}

package/components/DatePickerExtended/DatePickerExtended.js

@@ -1,12 +1,12 @@
-import { jsx as p, jsxs as q } from "react/jsx-runtime";
-import G, { useState as I, useRef as m, useEffect as J } from "react";
-import { isKey as Q } from "../../utils/keyboard.js";
-import { Calendar as W } from "../Calendar/Calendar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useState, useRef, useEffect } from "react";
+import { isKey } from "../../utils/keyboard.js";
+import { Calendar } from "../Calendar/Calendar.js";
 import "../Dropdown/DropdownListContext.js";
 import "../Dropdown/desktop/DropdownDesktop.js";
 import "../Dropdown/desktop/DropdownList.js";
-import "../../chunks/DropdownListItem-Db1_Qf-T.js";
-import { EDropdownAlignment as X } from "../Dropdown/desktop/enums.js";
+import "../../chunks/DropdownListItem-Bar1VVOv.js";
+import { EDropdownAlignment } from "../Dropdown/desktop/enums.js";
 import "../Dropdown/mobile/DropdownMobile.js";
 import "../Dropdown/mobile/DropdownMobileBody.js";
 import "../Dropdown/mobile/DropdownMobileClose.js";
@@ -18,119 +18,144 @@ import "../Dropdown/mobile/DropdownMobileList.js";
 import "../Dropdown/mobile/DropdownMobileListItem.js";
 import "../Loader/LoaderSmall/LoaderSmall.js";
 import "../Loader/LoaderMiddle/LoaderMiddle.js";
-import { EComponentSize as Y } from "../../enums/EComponentSize.js";
+import { EComponentSize } from "../../enums/EComponentSize.js";
 import "../Dropdown/Dropdown.js";
-import { DatePickerExtendedContext as Z } from "./DatePickerExtendedContext.js";
-import { DatePickerExtendedDropdown as $ } from "./DatePickerExtendedDropdown.js";
-const ee = G.forwardRef((l, r) => {
+import { DatePickerExtendedContext } from "./DatePickerExtendedContext.js";
+import { DatePickerExtendedDropdown } from "./DatePickerExtendedDropdown.js";
+const DatePickerExtended = React__default.forwardRef((props, ref) => {
   const {
     // Dropdown props
-    alignment: D = X.LEFT,
-    focusTrapProps: w,
+    alignment = EDropdownAlignment.LEFT,
+    focusTrapProps,
     // Calendar props
-    pickType: g,
-    format: P,
-    defaultViewDate: C,
-    onViewChange: h,
-    onPageChange: y,
-    pickedDate: E,
-    limitRange: k,
-    markedDays: x,
-    disabledDays: R,
-    reversedPick: v,
-    dayHtmlAttributes: O,
-    monthHtmlAttributes: T,
-    yearHtmlAttributes: A,
-    prevButtonProps: H,
-    nextButtonProps: b,
-    viewButtonProps: B,
-    todayButtonProps: L,
-    onDateChange: M,
+    pickType,
+    format,
+    defaultViewDate,
+    onViewChange,
+    onPageChange,
+    pickedDate,
+    limitRange,
+    markedDays,
+    disabledDays,
+    reversedPick,
+    dayHtmlAttributes,
+    monthHtmlAttributes,
+    yearHtmlAttributes,
+    prevButtonProps,
+    nextButtonProps,
+    viewButtonProps,
+    todayButtonProps,
+    onDateChange,
     // Other
-    renderTarget: S,
-    renderDropdownHeaderTarget: j,
-    onKeyDown: i,
-    onMouseDown: a,
-    onDropdownOpen: z,
-    onDropdownClose: K,
-    ...V
-  } = l, [t, o] = I(!1), s = m(null), c = m(null), d = m(!1);
-  J(() => {
-    const e = (n) => {
-      var f, u;
-      !((f = s.current) != null && f.contains(n.target)) && !((u = c.current) != null && u.contains(n.target)) && o(!1);
+    renderTarget,
+    renderDropdownHeaderTarget,
+    onKeyDown,
+    onMouseDown,
+    onDropdownOpen,
+    onDropdownClose,
+    ...restProps
+  } = props;
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const containerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const mouseUsedRef = useRef(false);
+  useEffect(() => {
+    const handleOutsideMouseDown = (event) => {
+      var _a, _b;
+      if (!((_a = containerRef.current) == null ? void 0 : _a.contains(event.target)) && !((_b = dropdownRef.current) == null ? void 0 : _b.contains(event.target))) {
+        setDropdownOpen(false);
+      }
     };
-    if (t)
-      return document.addEventListener("mousedown", e), () => {
-        document.removeEventListener("mousedown", e);
+    if (dropdownOpen) {
+      document.addEventListener("mousedown", handleOutsideMouseDown);
+      return () => {
+        document.removeEventListener("mousedown", handleOutsideMouseDown);
       };
-    d.current = !1;
-  }, [t]);
-  const _ = (e) => {
-    const n = e.code || e.keyCode;
-    Q(n, "ESCAPE") && t && o(!1), i == null || i(e);
-  }, F = (e) => {
-    d.current = !0, a == null || a(e);
-  }, N = (e) => /* @__PURE__ */ p(
-    W,
+    } else {
+      mouseUsedRef.current = false;
+    }
+  }, [dropdownOpen]);
+  const handleKeyDown = (event) => {
+    const key = event.code || event.keyCode;
+    if (isKey(key, "ESCAPE")) {
+      if (dropdownOpen) {
+        setDropdownOpen(false);
+      }
+    }
+    onKeyDown == null ? void 0 : onKeyDown(event);
+  };
+  const handleMouseDown = (event) => {
+    mouseUsedRef.current = true;
+    onMouseDown == null ? void 0 : onMouseDown(event);
+  };
+  const renderCalendar = (adaptiveMode) => /* @__PURE__ */ jsx(
+    Calendar,
     {
-      defaultViewDate: C,
-      pickedDate: E,
-      pickType: g,
-      format: P,
-      limitRange: k,
-      markedDays: x,
-      disabledDays: R,
-      reversedPick: v,
-      adaptiveMode: e,
-      onDateChange: U,
-      onPageChange: y,
-      onViewChange: h,
-      dayHtmlAttributes: O,
-      monthHtmlAttributes: T,
-      yearHtmlAttributes: A,
-      prevButtonProps: H,
-      nextButtonProps: b,
-      viewButtonProps: B,
-      todayButtonProps: L
+      defaultViewDate,
+      pickedDate,
+      pickType,
+      format,
+      limitRange,
+      markedDays,
+      disabledDays,
+      reversedPick,
+      adaptiveMode,
+      onDateChange: handleChangeDate,
+      onPageChange,
+      onViewChange,
+      dayHtmlAttributes,
+      monthHtmlAttributes,
+      yearHtmlAttributes,
+      prevButtonProps,
+      nextButtonProps,
+      viewButtonProps,
+      todayButtonProps
+    }
+  );
+  const handleChangeDate = (date) => {
+    setDropdownOpen(false);
+    onDateChange(date);
+  };
+  const setRef = (node) => {
+    containerRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
     }
-  ), U = (e) => {
-    o(!1), M(e);
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      onKeyDown: _,
-      onMouseDown: F,
-      ...V,
-      "data-tx": "1.34.0",
-      ref: (e) => {
-        s.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
-      },
-      children: /* @__PURE__ */ q(Z.Provider, { value: { dropdownOpen: t, mouseUsedRef: d, setDropdownOpen: o }, children: [
-        S(),
-        /* @__PURE__ */ p(
-          $,
+      onKeyDown: handleKeyDown,
+      onMouseDown: handleMouseDown,
+      ...restProps,
+      "data-tx": "1.35.0",
+      ref: setRef,
+      children: /* @__PURE__ */ jsxs(DatePickerExtendedContext.Provider, { value: { dropdownOpen, mouseUsedRef, setDropdownOpen }, children: [
+        renderTarget(),
+        /* @__PURE__ */ jsx(
+          DatePickerExtendedDropdown,
           {
-            opened: t,
-            size: Y.MD,
-            alignment: D,
-            targetRef: s,
-            focusTrapProps: w,
-            renderCalendar: N,
-            renderHeaderTarget: j,
-            setOpened: o,
-            onOpen: z,
-            onClose: K,
-            ref: c
+            opened: dropdownOpen,
+            size: EComponentSize.MD,
+            alignment,
+            targetRef: containerRef,
+            focusTrapProps,
+            renderCalendar,
+            renderHeaderTarget: renderDropdownHeaderTarget,
+            setOpened: setDropdownOpen,
+            onOpen: onDropdownOpen,
+            onClose: onDropdownClose,
+            ref: dropdownRef
           }
         )
       ] })
     }
   );
 });
-ee.displayName = "DatePickerExtended";
+DatePickerExtended.displayName = "DatePickerExtended";
 export {
-  ee as DatePickerExtended
+  DatePickerExtended
 };
 //# sourceMappingURL=DatePickerExtended.js.map

package/components/DatePickerExtended/DatePickerExtended.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerExtended.js","sources":["../../../src/components/DatePickerExtended/DatePickerExtended.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\";\nimport moment from \"moment\";\nimport { FocusTrapProps } from \"focus-trap-react\";\nimport { isKey } from \"../../utils/keyboard\";\nimport { Calendar, ICalendarProps } from \"../Calendar\";\nimport { EDropdownAlignment, IDropdownProps } from \"../Dropdown\";\nimport { DatePickerExtendedContext } from \"./DatePickerExtendedContext\";\nimport { DatePickerExtendedDropdown } from \"./DatePickerExtendedDropdown\";\nimport { EComponentSize } from \"../../enums\";\n\n/** Свойства компонента DatePickerExtended. */\nexport interface IDatePickerExtendedProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\">,\n        Pick<IDropdownProps, \"alignment\">,\n        ICalendarProps {\n    /** Рендер-функция целевого элемента. */\n    renderTarget: () => React.ReactNode;\n    /** Рендер-функция целевого элемента в заголовке DropdownMobile. */\n    renderDropdownHeaderTarget: () => React.ReactNode;\n    /** Callback на открытие Dropdown. */\n    onDropdownOpen?: () => void;\n    /** Callback на закрытие Dropdown. */\n    onDropdownClose?: () => void;\n    /** Свойства FocusTrap. Используется npm-пакет focus-trap-react. */\n    focusTrapProps?: FocusTrapProps;\n}\n\n/** База для компонента DatePicker. */\nexport const DatePickerExtended = React.forwardRef<HTMLDivElement, IDatePickerExtendedProps>((props, ref) => {\n    const {\n        // Dropdown props\n        alignment = EDropdownAlignment.LEFT,\n        focusTrapProps,\n        // Calendar props\n        pickType,\n        format,\n        defaultViewDate,\n        onViewChange,\n        onPageChange,\n        pickedDate,\n        limitRange,\n        markedDays,\n        disabledDays,\n        reversedPick,\n        dayHtmlAttributes,\n        monthHtmlAttributes,\n        yearHtmlAttributes,\n        prevButtonProps,\n        nextButtonProps,\n        viewButtonProps,\n        todayButtonProps,\n        onDateChange,\n        // Other\n        renderTarget,\n        renderDropdownHeaderTarget,\n        onKeyDown,\n        onMouseDown,\n        onDropdownOpen,\n        onDropdownClose,\n        ...restProps\n    } = props;\n    const [dropdownOpen, setDropdownOpen] = useState(false);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    // Пользователь взаимодействует мышью.\n    const mouseUsedRef = useRef(false);\n\n    useEffect(() => {\n        /** Обработчик нажатия мыши вне компонента. */\n        const handleOutsideMouseDown = (event: MouseEvent) => {\n            if (\n                !containerRef.current?.contains(event.target as Node) &&\n                !dropdownRef.current?.contains(event.target as Node)\n            ) {\n                setDropdownOpen(false);\n            }\n        };\n\n        if (dropdownOpen) {\n            document.addEventListener(\"mousedown\", handleOutsideMouseDown);\n\n            return () => {\n                document.removeEventListener(\"mousedown\", handleOutsideMouseDown);\n            };\n        } else {\n            mouseUsedRef.current = false;\n        }\n    }, [dropdownOpen]);\n\n    /** Обработчик нажатия клавиши. */\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        const key = event.code || event.keyCode;\n\n        if (isKey(key, \"ESCAPE\")) {\n            if (dropdownOpen) {\n                setDropdownOpen(false);\n            }\n        }\n\n        onKeyDown?.(event);\n    };\n\n    /** Обработчик нажатия мыши. */\n    const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n        mouseUsedRef.current = true;\n\n        onMouseDown?.(event);\n    };\n\n    /** Рендер календаря. */\n    const renderCalendar = (adaptiveMode: boolean) => (\n        <Calendar\n            defaultViewDate={defaultViewDate}\n            pickedDate={pickedDate}\n            pickType={pickType}\n            format={format}\n            limitRange={limitRange}\n            markedDays={markedDays}\n            disabledDays={disabledDays}\n            reversedPick={reversedPick}\n            adaptiveMode={adaptiveMode}\n            onDateChange={handleChangeDate}\n            onPageChange={onPageChange}\n            onViewChange={onViewChange}\n            dayHtmlAttributes={dayHtmlAttributes}\n            monthHtmlAttributes={monthHtmlAttributes}\n            yearHtmlAttributes={yearHtmlAttributes}\n            prevButtonProps={prevButtonProps}\n            nextButtonProps={nextButtonProps}\n            viewButtonProps={viewButtonProps}\n            todayButtonProps={todayButtonProps}\n        />\n    );\n\n    /** Обработчик изменения даты. */\n    const handleChangeDate = (date: moment.Moment) => {\n        setDropdownOpen(false);\n\n        onDateChange(date);\n    };\n\n    /** Функция для хранения ссылки. */\n    const setRef = (node: HTMLDivElement | null) => {\n        containerRef.current = node;\n        if (typeof ref === \"function\") {\n            ref(node);\n        } else if (ref) {\n            ref.current = node;\n        }\n    };\n\n    return (\n        <div\n            onKeyDown={handleKeyDown}\n            onMouseDown={handleMouseDown}\n            {...restProps}\n            data-tx={process.env.npm_package_version}\n            ref={setRef}\n        >\n            <DatePickerExtendedContext.Provider value={{ dropdownOpen, mouseUsedRef, setDropdownOpen }}>\n                {renderTarget()}\n                <DatePickerExtendedDropdown\n                    opened={dropdownOpen}\n                    size={EComponentSize.MD}\n                    alignment={alignment}\n                    targetRef={containerRef}\n                    focusTrapProps={focusTrapProps}\n                    renderCalendar={renderCalendar}\n                    renderHeaderTarget={renderDropdownHeaderTarget}\n                    setOpened={setDropdownOpen}\n                    onOpen={onDropdownOpen}\n                    onClose={onDropdownClose}\n                    ref={dropdownRef}\n                />\n            </DatePickerExtendedContext.Provider>\n        </div>\n    );\n});\n\nDatePickerExtended.displayName = \"DatePickerExtended\";\n"],"names":["React"],"mappings":"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"}

package/components/DatePickerExtended/DatePickerExtendedContext.js

@@ -1,11 +1,11 @@
-import e from "react";
-const o = e.createContext({
-  dropdownOpen: !1,
-  mouseUsedRef: { current: !1 },
+import React__default from "react";
+const DatePickerExtendedContext = React__default.createContext({
+  dropdownOpen: false,
+  mouseUsedRef: { current: false },
   setDropdownOpen: () => {
   }
 });
 export {
-  o as DatePickerExtendedContext
+  DatePickerExtendedContext
 };
 //# sourceMappingURL=DatePickerExtendedContext.js.map

package/components/DatePickerExtended/DatePickerExtendedContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerExtendedContext.js","sources":["../../../src/components/DatePickerExtended/DatePickerExtendedContext.tsx"],"sourcesContent":["import React from \"react\";\n\n/** Свойства контекста компонента DatePickerExtended. */\ninterface IDatePickerExtendedContext {\n    dropdownOpen: boolean;\n    mouseUsedRef: React.MutableRefObject<boolean>;\n    setDropdownOpen: (open: boolean) => void;\n}\n\n/** Контекст компонента DatePickerExtended. */\nexport const DatePickerExtendedContext = React.createContext<IDatePickerExtendedContext>({\n    dropdownOpen: false,\n    mouseUsedRef: { current: false },\n    setDropdownOpen: () => {},\n});\n"],"names":["React"],"mappings":";AAUO,MAAM,4BAA4BA,eAAM,cAA0C;AAAA,EACrF,cAAc;AAAA,EACd,cAAc,EAAE,SAAS,MAAA;AAAA,EACzB,iBAAiB,MAAM;AAAA,EAAC;AAC5B,CAAC;"}