@alphakits/ui 2.4.9 → 2.5.1

package/dist/cell/base/component.js

@@ -1,82 +1,79 @@
-import { jsxs as z, jsx as c } from "react/jsx-runtime";
-import u from "classnames";
-import { useRef as p, useState as I, useMemo as N, useEffect as E } from "react";
-import { getDataTestId as j } from "../../__internal/utils/get-data-test-id.js";
-import { useFocus as k } from "../../hooks/useFocus/index.js";
-import { Typography as v } from "../../typography/component.js";
-import { Pure as S } from "../pure/component.js";
+import { jsxs as y, jsx as n } from "react/jsx-runtime";
+import c from "classnames";
+import { useRef as E, useCallback as T } from "react";
+import { getDataTestId as N } from "../../__internal/utils/get-data-test-id.js";
+import { useFocus as _ } from "../../hooks/useFocus/index.js";
+import { Typography as f } from "../../typography/component.js";
+import { Pure as A } from "../pure/component.js";
 import r from "./index.module.css.js";
-const P = ({
-  className: w,
-  dataTestId: y,
-  title: e,
-  subtitle: m,
-  size: h = "m",
-  addon: b,
-  compactAddon: g,
-  singleLineTitle: s,
-  showTitleTooltipOnOverflow: i
+const p = (t, i) => T(
+  (o) => {
+    if (!i || !t) return;
+    const e = o.currentTarget, s = e.firstElementChild ?? e;
+    s.scrollWidth > s.clientWidth + 1 ? e.getAttribute("title") !== t && e.setAttribute("title", t) : e.hasAttribute("title") && e.removeAttribute("title");
+  },
+  [t, i]
+), u = (t) => typeof t == "string" || typeof t == "number" ? String(t) : void 0, R = ({
+  className: t,
+  dataTestId: i,
+  title: o,
+  subtitle: e,
+  size: s = "m",
+  addon: a,
+  compactAddon: h,
+  singleLineTitle: l,
+  showTitleTooltipOnOverflow: g
 }) => {
-  const d = p(null), a = p(null), [x] = k(d, "keyboard"), [R, f] = I(!1), n = N(
-    () => typeof e == "string" || typeof e == "number" ? String(e) : void 0,
-    [e]
-  );
-  return E(() => {
-    if (!s || !i || !n) {
-      f(!1);
-      return;
-    }
-    const t = a.current;
-    if (!t) return;
-    const o = () => {
-      f(t.scrollWidth > t.clientWidth);
-    };
-    if (o(), typeof ResizeObserver < "u") {
-      const l = new ResizeObserver(o);
-      return l.observe(t), () => l.disconnect();
-    }
-    return window.addEventListener("resize", o), () => window.removeEventListener("resize", o);
-  }, [s, i, n]), /* @__PURE__ */ z(
-    S,
+  const m = E(null), [w] = _(m, "keyboard"), d = !!l && !!g, b = p(u(o), d), v = p(u(e), d);
+  return /* @__PURE__ */ y(
+    A,
     {
-      slot: b,
-      compact: g,
-      className: u(r.component, { [r.focused]: x }, w),
-      dataTestId: j("cell-action", y, !0),
+      slot: a,
+      compact: h,
+      className: c(r.component, { [r.focused]: w }, t),
+      dataTestId: N("cell-action", i, !0),
       tabIndex: 0,
-      size: h,
-      ref: d,
+      size: s,
+      ref: m,
       children: [
-        e && /* @__PURE__ */ c(
+        o && /* @__PURE__ */ n(
           "div",
           {
-            ref: a,
-            className: u(r.title_wrap, {
-              [r.single_line]: s
+            className: c(r.title_wrap, {
+              [r.single_line]: l
             }),
-            title: R && i ? n : void 0,
-            children: /* @__PURE__ */ c(
-              v.Text,
+            onMouseEnter: b,
+            children: /* @__PURE__ */ n(
+              f.Text,
               {
                 view: "title",
                 color: "primary",
                 weight: "medium",
                 tag: "div",
                 className: r.title,
-                children: e
+                children: o
               }
             )
           }
         ),
-        m && /* @__PURE__ */ c(
-          v.Text,
+        e && /* @__PURE__ */ n(
+          "div",
           {
-            weight: "medium",
-            view: "caps",
-            tag: "div",
-            className: r.subtitle,
-            color: "secondary",
-            children: m
+            className: c(r.subtitle_wrap, {
+              [r.subtitle_single_line]: l
+            }),
+            onMouseEnter: v,
+            children: /* @__PURE__ */ n(
+              f.Text,
+              {
+                weight: "medium",
+                view: "caps",
+                tag: "div",
+                className: r.subtitle,
+                color: "secondary",
+                children: e
+              }
+            )
           }
         )
       ]
@@ -84,5 +81,5 @@ const P = ({
   );
 };
 export {
-  P as Base
+  R as Base
 };

package/dist/cell/base/index.css

@@ -1 +1 @@
-.component_BNjZ{outline:none}.component_BNjZ .superEllipse_FONr{--super-ellipse-success-icon-color: var(--color-graphic-thirdly)}.component_BNjZ .iconMixColors_Zfj6{color:var(--color-graphic-primary)}.iconMixColors_Zfj6,.superEllipse_FONr{--super-ellipse-transition: fill .15s ease-in-out;--super-ellipse-icon-transition: color .15s ease-in-out;transition:transform .15s ease-in-out}.title_wrap_10zd{display:flex;align-items:center}.title_wrap_10zd+.subtitle_OOoZ{margin-top:var(--gap-2xs)}.title_wrap_10zd{min-width:0}.title_VeYl{display:flex;align-items:center}.single_line_4wfi .title_VeYl{display:block;min-width:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.focused_ootM{outline:2px solid var(--focus-color);outline-offset:2px}
+.component_BNjZ{outline:none}.component_BNjZ .superEllipse_FONr{--super-ellipse-success-icon-color: var(--color-graphic-thirdly)}.component_BNjZ .iconMixColors_Zfj6{color:var(--color-graphic-primary)}.iconMixColors_Zfj6,.superEllipse_FONr{--super-ellipse-transition: fill .15s ease-in-out;--super-ellipse-icon-transition: color .15s ease-in-out;transition:transform .15s ease-in-out}.title_wrap_10zd{display:flex;align-items:center}.title_wrap_10zd+.subtitle_OOoZ{margin-top:var(--gap-2xs)}.title_wrap_10zd{min-width:0}.title_VeYl{display:flex;align-items:center}.single_line_4wfi .title_VeYl{display:block;min-width:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.subtitle_wrap_xH8m{display:block;min-width:0}.subtitle_single_line_6DGn .subtitle_OOoZ{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.focused_ootM{outline:2px solid var(--focus-color);outline-offset:2px}

package/dist/cell/base/index.module.css.js

@@ -1,19 +1,23 @@
 import * as __css from './index.css';
 export const __cssModule = __css;
-const t = "component_BNjZ", e = "title_wrap_10zd", o = "subtitle_OOoZ", n = "title_VeYl", s = "single_line_4wfi", l = "focused_ootM", i = {
+const t = "component_BNjZ", e = "title_wrap_10zd", l = "subtitle_OOoZ", s = "title_VeYl", i = "single_line_4wfi", n = "subtitle_wrap_xH8m", _ = "subtitle_single_line_6DGn", o = "focused_ootM", c = {
   component: t,
   title_wrap: e,
-  subtitle: o,
-  title: n,
-  single_line: s,
-  focused: l
+  subtitle: l,
+  title: s,
+  single_line: i,
+  subtitle_wrap: n,
+  subtitle_single_line: _,
+  focused: o
 };
 export {
   t as component,
-  i as default,
-  l as focused,
-  s as single_line,
-  o as subtitle,
-  n as title,
+  c as default,
+  o as focused,
+  i as single_line,
+  l as subtitle,
+  _ as subtitle_single_line,
+  n as subtitle_wrap,
+  s as title,
   e as title_wrap
 };

package/dist/modal/components/modals/index.css

@@ -1 +1 @@
-.container_WE0K{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}.content_p1kc{background:var(--color-bg-primary);box-shadow:0 0 10px #0003}@media print{.content_p1kc{width:100%!important}}.button_js2W{position:absolute!important;top:34px;right:32px;z-index:999}.button_js2W.doubleModal_1ZTt{right:384px}.inner_Zsdb{height:100%;box-sizing:border-box;overflow:auto}.right_e065{position:fixed;top:0;right:0;bottom:0;transition:width .2s,opacity .2s,right .2s;transition-delay:width .1s;transition-timing-function:ease-in}.bg_8ZfP{transition:opacity .2s;background:#00000080;position:fixed;display:block;border:0;inset:0}@media screen and (max-width:823px){.right_e065,.center_nguy{max-width:100%!important;inset:0!important}.content_p1kc{width:100%!important;height:100%!important;max-height:100%!important;box-shadow:none!important;margin:0!important;border-radius:0!important}.button_js2W{top:24px!important;right:16px!important}}
+.container_WE0K{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}.content_p1kc{background:var(--color-bg-primary);box-shadow:0 0 10px #0003}@media print{.content_p1kc{width:100%!important}}.button_js2W{position:absolute!important;top:34px;right:32px;z-index:999}.button_js2W.doubleModal_1ZTt{right:384px}.inner_Zsdb{height:100%;box-sizing:border-box;overflow:auto}.right_e065{position:fixed;top:0;right:0;bottom:0;transition:width .2s,opacity .2s,right .2s;transition-delay:width .1s;transition-timing-function:ease-in}.bg_8ZfP{transition:opacity .2s;background:#00000080;position:fixed;display:block;border:0;inset:0}.bottomSheet_CI-8{inset:auto 0 0!important;width:100%!important;max-width:100%!important;height:92dvh;max-height:92dvh;border-top-left-radius:16px;border-top-right-radius:16px;overflow:hidden;transform:translateY(100%);transition:transform .25s cubic-bezier(.32,.72,0,1);box-shadow:0 -2px 16px #00000026!important}@supports not (height: 100dvh){.bottomSheet_CI-8{height:92vh;max-height:92vh}}.bottomSheet_CI-8.open_eGDW{transform:translateY(0)}.bottomSheet_CI-8:before{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:36px;height:4px;border-radius:2px;background:var(--color-bg-thirdly, rgba(0, 0, 0, .2));z-index:1000;pointer-events:none}@media screen and (max-width:823px){.right_e065,.center_nguy{max-width:100%!important;right:0!important;left:0!important}.content_p1kc{box-shadow:none!important;margin:0!important}.button_js2W{top:16px!important;right:16px!important}}

package/dist/modal/components/modals/index.module.css.js

@@ -1,21 +1,25 @@
 import * as __css from './index.css';
 export const __cssModule = __css;
-const t = "container_WE0K", n = "content_p1kc", o = "button_js2W", e = "doubleModal_1ZTt", c = "inner_Zsdb", s = "right_e065", b = "bg_8ZfP", r = {
+const t = "container_WE0K", o = "content_p1kc", n = "button_js2W", e = "doubleModal_1ZTt", c = "inner_Zsdb", s = "right_e065", b = "bg_8ZfP", r = "bottomSheet_CI-8", i = "open_eGDW", _ = {
   container: t,
-  content: n,
-  button: o,
+  content: o,
+  button: n,
   doubleModal: e,
   inner: c,
   right: s,
-  bg: b
+  bg: b,
+  bottomSheet: r,
+  open: i
 };
 export {
   b as bg,
-  o as button,
+  r as bottomSheet,
+  n as button,
   t as container,
-  n as content,
-  r as default,
+  o as content,
+  _ as default,
   e as doubleModal,
   c as inner,
+  i as open,
   s as right
 };

package/dist/modal/components/modals/modal.js

@@ -1,93 +1,159 @@
-import { jsxs as d, jsx as i } from "react/jsx-runtime";
-import y from "@alphakits/icons/dist/CloseM";
-import k from "classnames";
-import { useState as v, useLayoutEffect as x, useCallback as w, useEffect as E } from "react";
-import { Button as g } from "../../../button/component.js";
-import { showConfirm as F } from "../../../confirm-popup/component.js";
+import { jsxs as E, jsx as l } from "react/jsx-runtime";
+import O from "@alphakits/icons/dist/CloseM";
+import C from "classnames";
+import { useState as L, useRef as w, useLayoutEffect as N, useEffect as k, useCallback as S } from "react";
+import { Button as z } from "../../../button/component.js";
+import { showConfirm as j } from "../../../confirm-popup/component.js";
+import { useMatchMedia as B } from "../../../mq/use-match-media.js";
 import s from "./index.module.css.js";
-const C = {
+const R = {
   s: 488,
   m: 888,
   full: "96%"
-}, b = 102, N = (e) => e === "full" ? `calc(-96vw - ${b}px)` : -C[e] - b, j = ({ modal: e, t: r, index: m, dirtyModals: a, closeModal: l, currentModalId: c }) => {
-  const f = N(e.props.size), [h, p] = v(f);
-  x(() => {
-    const o = requestAnimationFrame(() => p(0));
+}, T = 102, D = "(max-width: 823px)", K = (e) => e === "full" ? `calc(-96vw - ${T}px)` : -R[e] - T, _ = [
+  'a[href]:not([tabindex="-1"])',
+  'area[href]:not([tabindex="-1"])',
+  'button:not([disabled]):not([tabindex="-1"])',
+  'input:not([disabled]):not([type="hidden"]):not([tabindex="-1"])',
+  'select:not([disabled]):not([tabindex="-1"])',
+  'textarea:not([disabled]):not([tabindex="-1"])',
+  '[contenteditable="true"]:not([tabindex="-1"])',
+  '[tabindex]:not([tabindex="-1"])',
+  'iframe:not([tabindex="-1"])',
+  'object:not([tabindex="-1"])',
+  'embed:not([tabindex="-1"])',
+  'audio[controls]:not([tabindex="-1"])',
+  'video[controls]:not([tabindex="-1"])',
+  'details > summary:first-of-type:not([tabindex="-1"])'
+].join(","), F = (e) => e ? Array.from(e.querySelectorAll(_)).filter((r) => {
+  if (r.hidden || r.getAttribute("aria-hidden") === "true") return !1;
+  const a = window.getComputedStyle(r);
+  return a.visibility === "hidden" || a.display === "none" ? !1 : r.offsetWidth > 0 || r.offsetHeight > 0 || r.getClientRects().length > 0;
+}) : [], W = ({ modal: e, t: c, index: r, dirtyModals: a, closeModal: m, currentModalId: u }) => {
+  const A = K(e.props.size), [b] = B(D), [p, y] = L(!1), i = w(null), x = w(null);
+  N(() => {
+    const o = requestAnimationFrame(() => y(!0));
     return () => cancelAnimationFrame(o);
-  }, [e.id]);
-  const u = w(
-    (o) => a[o] ? F({
-      title: r("common:exitConfirm"),
-      confirmText: r("common:Да"),
-      cancelText: r("common:Нет"),
+  }, [e.id]), k(() => {
+    if (e.id !== u) return;
+    x.current = document.activeElement || null;
+    const o = setTimeout(() => {
+      const n = F(i.current)[0] || i.current;
+      n && typeof n.focus == "function" && n.focus({ preventScroll: !0 });
+    }, 50);
+    return () => {
+      clearTimeout(o);
+      const t = document.activeElement;
+      if (!t || !i.current?.contains(t)) return;
+      const n = x.current;
+      if (n && typeof n.focus == "function" && document.body.contains(n))
+        try {
+          n.focus({ preventScroll: !0 });
+        } catch {
+          document.body.focus();
+        }
+    };
+  }, [e.id, u]);
+  const h = S(
+    (o) => a[o] ? j({
+      title: c("common:exitConfirm"),
+      confirmText: c("common:Да"),
+      cancelText: c("common:Нет"),
       confirmView: "negative"
     }) : Promise.resolve(!0),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [a, r]
-  ), t = w(
+    [a, c]
+  ), f = S(
     async (o) => {
-      const { id: n } = e;
-      await u(o || n) && (p(f), setTimeout(() => {
-        e.props.closeCallback && e.props.closeCallback(), l(o || n);
+      const { id: t } = e;
+      await h(o || t) && (y(!1), setTimeout(() => {
+        e.props.closeCallback && e.props.closeCallback(), m(o || t);
       }, 250));
     },
-    [l, u, e, f]
+    [m, h, e]
   );
-  return E(() => {
-    const o = (n) => {
-      (n.key === "27" || n.key === "Escape") && t(c);
+  return k(() => {
+    const o = (t) => {
+      if (t.key === "27" || t.key === "Escape") {
+        f(u);
+        return;
+      }
+      if (t.key !== "Tab") return;
+      const n = F(i.current);
+      if (!n.length) {
+        t.preventDefault(), i.current && i.current.focus({ preventScroll: !0 });
+        return;
+      }
+      const v = n[0], g = n[n.length - 1], d = document.activeElement;
+      if (t.shiftKey && (d === v || !i.current?.contains(d))) {
+        t.preventDefault(), g.focus({ preventScroll: !0 });
+        return;
+      }
+      !t.shiftKey && (d === g || !i.current?.contains(d)) && (t.preventDefault(), v.focus({ preventScroll: !0 }));
     };
-    return e.id === c && window?.addEventListener("keydown", o), () => {
+    return e.id === u && window?.addEventListener("keydown", o), () => {
       window?.removeEventListener("keydown", o);
     };
-  }, [t, c, e.id]), /* @__PURE__ */ d(
+  }, [f, u, e.id]), /* @__PURE__ */ E(
     "div",
     {
       className: s.container,
       style: {
-        zIndex: 9999998 + m
+        zIndex: 9999998 + r
       },
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ l(
           "div",
           {
-            className: k(s.right, s.content),
+            ref: i,
+            className: C(s.right, s.content, {
+              [s.open]: p,
+              [s.bottomSheet]: b
+            }),
             style: {
-              zIndex: 9999999 + m,
-              width: C[e.props.size],
-              right: h
+              zIndex: 9999999 + r,
+              width: R[e.props.size],
+              // На десктопе right-slide управляется JS-ом (старая
+              // схема — анимация ширины и right'а синхронны). На
+              // мобиле right=0 всегда, а появление контролируется
+              // CSS-классом .open → transform: translateY(0).
+              right: b || p ? 0 : A
             },
-            children: /* @__PURE__ */ d("div", { className: s.inner, children: [
-              /* @__PURE__ */ i(
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": `modal-title-${e.id}`,
+            tabIndex: -1,
+            children: /* @__PURE__ */ E("div", { className: s.inner, children: [
+              /* @__PURE__ */ l(
                 e.modal,
                 {
                   ...e.props,
                   modalId: e.id,
-                  close: () => t()
+                  close: () => f()
                 }
               ),
-              /* @__PURE__ */ i(
-                g,
+              /* @__PURE__ */ l(
+                z,
                 {
-                  className: k(s.button, {
+                  className: C(s.button, {
                     [s.doubleModal]: e.props.isDouble
                   }),
                   view: "secondary",
                   size: "xs",
-                  leftAddons: /* @__PURE__ */ i(y, {}),
-                  onClick: () => t()
+                  leftAddons: /* @__PURE__ */ l(O, {}),
+                  onClick: () => f()
                 }
               )
             ] })
           }
         ),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ l(
           "button",
           {
             className: s.bg,
-            "aria-label": "close_backdrop",
+            "aria-label": "Close dialog",
             type: "button",
-            onClick: () => t()
+            onClick: () => f()
           }
         )
       ]
@@ -95,5 +161,5 @@ const C = {
   );
 };
 export {
-  j as Modal
+  W as Modal
 };

package/dist/table/components/cell/component.js

@@ -1,59 +1,59 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import s from "classnames";
-import { Cell as T } from "../../../cell/component.js";
+import { Cell as p } from "../../../cell/component.js";
 import e from "./index.module.css.js";
-const w = ({
-  dataTestID: c,
-  className: n,
+const u = ({
+  dataTestID: d,
+  className: a,
   children: l,
   title: o,
-  subtitle: a,
+  subtitle: n,
   tableProps: h,
-  cellProps: d,
+  cellProps: c,
   addon: f,
-  align: i,
-  compact: t,
+  align: t,
+  compact: r,
   width: v,
   tag: m = "td"
-}) => /* @__PURE__ */ r(
+}) => /* @__PURE__ */ i(
   m,
   {
-    "data-test-id": c,
-    className: s(e.cell, n, {
+    "data-test-id": d,
+    className: s(e.cell, a, {
       [e.is_div]: m === "div",
-      [e.compact_cell]: t
+      [e.compact_cell]: r
     }),
     style: { width: v },
     ...h,
-    children: l ? /* @__PURE__ */ r(
+    children: l ? /* @__PURE__ */ i(
       "div",
       {
         className: s(e.children, {
-          [e.center]: i === "center",
-          [e.right]: i === "right"
+          [e.center]: t === "center",
+          [e.right]: t === "right"
         }),
         children: l
       }
-    ) : /* @__PURE__ */ r(
-      T.Base,
+    ) : /* @__PURE__ */ i(
+      p.Base,
       {
         title: o === void 0 ? "-" : o,
-        subtitle: a,
-        size: d?.size || (t ? "s" : "m"),
-        compactAddon: t,
-        singleLineTitle: t,
-        showTitleTooltipOnOverflow: t,
+        subtitle: n,
+        size: c?.size || (r ? "s" : "m"),
+        compactAddon: r,
+        singleLineTitle: !0,
+        showTitleTooltipOnOverflow: !0,
         className: s({
-          [e.center]: i === "center",
-          [e.right]: i === "right",
-          [e.compact_content]: t
+          [e.center]: t === "center",
+          [e.right]: t === "right",
+          [e.compact_content]: r
         }),
         addon: f,
-        ...d
+        ...c
       }
     )
   }
 );
 export {
-  w as TableCell
+  u as TableCell
 };

package/dist/table/components/cell/index.css

@@ -1 +1 @@
-table tr:last-child .cell_SVZP{border-bottom:0!important}.cell_SVZP{padding:8px 16px;border-bottom:1px solid var(--color-border-secondary);position:relative;min-height:56px;box-sizing:border-box;vertical-align:middle}.compact_cell_zSJH{min-height:44px;padding:8px 12px}.right_30pJ{justify-content:flex-end}.children_X057{width:100%;display:flex;align-items:center}.compact_content_bjnq{gap:0 6px!important;min-height:40px!important}.is_div_XHlH{display:flex;align-items:center}.cell_SVZP.is_div_XHlH{padding-top:12px;padding-bottom:12px}.compact_cell_zSJH.is_div_XHlH{min-height:44px}
+table tr:last-child .cell_SVZP{border-bottom:0!important}.cell_SVZP{padding:8px 16px;border-bottom:1px solid var(--color-border-secondary);position:relative;min-height:56px;box-sizing:border-box;vertical-align:middle;overflow:hidden}.compact_cell_zSJH{min-height:44px;padding:8px 12px}.right_30pJ{justify-content:flex-end}.children_X057{width:100%;display:flex;align-items:center}.compact_content_bjnq{gap:0 6px!important;min-height:40px!important}.is_div_XHlH{display:flex;align-items:center}.cell_SVZP.is_div_XHlH{padding-top:12px;padding-bottom:12px}.compact_cell_zSJH.is_div_XHlH{min-height:44px}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alphakits/ui",
-    "version": "2.4.9",
+    "version": "2.5.1",
     "files": [
         "dist"
     ],