@alphakits/ui 2.5.1 → 2.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/modal/components/modals/index.css +1 -1
  2. package/dist/modal/components/modals/modal.js +75 -66
  3. package/package.json +1 -1
package/dist/modal/components/modals/index.css CHANGED
@@ -1 +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}.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}}
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}.bottomSheet_CI-8{inset:0!important;width:100%!important;max-width:100%!important;height:100dvh;max-height:100dvh;border-radius:0!important;transform:translateY(100%);transition:transform .25s cubic-bezier(.32,.72,0,1)}@supports not (height: 100dvh){.bottomSheet_CI-8{height:100vh;max-height:100vh}}.bottomSheet_CI-8.open_eGDW{transform:translateY(0)}.bottomSheet_CI-8[data-anim-done=true]{transform:none;transition: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/modal.js CHANGED
@@ -1,16 +1,16 @@
1
- import { jsxs as E, jsx as l } from "react/jsx-runtime";
2
- import O from "@alphakits/icons/dist/CloseM";
3
- import C from "classnames";
4
- import { useState as L, useRef as w, useLayoutEffect as N, useEffect as k, useCallback as S } from "react";
5
- import { Button as z } from "../../../button/component.js";
6
- import { showConfirm as j } from "../../../confirm-popup/component.js";
7
- import { useMatchMedia as B } from "../../../mq/use-match-media.js";
1
+ import { jsxs as w, jsx as d } from "react/jsx-runtime";
2
+ import z from "@alphakits/icons/dist/CloseM";
3
+ import k from "classnames";
4
+ import { useState as S, useRef as T, useLayoutEffect as j, useCallback as p, useEffect as A } from "react";
5
+ import { Button as B } from "../../../button/component.js";
6
+ import { showConfirm as q } from "../../../confirm-popup/component.js";
7
+ import { useMatchMedia as K } from "../../../mq/use-match-media.js";
8
8
  import s from "./index.module.css.js";
9
- const R = {
9
+ const N = {
10
10
  s: 488,
11
11
  m: 888,
12
12
  full: "96%"
13
- }, T = 102, D = "(max-width: 823px)", K = (e) => e === "full" ? `calc(-96vw - ${T}px)` : -R[e] - T, _ = [
13
+ }, F = 102, _ = "(max-width: 823px)", P = (e) => e === "full" ? `calc(-96vw - ${F}px)` : -N[e] - F, $ = [
14
14
  'a[href]:not([tabindex="-1"])',
15
15
  'area[href]:not([tabindex="-1"])',
16
16
  'button:not([disabled]):not([tabindex="-1"])',
@@ -25,37 +25,44 @@ const R = {
25
25
  'audio[controls]:not([tabindex="-1"])',
26
26
  'video[controls]:not([tabindex="-1"])',
27
27
  'details > summary:first-of-type:not([tabindex="-1"])'
28
- ].join(","), F = (e) => e ? Array.from(e.querySelectorAll(_)).filter((r) => {
28
+ ].join(","), R = (e) => e ? Array.from(e.querySelectorAll($)).filter((r) => {
29
29
  if (r.hidden || r.getAttribute("aria-hidden") === "true") return !1;
30
30
  const a = window.getComputedStyle(r);
31
31
  return a.visibility === "hidden" || a.display === "none" ? !1 : r.offsetWidth > 0 || r.offsetHeight > 0 || r.getClientRects().length > 0;
32
- }) : [], W = ({ modal: e, t: c, index: r, dirtyModals: a, closeModal: m, currentModalId: u }) => {
33
- const A = K(e.props.size), [b] = B(D), [p, y] = L(!1), i = w(null), x = w(null);
34
- N(() => {
35
- const o = requestAnimationFrame(() => y(!0));
36
- return () => cancelAnimationFrame(o);
37
- }, [e.id]), k(() => {
32
+ }) : [], Q = ({ modal: e, t: c, index: r, dirtyModals: a, closeModal: y, currentModalId: u }) => {
33
+ const O = P(e.props.size), [f] = K(_), [m, h] = S(!1), [L, x] = S(!1), i = T(null), v = T(null);
34
+ j(() => {
35
+ const t = requestAnimationFrame(() => h(!0));
36
+ return () => cancelAnimationFrame(t);
37
+ }, [e.id]);
38
+ const D = p(
39
+ (t) => {
40
+ t.propertyName === "transform" && t.target === t.currentTarget && (!m || !f || x(!0));
41
+ },
42
+ [m, f]
43
+ );
44
+ A(() => {
38
45
  if (e.id !== u) return;
39
- x.current = document.activeElement || null;
40
- const o = setTimeout(() => {
41
- const n = F(i.current)[0] || i.current;
42
- n && typeof n.focus == "function" && n.focus({ preventScroll: !0 });
46
+ v.current = document.activeElement || null;
47
+ const t = setTimeout(() => {
48
+ const o = R(i.current)[0] || i.current;
49
+ o && typeof o.focus == "function" && o.focus({ preventScroll: !0 });
43
50
  }, 50);
44
51
  return () => {
45
- clearTimeout(o);
46
- const t = document.activeElement;
47
- if (!t || !i.current?.contains(t)) return;
48
- const n = x.current;
49
- if (n && typeof n.focus == "function" && document.body.contains(n))
52
+ clearTimeout(t);
53
+ const n = document.activeElement;
54
+ if (!n || !i.current?.contains(n)) return;
55
+ const o = v.current;
56
+ if (o && typeof o.focus == "function" && document.body.contains(o))
50
57
  try {
51
- n.focus({ preventScroll: !0 });
58
+ o.focus({ preventScroll: !0 });
52
59
  } catch {
53
60
  document.body.focus();
54
61
  }
55
62
  };
56
63
  }, [e.id, u]);
57
- const h = S(
58
- (o) => a[o] ? j({
64
+ const g = p(
65
+ (t) => a[t] ? q({
59
66
  title: c("common:exitConfirm"),
60
67
  confirmText: c("common:Да"),
61
68
  cancelText: c("common:Нет"),
@@ -63,38 +70,38 @@ const R = {
63
70
  }) : Promise.resolve(!0),
64
71
  // eslint-disable-next-line react-hooks/exhaustive-deps
65
72
  [a, c]
66
- ), f = S(
67
- async (o) => {
68
- const { id: t } = e;
69
- await h(o || t) && (y(!1), setTimeout(() => {
70
- e.props.closeCallback && e.props.closeCallback(), m(o || t);
73
+ ), l = p(
74
+ async (t) => {
75
+ const { id: n } = e;
76
+ await g(t || n) && (x(!1), requestAnimationFrame(() => h(!1)), setTimeout(() => {
77
+ e.props.closeCallback && e.props.closeCallback(), y(t || n);
71
78
  }, 250));
72
79
  },
73
- [m, h, e]
80
+ [y, g, e]
74
81
  );
75
- return k(() => {
76
- const o = (t) => {
77
- if (t.key === "27" || t.key === "Escape") {
78
- f(u);
82
+ return A(() => {
83
+ const t = (n) => {
84
+ if (n.key === "27" || n.key === "Escape") {
85
+ l(u);
79
86
  return;
80
87
  }
81
- if (t.key !== "Tab") return;
82
- const n = F(i.current);
83
- if (!n.length) {
84
- t.preventDefault(), i.current && i.current.focus({ preventScroll: !0 });
88
+ if (n.key !== "Tab") return;
89
+ const o = R(i.current);
90
+ if (!o.length) {
91
+ n.preventDefault(), i.current && i.current.focus({ preventScroll: !0 });
85
92
  return;
86
93
  }
87
- const v = n[0], g = n[n.length - 1], d = document.activeElement;
88
- if (t.shiftKey && (d === v || !i.current?.contains(d))) {
89
- t.preventDefault(), g.focus({ preventScroll: !0 });
94
+ const E = o[0], C = o[o.length - 1], b = document.activeElement;
95
+ if (n.shiftKey && (b === E || !i.current?.contains(b))) {
96
+ n.preventDefault(), C.focus({ preventScroll: !0 });
90
97
  return;
91
98
  }
92
- !t.shiftKey && (d === g || !i.current?.contains(d)) && (t.preventDefault(), v.focus({ preventScroll: !0 }));
99
+ !n.shiftKey && (b === C || !i.current?.contains(b)) && (n.preventDefault(), E.focus({ preventScroll: !0 }));
93
100
  };
94
- return e.id === u && window?.addEventListener("keydown", o), () => {
95
- window?.removeEventListener("keydown", o);
101
+ return e.id === u && window?.addEventListener("keydown", t), () => {
102
+ window?.removeEventListener("keydown", t);
96
103
  };
97
- }, [f, u, e.id]), /* @__PURE__ */ E(
104
+ }, [l, u, e.id]), /* @__PURE__ */ w(
98
105
  "div",
99
106
  {
100
107
  className: s.container,
@@ -102,58 +109,60 @@ const R = {
102
109
  zIndex: 9999998 + r
103
110
  },
104
111
  children: [
105
- /* @__PURE__ */ l(
112
+ /* @__PURE__ */ d(
106
113
  "div",
107
114
  {
108
115
  ref: i,
109
- className: C(s.right, s.content, {
110
- [s.open]: p,
111
- [s.bottomSheet]: b
116
+ className: k(s.right, s.content, {
117
+ [s.open]: m,
118
+ [s.bottomSheet]: f
112
119
  }),
113
120
  style: {
114
121
  zIndex: 9999999 + r,
115
- width: R[e.props.size],
122
+ width: N[e.props.size],
116
123
  // На десктопе right-slide управляется JS-ом (старая
117
124
  // схема — анимация ширины и right'а синхронны). На
118
125
  // мобиле right=0 всегда, а появление контролируется
119
126
  // CSS-классом .open → transform: translateY(0).
120
- right: b || p ? 0 : A
127
+ right: f || m ? 0 : O
121
128
  },
129
+ onTransitionEnd: D,
130
+ "data-anim-done": f && L ? "true" : void 0,
122
131
  role: "dialog",
123
132
  "aria-modal": "true",
124
133
  "aria-labelledby": `modal-title-${e.id}`,
125
134
  tabIndex: -1,
126
- children: /* @__PURE__ */ E("div", { className: s.inner, children: [
127
- /* @__PURE__ */ l(
135
+ children: /* @__PURE__ */ w("div", { className: s.inner, children: [
136
+ /* @__PURE__ */ d(
128
137
  e.modal,
129
138
  {
130
139
  ...e.props,
131
140
  modalId: e.id,
132
- close: () => f()
141
+ close: () => l()
133
142
  }
134
143
  ),
135
- /* @__PURE__ */ l(
136
- z,
144
+ /* @__PURE__ */ d(
145
+ B,
137
146
  {
138
- className: C(s.button, {
147
+ className: k(s.button, {
139
148
  [s.doubleModal]: e.props.isDouble
140
149
  }),
141
150
  view: "secondary",
142
151
  size: "xs",
143
- leftAddons: /* @__PURE__ */ l(O, {}),
144
- onClick: () => f()
152
+ leftAddons: /* @__PURE__ */ d(z, {}),
153
+ onClick: () => l()
145
154
  }
146
155
  )
147
156
  ] })
148
157
  }
149
158
  ),
150
- /* @__PURE__ */ l(
159
+ /* @__PURE__ */ d(
151
160
  "button",
152
161
  {
153
162
  className: s.bg,
154
163
  "aria-label": "Close dialog",
155
164
  type: "button",
156
- onClick: () => f()
165
+ onClick: () => l()
157
166
  }
158
167
  )
159
168
  ]
@@ -161,5 +170,5 @@ const R = {
161
170
  );
162
171
  };
163
172
  export {
164
- W as Modal
173
+ Q as Modal
165
174
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alphakits/ui",
3
- "version": "2.5.1",
3
+ "version": "2.5.3",
4
4
  "files": [
5
5
  "dist"
6
6
  ],