@sberbusiness/triplex-next 1.4.0 → 1.6.0

package/components/Confirm/index.js

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

package/components/DateField/DateField.js

@@ -0,0 +1,135 @@
+import { jsx as n, jsxs as J } from "react/jsx-runtime";
+import K, { useState as Q, useRef as l, useEffect as W } from "react";
+import { k as y } from "../../chunks/vendor-D3hUOusX.js";
+import { DatePickerExtended as X } from "../DatePickerExtended/DatePickerExtended.js";
+import { dateFormatYYYYMMDD as Z, globalLimitRange as $ } from "../../consts/DateConst.js";
+import { DateFieldUtils as m } from "./utils.js";
+import { DateFieldTarget as ee } from "./DateFieldTarget.js";
+import { inputDateFormat as b } from "./constants.js";
+import { Tooltip as S } from "../Tooltip/Tooltip.js";
+import { ETooltipSize as te } from "../Tooltip/enums.js";
+import { MobileView as re } from "../MobileView/MobileView.js";
+import { DropdownMobileMaskedInput as T } from "../Dropdown/mobile/DropdownMobileMaskedInput.js";
+import { DateFieldContext as ae } from "./DateFieldContext.js";
+import "../FormField/FormFieldContext.js";
+import "../FormField/components/FormFieldDescription.js";
+import "../FormField/components/FormFieldCounter.js";
+import "../FormField/components/FormFieldLabel.js";
+import "../FormField/components/FormFieldClear.js";
+import "../FormField/components/FormFieldTarget.js";
+import "../../chunks/FormFieldInput-BBhoiftf.js";
+import { FormFieldMaskedInput as ne } from "../FormField/components/FormFieldMaskedInput.js";
+import "../FormField/components/FormFieldPostfix.js";
+import "../FormField/components/FormFieldPrefix.js";
+import "../FormField/components/FormFieldTextarea.js";
+const ie = K.forwardRef((x, p) => {
+  const {
+    size: I,
+    status: E,
+    value: s,
+    label: O,
+    placeholderMask: P,
+    "aria-label": Y,
+    "aria-labelledby": z,
+    format: a = Z,
+    limitRange: i = $,
+    disabledDays: o,
+    onChange: c,
+    onDropdownOpen: f,
+    onDropdownClose: g,
+    invalidDateHint: L,
+    targetProps: j,
+    ...A
+  } = x, [r, k] = Q(
+    m.getPickerValues(s, a, i, o)
+  ), R = l(null), d = l(r), C = l(!1), F = l(!1), D = l(!1), u = l(!1);
+  W(() => {
+    const e = m.getPickerValues(s, a, i, o);
+    e.inputString !== r.inputString && k(e), d.current = e;
+  }, [s, a, i, o]);
+  const B = (e) => {
+    R.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+  }, H = () => {
+    const { maskedInputProps: e, ...t } = j || {}, { onChange: h, ...G } = e || {};
+    return /* @__PURE__ */ n(ae.Provider, { value: { inputFocusedRef: C, onChange: c, triggerChangeFromInput: w }, children: /* @__PURE__ */ n(
+      ee,
+      {
+        size: I,
+        status: E,
+        label: O,
+        maskedInputProps: {
+          value: r.inputString,
+          mask: ne.presets.masks.date,
+          placeholderMask: P,
+          "aria-label": Y,
+          "aria-labelledby": z,
+          onChange: (v) => {
+            V(v), h == null || h(v);
+          },
+          ...G
+        },
+        ...t
+      }
+    ) });
+  }, _ = () => /* @__PURE__ */ n(
+    T,
+    {
+      value: r.inputString,
+      mask: T.presets.masks.date,
+      placeholderMask: P,
+      onChange: V,
+      autoFocus: !0
+    }
+  ), V = (e) => {
+    let t = null;
+    e.target.value.length === b.length ? (t = y(e.target.value, b, !0), (!t.isValid() || !m.isAvailableDate(t, t.format(a), i, o)) && (t = null), u.current = !t) : u.current = !1, k({ calendarDate: t, inputString: e.target.value });
+  }, w = () => {
+    if (r.inputString.length === 0 && s.length !== 0)
+      return c(r.inputString);
+    const e = y(r.inputString, b, !0);
+    if (e.isValid()) {
+      const t = e.format(a);
+      if (t === s)
+        return;
+      if (m.isAvailableDate(e, t, i, o))
+        return c(t);
+    }
+    r.inputString !== d.current.inputString && (u.current = !1, k(d.current));
+  }, N = () => {
+    F.current = !0, f == null || f();
+  }, U = () => {
+    F.current = !1, D.current ? D.current = !1 : !C.current && r.inputString !== d.current.inputString && w(), g == null || g();
+  }, q = (e) => {
+    D.current = !0, u.current = !1, c(e.format(a));
+  }, M = () => /* @__PURE__ */ n(
+    X,
+    {
+      renderTarget: H,
+      renderDropdownHeaderTarget: _,
+      pickedDate: r.calendarDate,
+      format: a,
+      limitRange: i,
+      disabledDays: o,
+      onDropdownOpen: N,
+      onDropdownClose: U,
+      onDateChange: q,
+      ...A,
+      ref: B
+    }
+  );
+  return /* @__PURE__ */ n(
+    re,
+    {
+      fallback: /* @__PURE__ */ J(S, { targetRef: R, size: te.SM, isOpen: u.current, children: [
+        /* @__PURE__ */ n(S.Body, { children: L }),
+        /* @__PURE__ */ n(S.Target, { children: M() })
+      ] }),
+      children: M()
+    }
+  );
+});
+ie.displayName = "DatePicker";
+export {
+  ie as DateField
+};
+//# sourceMappingURL=DateField.js.map

package/components/DateField/DateFieldContext.js

@@ -0,0 +1,12 @@
+import e from "react";
+const n = e.createContext({
+  inputFocusedRef: { current: null },
+  onChange: () => {
+  },
+  triggerChangeFromInput: () => {
+  }
+});
+export {
+  n as DateFieldContext
+};
+//# sourceMappingURL=DateFieldContext.js.map

package/components/DateField/DateFieldTarget.js

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

package/components/DateField/constants.js

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

package/components/DateField/index.js

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

package/components/DateField/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/components/DateField/utils.js

@@ -0,0 +1,23 @@
+import { k as l } from "../../chunks/vendor-D3hUOusX.js";
+import { inputDateFormat as o } from "./constants.js";
+import { isDayDisabled as s } from "../Calendar/utils.js";
+const i = {
+  /** Получить значения пикера. */
+  getPickerValues: (t, a, r, n) => {
+    if (t.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) };
+  },
+  /** Получить календарную дату. */
+  getCalendarDate: (t, a, r, n) => {
+    const e = l(t, a, !0);
+    return !e.isValid() || !i.isAvailableDate(e, t, r, n) ? null : e;
+  },
+  /** Является ли дата доступной. */
+  isAvailableDate: (t, a, r, n) => !(t.isBefore(r.dateFrom, "day") || t.isAfter(r.dateTo, "day") || s(a, n))
+};
+export {
+  i as DateFieldUtils
+};
+//# sourceMappingURL=utils.js.map

package/components/DatePickerExtended/DatePickerExtended.js

@@ -0,0 +1,136 @@
+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 "../Dropdown/Dropdown.js";
+import "../Dropdown/DropdownListContext.js";
+import "../Dropdown/desktop/DropdownDesktop.js";
+import "../Dropdown/desktop/DropdownList.js";
+import "../../chunks/DropdownListItem-DgEkMGvB.js";
+import "../Dropdown/mobile/DropdownMobile.js";
+import "../Dropdown/mobile/DropdownMobileBody.js";
+import "../Dropdown/mobile/DropdownMobileClose.js";
+import "../Dropdown/mobile/DropdownMobileFooter.js";
+import "../Dropdown/mobile/DropdownMobileHeader.js";
+import "../Dropdown/mobile/DropdownMobileInner.js";
+import "../Dropdown/mobile/DropdownMobileInput.js";
+import "../Dropdown/mobile/DropdownMobileList.js";
+import "../Dropdown/mobile/DropdownMobileListItem.js";
+import "../Loader/LoaderSmall/LoaderSmall.js";
+import "../Loader/LoaderMiddle/LoaderMiddle.js";
+import { EComponentSize as X } from "../../enums/EComponentSize.js";
+import { EDropdownAlignment as Y } from "../Dropdown/enums.js";
+import { DatePickerExtendedContext as Z } from "./DatePickerExtendedContext.js";
+import { DatePickerExtendedDropdown as $ } from "./DatePickerExtendedDropdown.js";
+const ee = G.forwardRef((l, r) => {
+  const {
+    // Dropdown props
+    alignment: D = Y.LEFT,
+    focusTrapProps: w,
+    // 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,
+    // 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);
+    };
+    if (t)
+      return document.addEventListener("mousedown", e), () => {
+        document.removeEventListener("mousedown", e);
+      };
+    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,
+    {
+      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
+    }
+  ), U = (e) => {
+    o(!1), M(e);
+  };
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      onKeyDown: _,
+      onMouseDown: F,
+      ...V,
+      "data-tx": "1.6.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(
+          $,
+          {
+            opened: t,
+            size: X.MD,
+            alignment: D,
+            targetRef: s,
+            focusTrapProps: w,
+            renderCalendar: N,
+            renderHeaderTarget: j,
+            setOpened: o,
+            onOpen: z,
+            onClose: K,
+            ref: c
+          }
+        )
+      ] })
+    }
+  );
+});
+ee.displayName = "DatePickerExtended";
+export {
+  ee as DatePickerExtended
+};
+//# sourceMappingURL=DatePickerExtended.js.map

package/components/DatePickerExtended/DatePickerExtendedContext.js

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

package/components/DatePickerExtended/DatePickerExtendedDropdown.js

@@ -0,0 +1,63 @@
+import { jsx as e, jsxs as n, Fragment as m } from "react/jsx-runtime";
+import f, { useContext as u } from "react";
+import { h as D } from "../../chunks/vendor-D3hUOusX.js";
+import { Dropdown as w } from "../Dropdown/Dropdown.js";
+import { DatePickerExtendedContext as x } from "./DatePickerExtendedContext.js";
+import "../Dropdown/mobile/DropdownMobile.js";
+import { DropdownMobileBody as b } from "../Dropdown/mobile/DropdownMobileBody.js";
+import { DropdownMobileClose as k } from "../Dropdown/mobile/DropdownMobileClose.js";
+import "../Dropdown/mobile/DropdownMobileFooter.js";
+import { DropdownMobileHeader as h } from "../Dropdown/mobile/DropdownMobileHeader.js";
+import "../Dropdown/mobile/DropdownMobileInner.js";
+import "../Dropdown/mobile/DropdownMobileInput.js";
+import "../Dropdown/mobile/DropdownMobileList.js";
+import "../Dropdown/mobile/DropdownMobileListItem.js";
+import "../Loader/LoaderSmall/LoaderSmall.js";
+import "../Loader/LoaderMiddle/LoaderMiddle.js";
+const M = "datePickerExtendedMobileDropdown__d37d403e", E = {
+  datePickerExtendedMobileDropdown: M
+}, C = f.forwardRef(
+  (d, a) => {
+    const { children: P, targetRef: o, setOpened: c, renderHeaderTarget: p, renderCalendar: t, focusTrapProps: r, ...s } = d, { mouseUsedRef: i, setDropdownOpen: l } = u(x);
+    return /* @__PURE__ */ e(
+      w,
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        targetRef: o,
+        mobileViewProps: {
+          children: /* @__PURE__ */ n(m, { children: [
+            /* @__PURE__ */ n(h, { children: [
+              p(),
+              /* @__PURE__ */ e(k, { onClick: () => l(!1) })
+            ] }),
+            /* @__PURE__ */ e(b, { children: t(!0) })
+          ] }),
+          className: E.datePickerExtendedMobileDropdown
+        },
+        setOpened: c,
+        ...s,
+        ref: a,
+        children: /* @__PURE__ */ e(
+          D.FocusTrap,
+          {
+            ...r,
+            focusTrapOptions: {
+              clickOutsideDeactivates: !0,
+              fallbackFocus: o.current,
+              initialFocus: !i.current && void 0,
+              returnFocusOnDeactivate: !i.current,
+              ...r == null ? void 0 : r.focusTrapOptions
+            },
+            children: /* @__PURE__ */ e("div", { role: "presentation", children: t(!1) })
+          }
+        )
+      }
+    );
+  }
+);
+C.displayName = "DatePickerExtendedDropdown";
+export {
+  C as DatePickerExtendedDropdown
+};
+//# sourceMappingURL=DatePickerExtendedDropdown.js.map

package/components/DateRange/DateRange.js

@@ -0,0 +1,73 @@
+import { jsxs as v, jsx as m } from "react/jsx-runtime";
+import { c as i, k as c } from "../../chunks/vendor-D3hUOusX.js";
+import { CaretleftStrokeSrvIcon20 as D, MinusStrokeSrvIcon20 as M, CaretrightStrokeSrvIcon20 as Y } from "@sberbusiness/icons-next";
+import { dateFormatYYYYMMDD as r } from "../../consts/DateConst.js";
+import { EDateRangeShiftUnit as h } from "./enums.js";
+const C = "dateRange__4b2d55c3", E = "dateRangeButton__6aaf9774", F = "separator__fddd545b", d = {
+  dateRange: C,
+  dateRangeButton: E,
+  separator: F
+}, j = ({
+  children: y,
+  className: R,
+  value: f,
+  onChange: o,
+  shiftAmount: n = 1,
+  shiftUnit: s = h.MONTH,
+  hideNavigation: p,
+  renderPickerFrom: g,
+  renderPickerTo: k,
+  renderButtonForward: u,
+  renderButtonBack: S,
+  ...b
+}) => {
+  const [a, t] = f, x = i(d.dateRange, R), B = (e) => {
+    !e || !t || e <= t ? o([e, t]) : o([e, ""]);
+  }, I = (e) => {
+    !e || !a || e >= a ? o([a, e]) : o(["", e]);
+  }, N = () => {
+    if (!a || !t)
+      return;
+    const e = c(a, r), l = c(t, r);
+    o([
+      e.subtract(n, s).format(r),
+      l.subtract(n, s).format(r)
+    ]);
+  }, _ = () => {
+    if (!a || !t)
+      return;
+    const e = c(a, r), l = c(t, r);
+    o([
+      e.add(n, s).format(r),
+      l.add(n, s).format(r)
+    ]);
+  };
+  return /* @__PURE__ */ v("div", { className: x, ...b, children: [
+    !p && S({
+      children: /* @__PURE__ */ m(D, { paletteIndex: 5 }),
+      className: i(d.dateRangeButton, { disabled: !(a && t) }),
+      disabled: !(a && t),
+      onClick: N
+    }),
+    g({
+      onChange: B,
+      value: a
+    }),
+    /* @__PURE__ */ m(M, { className: d.separator, paletteIndex: 5 }),
+    k({
+      onChange: I,
+      value: t
+    }),
+    !p && u({
+      children: /* @__PURE__ */ m(Y, { paletteIndex: 5 }),
+      className: i(d.dateRangeButton, { disabled: !(a && t) }),
+      disabled: !(a && t),
+      onClick: _
+    })
+  ] });
+};
+j.displayName = "DateRange";
+export {
+  j as DateRange
+};
+//# sourceMappingURL=DateRange.js.map

package/components/DateRange/enums.js

@@ -0,0 +1,5 @@
+var A = /* @__PURE__ */ ((r) => (r.DAY = "day", r.WEEK = "week", r.MONTH = "month", r.QUARTER = "quarter", r.YEAR = "year", r))(A || {});
+export {
+  A as EDateRangeShiftUnit
+};
+//# sourceMappingURL=enums.js.map

package/components/DesignTokens/DesignTokenUtils.js

@@ -1,16 +1,16 @@
 import { ETriplexNextTheme as i } from "../ThemeProvider/ETriplexNextTheme.js";
-import { DesignTokensCore as m } from "./DesignTokensCore.js";
+import { DesignTokensCore as l } from "./DesignTokensCore.js";
 import { DesignTokensCoreThemeDark as a } from "./DesignTokensCoreThemeDark.js";
 import { DesignTokensComponents as c } from "./DesignTokensComponents.js";
 import { DesignTokensComponentsThemeDark as f } from "./DesignTokensComponentsThemeDark.js";
-import { h as l } from "../../chunks/vendor-Ba_pyhza.js";
+import { m as T } from "../../chunks/vendor-D3hUOusX.js";
 const n = {
   getCSSVariableByTokenGroup: (t, s) => {
     const e = Object.keys(t)[0], r = "triplex-next";
-    let o = "1.4.0";
+    let o = "1.6.0";
     return o = o.replace(/\./g, "-"), Object.keys(t[e]).map(
-      (T) => `--${r}-${e}-${T}-${o}: ${n.getTokenValue(
-        t[e][T],
+      (m) => `--${r}-${e}-${m}-${o}: ${n.getTokenValue(
+        t[e][m],
         s
       )};`
     ).join(`
@@ -34,12 +34,12 @@ const n = {
     let e = "";
     switch (t) {
       case i.LIGHT: {
-        const r = l({}, s, m, c);
+        const r = T({}, s, l, c);
         e = n.getStyleByTokens(r);
         break;
       }
       case i.DARK: {
-        const r = l(
+        const r = T(
           {},
           s,
           a,