@alphakits/ui 2.0.5 → 2.0.7

package/dist/checkbox/component.js

@@ -12,19 +12,19 @@ const P = y(
     label: o,
     hint: a,
     size: d = "m",
-    align: p = "center",
+    align: p = "start",
     addons: n,
     block: h,
-    onChange: m,
+    onChange: t,
     className: u,
     name: N,
-    disabled: t,
+    disabled: m,
     dataTestId: b,
     indeterminate: l = !1,
     ...k
   }, x) => {
     const i = C(null), [R] = I(i, "keyboard"), g = (f) => {
-      m && m(f, { checked: f.target.checked, name: N });
+      t && t(f, { checked: f.target.checked, name: N });
     };
     return (
       // eslint-disable-next-line jsx-a11y/label-has-associated-control
@@ -32,7 +32,7 @@ const P = y(
         "label",
         {
           className: F(e.component, e[d], e[p], u, {
-            [e.disabled]: t,
+            [e.disabled]: m,
             [e.checked]: r,
             [e.indeterminate]: l,
             [e.focused]: R,
@@ -46,7 +46,7 @@ const P = y(
                 {
                   type: "checkbox",
                   onChange: g,
-                  disabled: t,
+                  disabled: m,
                   checked: r,
                   "data-test-id": b,
                   ...k

package/dist/checkbox/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/checkbox/component.tsx"],"sourcesContent":["import React, {\n    ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode, useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport CheckmarkS from '@alphakits/icons/dist/CheckmarkS';\nimport MinusM from '@alphakits/icons/dist/MinusM';\nimport cn from 'classnames';\n\nimport { useFocus } from '../hooks/useFocus';\n\nimport styles from './index.module.css';\n\ntype NativeProps = InputHTMLAttributes<HTMLInputElement>;\ntype Align = 'start' | 'center';\n\nexport type CheckboxProps = Omit<NativeProps, 'size' | 'onChange'> & {\n    /**\n     * Управление состоянием вкл/выкл чекбокса (native prop)\n     */\n    checked?: boolean;\n\n    /**\n     * Обработчик переключения чекбокса\n     */\n    onChange: (\n        /* eslint-disable-next-line @typescript-eslint/no-unused-vars */\n        event: ChangeEvent<HTMLInputElement>,\n        /* eslint-disable-next-line @typescript-eslint/no-unused-vars */\n        payload: {\n            checked: boolean;\n            name?: string;\n        },\n    ) => void;\n\n    /**\n     * Текст подписи к чекбоксу\n     */\n    label?: ReactNode;\n\n    /**\n     * Текст подсказки снизу\n     */\n    hint?: ReactNode;\n\n    /**\n     * Размер компонента\n     */\n    size?: 's' | 'm';\n\n    /**\n     * Выравнивание\n     */\n    align?: Align;\n\n    /**\n     * Дополнительный слот\n     */\n    addons?: React.ReactNode;\n\n    /**\n     * Растягивать ли компонент на всю ширину\n     */\n    block?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Управление неопределенным состоянием чекбокса\n     */\n    indeterminate?: boolean;\n};\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n    (\n        {\n            checked,\n            label,\n            hint,\n            size = 'm',\n            align = 'center',\n            addons,\n            block,\n            onChange,\n            className,\n            name,\n            disabled,\n            dataTestId,\n            indeterminate = false,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const labelRef = useRef<HTMLLabelElement>(null);\n\n        const [focused] = useFocus(labelRef, 'keyboard');\n\n        const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n            if (onChange) {\n                onChange(event, { checked: event.target.checked, name });\n            }\n        };\n\n        return (\n            // eslint-disable-next-line jsx-a11y/label-has-associated-control\n            <label\n                className={ cn(styles.component, styles[size], styles[align], className, {\n                    [styles.disabled]: disabled,\n                    [styles.checked]: checked,\n                    [styles.indeterminate]: indeterminate,\n                    [styles.focused]: focused,\n                    [styles.block]: block,\n                }) }\n                ref={ mergeRefs([labelRef, ref]) }\n            >\n                <span className={ styles.box }>\n                    <input\n                        type=\"checkbox\"\n                        onChange={ handleChange }\n                        disabled={ disabled }\n                        checked={ checked }\n                        data-test-id={ dataTestId }\n                        { ...restProps }\n                    />\n\n                    { checked && <CheckmarkS /> }\n\n                    { indeterminate && !checked && (\n                        <div className={ styles.indeterminateIcon }>\n                            <MinusM />\n                        </div>\n                    ) }\n                </span>\n\n                { (label || hint) && (\n                    <span className={ styles.content }>\n                        { label && <span className={ styles.label }>{ label }</span> }\n                        { hint && <span className={ styles.hint }>{ hint }</span> }\n                    </span>\n                ) }\n\n                { addons && <span className={ styles.addons }>{ addons }</span> }\n            </label>\n        );\n    },\n);\n\n/**\n * Для отображения в сторибуке\n */\nCheckbox.defaultProps = {\n    indeterminate: false,\n};\n"],"names":["Checkbox","forwardRef","checked","label","hint","size","align","addons","block","onChange","className","name","disabled","dataTestId","indeterminate","restProps","ref","labelRef","useRef","focused","useFocus","handleChange","event","jsxs","cn","styles","mergeRefs","jsx","CheckmarkS","MinusM"],"mappings":";;;;;;;;AA2EO,MAAMA,IAAWC;AAAA,EACpB,CACI;AAAA,IACI,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,UAAMC,IAAWC,EAAyB,IAAI,GAExC,CAACC,CAAO,IAAIC,EAASH,GAAU,UAAU,GAEzCI,IAAe,CAACC,MAAyC;AAC3D,MAAIb,KACAA,EAASa,GAAO,EAAE,SAASA,EAAM,OAAO,SAAS,MAAAX,GAAM;AAAA,IAE/D;AAEA;AAAA;AAAA,MAEI,gBAAAY;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAYC,EAAGC,EAAO,WAAWA,EAAOpB,CAAI,GAAGoB,EAAOnB,CAAK,GAAGI,GAAW;AAAA,YACrE,CAACe,EAAO,QAAQ,GAAGb;AAAA,YACnB,CAACa,EAAO,OAAO,GAAGvB;AAAA,YAClB,CAACuB,EAAO,aAAa,GAAGX;AAAA,YACxB,CAACW,EAAO,OAAO,GAAGN;AAAA,YAClB,CAACM,EAAO,KAAK,GAAGjB;AAAA,UAAA,CACnB;AAAA,UACD,KAAMkB,EAAU,CAACT,GAAUD,CAAG,CAAC;AAAA,UAE/B,UAAA;AAAA,YAAA,gBAAAO,EAAC,QAAA,EAAK,WAAYE,EAAO,KACrB,UAAA;AAAA,cAAA,gBAAAE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,MAAK;AAAA,kBACL,UAAWN;AAAA,kBACX,UAAAT;AAAA,kBACA,SAAAV;AAAA,kBACA,gBAAeW;AAAA,kBACb,GAAGE;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGPb,uBAAY0B,GAAA,EAAW;AAAA,cAEvBd,KAAiB,CAACZ,KAChB,gBAAAyB,EAAC,OAAA,EAAI,WAAYF,EAAO,mBACpB,UAAA,gBAAAE,EAACE,GAAA,CAAA,CAAO,EAAA,CACZ;AAAA,YAAA,GAER;AAAA,aAEG1B,KAASC,MACR,gBAAAmB,EAAC,QAAA,EAAK,WAAYE,EAAO,SACnB,UAAA;AAAA,cAAAtB,KAAS,gBAAAwB,EAAC,QAAA,EAAK,WAAYF,EAAO,OAAU,UAAAtB,GAAO;AAAA,cACnDC,KAAQ,gBAAAuB,EAAC,QAAA,EAAK,WAAYF,EAAO,MAAS,UAAArB,EAAA,CAAM;AAAA,YAAA,GACtD;AAAA,YAGFG,KAAU,gBAAAoB,EAAC,QAAA,EAAK,WAAYF,EAAO,QAAW,UAAAlB,EAAA,CAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA;AAAA,EAGpE;AACJ;AAKAP,EAAS,eAAe;AAAA,EACpB,eAAe;AACnB;"}
+{"version":3,"file":"component.js","sources":["../../src/checkbox/component.tsx"],"sourcesContent":["import React, {\n    ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode, useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport CheckmarkS from '@alphakits/icons/dist/CheckmarkS';\nimport MinusM from '@alphakits/icons/dist/MinusM';\nimport cn from 'classnames';\n\nimport { useFocus } from '../hooks/useFocus';\n\nimport styles from './index.module.css';\n\ntype NativeProps = InputHTMLAttributes<HTMLInputElement>;\ntype Align = 'start' | 'center';\n\nexport type CheckboxProps = Omit<NativeProps, 'size' | 'onChange'> & {\n    /**\n     * Управление состоянием вкл/выкл чекбокса (native prop)\n     */\n    checked?: boolean;\n\n    /**\n     * Обработчик переключения чекбокса\n     */\n    onChange: (\n        /* eslint-disable-next-line @typescript-eslint/no-unused-vars */\n        event: ChangeEvent<HTMLInputElement>,\n        /* eslint-disable-next-line @typescript-eslint/no-unused-vars */\n        payload: {\n            checked: boolean;\n            name?: string;\n        },\n    ) => void;\n\n    /**\n     * Текст подписи к чекбоксу\n     */\n    label?: ReactNode;\n\n    /**\n     * Текст подсказки снизу\n     */\n    hint?: ReactNode;\n\n    /**\n     * Размер компонента\n     */\n    size?: 's' | 'm';\n\n    /**\n     * Выравнивание\n     */\n    align?: Align;\n\n    /**\n     * Дополнительный слот\n     */\n    addons?: React.ReactNode;\n\n    /**\n     * Растягивать ли компонент на всю ширину\n     */\n    block?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Управление неопределенным состоянием чекбокса\n     */\n    indeterminate?: boolean;\n};\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n    (\n        {\n            checked,\n            label,\n            hint,\n            size = 'm',\n            align = 'start',\n            addons,\n            block,\n            onChange,\n            className,\n            name,\n            disabled,\n            dataTestId,\n            indeterminate = false,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const labelRef = useRef<HTMLLabelElement>(null);\n\n        const [focused] = useFocus(labelRef, 'keyboard');\n\n        const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n            if (onChange) {\n                onChange(event, { checked: event.target.checked, name });\n            }\n        };\n\n        return (\n            // eslint-disable-next-line jsx-a11y/label-has-associated-control\n            <label\n                className={ cn(styles.component, styles[size], styles[align], className, {\n                    [styles.disabled]: disabled,\n                    [styles.checked]: checked,\n                    [styles.indeterminate]: indeterminate,\n                    [styles.focused]: focused,\n                    [styles.block]: block,\n                }) }\n                ref={ mergeRefs([labelRef, ref]) }\n            >\n                <span className={ styles.box }>\n                    <input\n                        type=\"checkbox\"\n                        onChange={ handleChange }\n                        disabled={ disabled }\n                        checked={ checked }\n                        data-test-id={ dataTestId }\n                        { ...restProps }\n                    />\n\n                    { checked && <CheckmarkS /> }\n\n                    { indeterminate && !checked && (\n                        <div className={ styles.indeterminateIcon }>\n                            <MinusM />\n                        </div>\n                    ) }\n                </span>\n\n                { (label || hint) && (\n                    <span className={ styles.content }>\n                        { label && <span className={ styles.label }>{ label }</span> }\n                        { hint && <span className={ styles.hint }>{ hint }</span> }\n                    </span>\n                ) }\n\n                { addons && <span className={ styles.addons }>{ addons }</span> }\n            </label>\n        );\n    },\n);\n\n/**\n * Для отображения в сторибуке\n */\nCheckbox.defaultProps = {\n    indeterminate: false,\n};\n"],"names":["Checkbox","forwardRef","checked","label","hint","size","align","addons","block","onChange","className","name","disabled","dataTestId","indeterminate","restProps","ref","labelRef","useRef","focused","useFocus","handleChange","event","jsxs","cn","styles","mergeRefs","jsx","CheckmarkS","MinusM"],"mappings":";;;;;;;;AA2EO,MAAMA,IAAWC;AAAA,EACpB,CACI;AAAA,IACI,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,UAAMC,IAAWC,EAAyB,IAAI,GAExC,CAACC,CAAO,IAAIC,EAASH,GAAU,UAAU,GAEzCI,IAAe,CAACC,MAAyC;AAC3D,MAAIb,KACAA,EAASa,GAAO,EAAE,SAASA,EAAM,OAAO,SAAS,MAAAX,GAAM;AAAA,IAE/D;AAEA;AAAA;AAAA,MAEI,gBAAAY;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAYC,EAAGC,EAAO,WAAWA,EAAOpB,CAAI,GAAGoB,EAAOnB,CAAK,GAAGI,GAAW;AAAA,YACrE,CAACe,EAAO,QAAQ,GAAGb;AAAA,YACnB,CAACa,EAAO,OAAO,GAAGvB;AAAA,YAClB,CAACuB,EAAO,aAAa,GAAGX;AAAA,YACxB,CAACW,EAAO,OAAO,GAAGN;AAAA,YAClB,CAACM,EAAO,KAAK,GAAGjB;AAAA,UAAA,CACnB;AAAA,UACD,KAAMkB,EAAU,CAACT,GAAUD,CAAG,CAAC;AAAA,UAE/B,UAAA;AAAA,YAAA,gBAAAO,EAAC,QAAA,EAAK,WAAYE,EAAO,KACrB,UAAA;AAAA,cAAA,gBAAAE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,MAAK;AAAA,kBACL,UAAWN;AAAA,kBACX,UAAAT;AAAA,kBACA,SAAAV;AAAA,kBACA,gBAAeW;AAAA,kBACb,GAAGE;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGPb,uBAAY0B,GAAA,EAAW;AAAA,cAEvBd,KAAiB,CAACZ,KAChB,gBAAAyB,EAAC,OAAA,EAAI,WAAYF,EAAO,mBACpB,UAAA,gBAAAE,EAACE,GAAA,CAAA,CAAO,EAAA,CACZ;AAAA,YAAA,GAER;AAAA,aAEG1B,KAASC,MACR,gBAAAmB,EAAC,QAAA,EAAK,WAAYE,EAAO,SACnB,UAAA;AAAA,cAAAtB,KAAS,gBAAAwB,EAAC,QAAA,EAAK,WAAYF,EAAO,OAAU,UAAAtB,GAAO;AAAA,cACnDC,KAAQ,gBAAAuB,EAAC,QAAA,EAAK,WAAYF,EAAO,MAAS,UAAArB,EAAA,CAAM;AAAA,YAAA,GACtD;AAAA,YAGFG,KAAU,gBAAAoB,EAAC,QAAA,EAAK,WAAYF,EAAO,QAAW,UAAAlB,EAAA,CAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA;AAAA,EAGpE;AACJ;AAKAP,EAAS,eAAe;AAAA,EACpB,eAAe;AACnB;"}

package/dist/modal/components/modals/index.module.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:36px;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:36px;right:32px;z-index:999}.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}}

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

@@ -1,21 +1,19 @@
 import './index.module.css';
-const t = "container_WE0K", n = "content_p1kc", o = "button_js2W", e = "doubleModal_1ZTt", c = "inner_Zsdb", s = "right_e065", b = "bg_8ZfP", r = {
-  container: t,
-  content: n,
+const n = "container_WE0K", t = "content_p1kc", o = "button_js2W", c = "inner_Zsdb", e = "right_e065", s = "bg_8ZfP", r = {
+  container: n,
+  content: t,
   button: o,
-  doubleModal: e,
   inner: c,
-  right: s,
-  bg: b
+  right: e,
+  bg: s
 };
 export {
-  b as bg,
+  s as bg,
   o as button,
-  t as container,
-  n as content,
+  n as container,
+  t as content,
   r as default,
-  e as doubleModal,
   c as inner,
-  s as right
+  e as right
 };
 //# sourceMappingURL=index.module.css.js.map

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

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

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

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as u } from "react/jsx-runtime";
-import w, { useState as C, useLayoutEffect as z, useCallback as b, useEffect as v } from "react";
-import d from "classnames";
+import y, { useState as C, useLayoutEffect as d, useCallback as h, useEffect as z } from "react";
+import v from "classnames";
 import { ButtonArrow as x } from "../../../button-arrow/component.js";
 import o from "./index.module.css.js";
 const k = {
@@ -9,36 +9,36 @@ const k = {
   full: "96%"
 }, F = ({
   modal: e,
-  t: h,
+  t: b,
   index: l,
   dirtyModals: p,
   closeModal: a,
   currentModalId: r
 }) => {
-  const c = -k[e.props.size] - 102, [y, m] = C(c);
-  z(() => {
-    setTimeout(() => m(0), 0);
+  const c = -k[e.props.size] - 102, [w, f] = C(c);
+  d(() => {
+    setTimeout(() => f(0), 0);
   }, []);
-  const f = b(
+  const m = h(
     (s) => (
       // eslint-disable-next-line no-restricted-globals
-      !p[s] || confirm(h("common:exitConfirm"))
+      !p[s] || confirm(b("common:exitConfirm"))
     ),
     [p]
-  ), t = b((s) => {
+  ), t = h((s) => {
     const { id: i } = e;
-    f(s || i) && (m(c), setTimeout(() => {
+    m(s || i) && (f(c), setTimeout(() => {
       e.props.closeCallback && e.props.closeCallback(), a(s || i);
     }, 250));
-  }, [a, f, e, c]);
-  return v(() => {
+  }, [a, m, e, c]);
+  return z(() => {
     const s = (i) => {
       (i.key === "27" || i.key === "Escape") && t(r);
     };
     return e.id === r && (window == null || window.addEventListener("keydown", s)), () => {
       window == null || window.removeEventListener("keydown", s);
     };
-  }, [t, r, e.id]), /* @__PURE__ */ n(w.Fragment, { children: /* @__PURE__ */ u(
+  }, [t, r, e.id]), /* @__PURE__ */ n(y.Fragment, { children: /* @__PURE__ */ u(
     "div",
     {
       className: o.container,
@@ -49,18 +49,18 @@ const k = {
         /* @__PURE__ */ n(
           "div",
           {
-            className: d(o.right, o.content),
+            className: v(o.right, o.content),
             style: {
               zIndex: 9999999 + l,
               width: k[e.props.size],
-              right: y
+              right: w
             },
             children: /* @__PURE__ */ u("div", { className: o.inner, children: [
               /* @__PURE__ */ n(e.modal, { ...e.props, close: () => t() }),
-              /* @__PURE__ */ n(
+              e.props.showCloser !== !1 && /* @__PURE__ */ n(
                 x,
                 {
-                  className: d(o.button, { [o.doubleModal]: e.props.isDouble }),
+                  className: o.button,
                   size: "s",
                   type: "close",
                   onClick: () => t()

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

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/modal/components/modals/modal.tsx"],"sourcesContent":["import React, {\n    useCallback, useEffect, useLayoutEffect, useState,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { ButtonArrow } from '../../../button-arrow';\nimport { ModalObject, TFunction } from '../../types';\n\nimport { ModalsProps } from '.';\n\nimport styles from './index.module.css';\n\nconst sizes = {\n    s: 488,\n    m: 888,\n    full: '96%',\n};\n\ntype ModalProps = {\n    modal: ModalObject;\n    index: number;\n    t: TFunction;\n} & Pick<ModalsProps, 'dirtyModals' | 'closeModal' | 'currentModalId'>;\n\nexport const Modal = ({\n    modal, t, index, dirtyModals, closeModal, currentModalId,\n}: ModalProps) => {\n    const modalFullWidth = -sizes[modal.props.size] - 102;\n    const [modalPosition, setModalPosition] = useState(modalFullWidth);\n\n    useLayoutEffect(() => {\n        setTimeout(() => setModalPosition(0), 0);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const confirmClose = useCallback((id: string) =>\n        // eslint-disable-next-line no-restricted-globals\n        !dirtyModals[id] || confirm(t('common:exitConfirm'))\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    , [dirtyModals]);\n\n    const handleClose = useCallback((latestId?: string) => {\n        const { id } = modal;\n\n        if (!confirmClose(latestId || id)) return;\n\n        setModalPosition(modalFullWidth);\n\n        setTimeout(() => {\n            if (modal.props.closeCallback) {\n                modal.props.closeCallback();\n            }\n            closeModal(latestId || id);\n        }, 250);\n    }, [closeModal, confirmClose, modal, modalFullWidth]);\n\n    useEffect(() => {\n        const escapeListener = (event: KeyboardEvent) => {\n            if (event.key === '27' || event.key === 'Escape') {\n                handleClose(currentModalId);\n            }\n        };\n\n        if (modal.id === currentModalId) {\n            window?.addEventListener('keydown', escapeListener);\n        }\n\n        return () => {\n            window?.removeEventListener('keydown', escapeListener);\n        };\n    }, [handleClose, currentModalId, modal.id]);\n\n    return (\n        <React.Fragment>\n            <div\n                className={ styles.container }\n                style={ {\n                    zIndex: 9999998 + index,\n                } }\n            >\n                <div\n                    className={ classNames(styles.right, styles.content) }\n                    style={ {\n                        zIndex: 9999999 + index,\n                        width: sizes[modal.props.size],\n                        right: modalPosition,\n                    } }\n                >\n                    <div className={ styles.inner }>\n                        <modal.modal { ...modal.props } close={ () => handleClose() } />\n\n                        <ButtonArrow\n                            className={ classNames(styles.button, { [styles.doubleModal]: modal.props.isDouble }) }\n                            size=\"s\"\n                            type=\"close\"\n                            onClick={ () => handleClose() }\n                        />\n                    </div>\n                </div>\n\n                <button\n                    className={ styles.bg }\n                    aria-label=\"close_backdrop\"\n                    type=\"button\"\n                    onClick={ () => handleClose() }\n                />\n            </div>\n\n        </React.Fragment>\n    );\n};\n"],"names":["sizes","Modal","modal","t","index","dirtyModals","closeModal","currentModalId","modalFullWidth","modalPosition","setModalPosition","useState","useLayoutEffect","confirmClose","useCallback","id","handleClose","latestId","useEffect","escapeListener","event","jsx","React","jsxs","styles","classNames","ButtonArrow"],"mappings":";;;;;AAYA,MAAMA,IAAQ;AAAA,EACV,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM;AACV,GAQaC,IAAQ,CAAC;AAAA,EAClB,OAAAC;AAAA,EAAO,GAAAC;AAAA,EAAG,OAAAC;AAAA,EAAO,aAAAC;AAAA,EAAa,YAAAC;AAAA,EAAY,gBAAAC;AAC9C,MAAkB;AACd,QAAMC,IAAiB,CAACR,EAAME,EAAM,MAAM,IAAI,IAAI,KAC5C,CAACO,GAAeC,CAAgB,IAAIC,EAASH,CAAc;AAEjE,EAAAI,EAAgB,MAAM;AAClB,eAAW,MAAMF,EAAiB,CAAC,GAAG,CAAC;AAAA,EAE3C,GAAG,CAAA,CAAE;AAEL,QAAMG,IAAeC;AAAA,IAAY,CAACC;AAAA;AAAA,MAE9B,CAACV,EAAYU,CAAE,KAAK,QAAQZ,EAAE,oBAAoB,CAAC;AAAA;AAAA,IAErD,CAACE,CAAW;AAAA,EAAA,GAERW,IAAcF,EAAY,CAACG,MAAsB;AACnD,UAAM,EAAE,IAAAF,MAAOb;AAEf,IAAKW,EAAaI,KAAYF,CAAE,MAEhCL,EAAiBF,CAAc,GAE/B,WAAW,MAAM;AACb,MAAIN,EAAM,MAAM,iBACZA,EAAM,MAAM,cAAA,GAEhBI,EAAWW,KAAYF,CAAE;AAAA,IAC7B,GAAG,GAAG;AAAA,EACV,GAAG,CAACT,GAAYO,GAAcX,GAAOM,CAAc,CAAC;AAEpD,SAAAU,EAAU,MAAM;AACZ,UAAMC,IAAiB,CAACC,MAAyB;AAC7C,OAAIA,EAAM,QAAQ,QAAQA,EAAM,QAAQ,aACpCJ,EAAYT,CAAc;AAAA,IAElC;AAEA,WAAIL,EAAM,OAAOK,MACb,yBAAQ,iBAAiB,WAAWY,KAGjC,MAAM;AACT,+BAAQ,oBAAoB,WAAWA;AAAA,IAC3C;AAAA,EACJ,GAAG,CAACH,GAAaT,GAAgBL,EAAM,EAAE,CAAC,GAGtC,gBAAAmB,EAACC,EAAM,UAAN,EACG,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAYC,EAAO;AAAA,MACnB,OAAQ;AAAA,QACJ,QAAQ,UAAUpB;AAAA,MAAA;AAAA,MAGtB,UAAA;AAAA,QAAA,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAYI,EAAWD,EAAO,OAAOA,EAAO,OAAO;AAAA,YACnD,OAAQ;AAAA,cACJ,QAAQ,UAAUpB;AAAA,cAClB,OAAOJ,EAAME,EAAM,MAAM,IAAI;AAAA,cAC7B,OAAOO;AAAA,YAAA;AAAA,YAGX,UAAA,gBAAAc,EAAC,OAAA,EAAI,WAAYC,EAAO,OACpB,UAAA;AAAA,cAAA,gBAAAH,EAACnB,EAAM,OAAN,EAAc,GAAGA,EAAM,OAAQ,OAAQ,MAAMc,EAAA,GAAgB;AAAA,cAE9D,gBAAAK;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACG,WAAYD,EAAWD,EAAO,QAAQ,EAAE,CAACA,EAAO,WAAW,GAAGtB,EAAM,MAAM,UAAU;AAAA,kBACpF,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,SAAU,MAAMc,EAAA;AAAA,gBAAY;AAAA,cAAA;AAAA,YAChC,EAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJ,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAYG,EAAO;AAAA,YACnB,cAAW;AAAA,YACX,MAAK;AAAA,YACL,SAAU,MAAMR,EAAA;AAAA,UAAY;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,EAAA,GAGR;AAER;"}
+{"version":3,"file":"modal.js","sources":["../../../../src/modal/components/modals/modal.tsx"],"sourcesContent":["import React, {\n    useCallback, useEffect, useLayoutEffect, useState,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { ButtonArrow } from '../../../button-arrow';\nimport { ModalObject, TFunction } from '../../types';\n\nimport { ModalsProps } from '.';\n\nimport styles from './index.module.css';\n\nconst sizes = {\n    s: 488,\n    m: 888,\n    full: '96%',\n};\n\ntype ModalProps = {\n    modal: ModalObject;\n    index: number;\n    t: TFunction;\n} & Pick<ModalsProps, 'dirtyModals' | 'closeModal' | 'currentModalId'>;\n\nexport const Modal = ({\n    modal, t, index, dirtyModals, closeModal, currentModalId,\n}: ModalProps) => {\n    const modalFullWidth = -sizes[modal.props.size] - 102;\n    const [modalPosition, setModalPosition] = useState(modalFullWidth);\n\n    useLayoutEffect(() => {\n        setTimeout(() => setModalPosition(0), 0);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const confirmClose = useCallback((id: string) =>\n        // eslint-disable-next-line no-restricted-globals\n        !dirtyModals[id] || confirm(t('common:exitConfirm'))\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    , [dirtyModals]);\n\n    const handleClose = useCallback((latestId?: string) => {\n        const { id } = modal;\n\n        if (!confirmClose(latestId || id)) return;\n\n        setModalPosition(modalFullWidth);\n\n        setTimeout(() => {\n            if (modal.props.closeCallback) {\n                modal.props.closeCallback();\n            }\n            closeModal(latestId || id);\n        }, 250);\n    }, [closeModal, confirmClose, modal, modalFullWidth]);\n\n    useEffect(() => {\n        const escapeListener = (event: KeyboardEvent) => {\n            if (event.key === '27' || event.key === 'Escape') {\n                handleClose(currentModalId);\n            }\n        };\n\n        if (modal.id === currentModalId) {\n            window?.addEventListener('keydown', escapeListener);\n        }\n\n        return () => {\n            window?.removeEventListener('keydown', escapeListener);\n        };\n    }, [handleClose, currentModalId, modal.id]);\n\n    return (\n        <React.Fragment>\n            <div\n                className={ styles.container }\n                style={ {\n                    zIndex: 9999998 + index,\n                } }\n            >\n                <div\n                    className={ classNames(styles.right, styles.content) }\n                    style={ {\n                        zIndex: 9999999 + index,\n                        width: sizes[modal.props.size],\n                        right: modalPosition,\n                    } }\n                >\n                    <div className={ styles.inner }>\n                        <modal.modal { ...modal.props } close={ () => handleClose() } />\n\n                        { modal.props.showCloser !== false && (\n                            <ButtonArrow\n                                className={ styles.button }\n                                size=\"s\"\n                                type=\"close\"\n                                onClick={ () => handleClose() }\n                            />\n                        ) }\n                    </div>\n                </div>\n\n                <button\n                    className={ styles.bg }\n                    aria-label=\"close_backdrop\"\n                    type=\"button\"\n                    onClick={ () => handleClose() }\n                />\n            </div>\n\n        </React.Fragment>\n    );\n};\n"],"names":["sizes","Modal","modal","t","index","dirtyModals","closeModal","currentModalId","modalFullWidth","modalPosition","setModalPosition","useState","useLayoutEffect","confirmClose","useCallback","id","handleClose","latestId","useEffect","escapeListener","event","jsx","React","jsxs","styles","classNames","ButtonArrow"],"mappings":";;;;;AAYA,MAAMA,IAAQ;AAAA,EACV,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM;AACV,GAQaC,IAAQ,CAAC;AAAA,EAClB,OAAAC;AAAA,EAAO,GAAAC;AAAA,EAAG,OAAAC;AAAA,EAAO,aAAAC;AAAA,EAAa,YAAAC;AAAA,EAAY,gBAAAC;AAC9C,MAAkB;AACd,QAAMC,IAAiB,CAACR,EAAME,EAAM,MAAM,IAAI,IAAI,KAC5C,CAACO,GAAeC,CAAgB,IAAIC,EAASH,CAAc;AAEjE,EAAAI,EAAgB,MAAM;AAClB,eAAW,MAAMF,EAAiB,CAAC,GAAG,CAAC;AAAA,EAE3C,GAAG,CAAA,CAAE;AAEL,QAAMG,IAAeC;AAAA,IAAY,CAACC;AAAA;AAAA,MAE9B,CAACV,EAAYU,CAAE,KAAK,QAAQZ,EAAE,oBAAoB,CAAC;AAAA;AAAA,IAErD,CAACE,CAAW;AAAA,EAAA,GAERW,IAAcF,EAAY,CAACG,MAAsB;AACnD,UAAM,EAAE,IAAAF,MAAOb;AAEf,IAAKW,EAAaI,KAAYF,CAAE,MAEhCL,EAAiBF,CAAc,GAE/B,WAAW,MAAM;AACb,MAAIN,EAAM,MAAM,iBACZA,EAAM,MAAM,cAAA,GAEhBI,EAAWW,KAAYF,CAAE;AAAA,IAC7B,GAAG,GAAG;AAAA,EACV,GAAG,CAACT,GAAYO,GAAcX,GAAOM,CAAc,CAAC;AAEpD,SAAAU,EAAU,MAAM;AACZ,UAAMC,IAAiB,CAACC,MAAyB;AAC7C,OAAIA,EAAM,QAAQ,QAAQA,EAAM,QAAQ,aACpCJ,EAAYT,CAAc;AAAA,IAElC;AAEA,WAAIL,EAAM,OAAOK,MACb,yBAAQ,iBAAiB,WAAWY,KAGjC,MAAM;AACT,+BAAQ,oBAAoB,WAAWA;AAAA,IAC3C;AAAA,EACJ,GAAG,CAACH,GAAaT,GAAgBL,EAAM,EAAE,CAAC,GAGtC,gBAAAmB,EAACC,EAAM,UAAN,EACG,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAYC,EAAO;AAAA,MACnB,OAAQ;AAAA,QACJ,QAAQ,UAAUpB;AAAA,MAAA;AAAA,MAGtB,UAAA;AAAA,QAAA,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAYI,EAAWD,EAAO,OAAOA,EAAO,OAAO;AAAA,YACnD,OAAQ;AAAA,cACJ,QAAQ,UAAUpB;AAAA,cAClB,OAAOJ,EAAME,EAAM,MAAM,IAAI;AAAA,cAC7B,OAAOO;AAAA,YAAA;AAAA,YAGX,UAAA,gBAAAc,EAAC,OAAA,EAAI,WAAYC,EAAO,OACpB,UAAA;AAAA,cAAA,gBAAAH,EAACnB,EAAM,OAAN,EAAc,GAAGA,EAAM,OAAQ,OAAQ,MAAMc,EAAA,GAAgB;AAAA,cAE5Dd,EAAM,MAAM,eAAe,MACzB,gBAAAmB;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACG,WAAYF,EAAO;AAAA,kBACnB,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,SAAU,MAAMR,EAAA;AAAA,gBAAY;AAAA,cAAA;AAAA,YAChC,EAAA,CAER;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJ,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAYG,EAAO;AAAA,YACnB,cAAW;AAAA,YACX,MAAK;AAAA,YACL,SAAU,MAAMR,EAAA;AAAA,UAAY;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,EAAA,GAGR;AAER;"}

package/dist/modal/hooks/use-modal.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { ModalObject, ModalSize, OwnModalProps, TFunction } from '../types';
 export declare const useModal: (t: TFunction) => {
-    openModal: <T extends unknown>(modal: React.FC<T>, size?: ModalSize, isDouble?: boolean) => (props?: OwnModalProps<T>, closeCallback?: () => void) => void;
+    openModal: <T extends unknown>(modal: React.FC<T>, size?: ModalSize, showCloser?: boolean) => (props?: OwnModalProps<T>, closeCallback?: () => void) => void;
     modals: ModalObject[];
     setModalDirty: (id: string, isDirty: boolean) => void;
     currentModalId: string;

package/dist/modal/hooks/use-modal.js

@@ -2,7 +2,7 @@ import n, { useEffect as I } from "react";
 import { v4 as S } from "uuid";
 import { deletePropertyById as g } from "../utils/delete-property-by-id.js";
 const x = (c) => {
-  const [s, l] = n.useState([]), [M, u] = n.useState(""), [i, a] = n.useState({}), p = (o) => {
+  const [s, l] = n.useState([]), [u, M] = n.useState(""), [i, a] = n.useState({}), p = (o) => {
     a((t) => g(t, o)), l((t) => t.filter((e) => e.id !== o));
   }, m = (o) => {
     l((t) => [...t, o]);
@@ -15,15 +15,15 @@ const x = (c) => {
   return I(() => {
     var t;
     const o = (t = [...s].pop()) == null ? void 0 : t.id;
-    u(o || ""), document.body.style.overflow = s.length ? "hidden" : "unset";
+    M(o || ""), document.body.style.overflow = s.length ? "hidden" : "unset";
   }, [s]), {
-    openModal: (o, t = "s", e) => {
+    openModal: (o, t = "s", e = !0) => {
       const y = (d, r) => ({
         id: S(),
         modal: o,
         props: {
           size: t,
-          isDouble: e,
+          showCloser: e,
           closeCallback: r,
           t: c,
           ...d
@@ -35,7 +35,7 @@ const x = (c) => {
     },
     modals: s,
     setModalDirty: f,
-    currentModalId: M,
+    currentModalId: u,
     dirtyModals: i,
     closeModal: p
   };

package/dist/modal/hooks/use-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-modal.js","sources":["../../../src/modal/hooks/use-modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { v4 as uuid } from 'uuid';\n\nimport {\n    ModalObject, ModalSize, OwnModalProps, TFunction,\n} from '../types';\nimport { deletePropertyById } from '../utils/delete-property-by-id';\n\nexport const useModal = (t: TFunction) => {\n    const [modals, setModals] = React.useState<ModalObject[]>([]);\n    const [currentModalId, setCurrentModalId] = React.useState<string>('');\n    const [dirtyModals, setDirtyModals] = React.useState<Record<string, boolean>>({\n    });\n\n    const closeModal = (id: string) => {\n        setDirtyModals((oldDirtyModals) => deletePropertyById(oldDirtyModals, id));\n        setModals((oldModals) => oldModals.filter((modal) => modal.id !== id));\n    };\n\n    const addModal = (modal: ModalObject) => {\n        setModals((oldModals) => [...oldModals, modal]);\n    };\n\n    const setModalDirty = (id: string, isDirty: boolean) => {\n        setDirtyModals((rest) => ({\n            ...rest,\n            [id]: isDirty,\n        }));\n    };\n\n    useEffect(() => {\n        const latestModalId = [...modals].pop()?.id;\n\n        setCurrentModalId(latestModalId || '');\n        document.body.style.overflow = modals.length ? 'hidden' : 'unset';\n    }, [modals]);\n\n    const openModal = <T extends unknown>(modal: React.FC<T>, size: ModalSize = 's', isDouble?: boolean) => {\n        const getModal = (params?: OwnModalProps<T>, closeCallback?: () => void) => {\n            const id = uuid();\n\n            return {\n                id,\n                modal,\n                props: {\n                    size,\n                    isDouble,\n                    closeCallback,\n                    t,\n                    ...params,\n                },\n            } as unknown as ModalObject;\n        };\n\n        return (props?: OwnModalProps<T>, closeCallback?: () => void) => {\n            addModal(getModal(props, closeCallback));\n        };\n    };\n\n    return {\n        openModal, modals, setModalDirty, currentModalId, dirtyModals, closeModal,\n    };\n};\n"],"names":["useModal","t","modals","setModals","React","currentModalId","setCurrentModalId","dirtyModals","setDirtyModals","closeModal","id","oldDirtyModals","deletePropertyById","oldModals","modal","addModal","setModalDirty","isDirty","rest","useEffect","latestModalId","_a","size","isDouble","getModal","params","closeCallback","uuid","props"],"mappings":";;;AAQO,MAAMA,IAAW,CAACC,MAAiB;AACtC,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAwB,CAAA,CAAE,GACtD,CAACC,GAAgBC,CAAiB,IAAIF,EAAM,SAAiB,EAAE,GAC/D,CAACG,GAAaC,CAAc,IAAIJ,EAAM,SAAkC,CAAA,CAC7E,GAEKK,IAAa,CAACC,MAAe;AAC/B,IAAAF,EAAe,CAACG,MAAmBC,EAAmBD,GAAgBD,CAAE,CAAC,GACzEP,EAAU,CAACU,MAAcA,EAAU,OAAO,CAACC,MAAUA,EAAM,OAAOJ,CAAE,CAAC;AAAA,EACzE,GAEMK,IAAW,CAACD,MAAuB;AACrC,IAAAX,EAAU,CAACU,MAAc,CAAC,GAAGA,GAAWC,CAAK,CAAC;AAAA,EAClD,GAEME,IAAgB,CAACN,GAAYO,MAAqB;AACpD,IAAAT,EAAe,CAACU,OAAU;AAAA,MACtB,GAAGA;AAAA,MACH,CAACR,CAAE,GAAGO;AAAA,IAAA,EACR;AAAA,EACN;AAEA,SAAAE,EAAU,MAAM;;AACZ,UAAMC,KAAgBC,IAAA,CAAC,GAAGnB,CAAM,EAAE,UAAZ,gBAAAmB,EAAmB;AAEzC,IAAAf,EAAkBc,KAAiB,EAAE,GACrC,SAAS,KAAK,MAAM,WAAWlB,EAAO,SAAS,WAAW;AAAA,EAC9D,GAAG,CAACA,CAAM,CAAC,GAwBJ;AAAA,IACH,WAvBc,CAAoBY,GAAoBQ,IAAkB,KAAKC,MAAuB;AACpG,YAAMC,IAAW,CAACC,GAA2BC,OAGlC;AAAA,QACH,IAHOC,EAAA;AAAA,QAIP,OAAAb;AAAA,QACA,OAAO;AAAA,UACH,MAAAQ;AAAA,UACA,UAAAC;AAAA,UACA,eAAAG;AAAA,UACA,GAAAzB;AAAA,UACA,GAAGwB;AAAA,QAAA;AAAA,MACP;AAIR,aAAO,CAACG,GAA0BF,MAA+B;AAC7D,QAAAX,EAASS,EAASI,GAAOF,CAAa,CAAC;AAAA,MAC3C;AAAA,IACJ;AAAA,IAGe,QAAAxB;AAAA,IAAQ,eAAAc;AAAA,IAAe,gBAAAX;AAAA,IAAgB,aAAAE;AAAA,IAAa,YAAAE;AAAA,EAAA;AAEvE;"}
+{"version":3,"file":"use-modal.js","sources":["../../../src/modal/hooks/use-modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { v4 as uuid } from 'uuid';\n\nimport {\n    ModalObject, ModalSize, OwnModalProps, TFunction,\n} from '../types';\nimport { deletePropertyById } from '../utils/delete-property-by-id';\n\nexport const useModal = (t: TFunction) => {\n    const [modals, setModals] = React.useState<ModalObject[]>([]);\n    const [currentModalId, setCurrentModalId] = React.useState<string>('');\n    const [dirtyModals, setDirtyModals] = React.useState<Record<string, boolean>>({\n    });\n\n    const closeModal = (id: string) => {\n        setDirtyModals((oldDirtyModals) => deletePropertyById(oldDirtyModals, id));\n        setModals((oldModals) => oldModals.filter((modal) => modal.id !== id));\n    };\n\n    const addModal = (modal: ModalObject) => {\n        setModals((oldModals) => [...oldModals, modal]);\n    };\n\n    const setModalDirty = (id: string, isDirty: boolean) => {\n        setDirtyModals((rest) => ({\n            ...rest,\n            [id]: isDirty,\n        }));\n    };\n\n    useEffect(() => {\n        const latestModalId = [...modals].pop()?.id;\n\n        setCurrentModalId(latestModalId || '');\n        document.body.style.overflow = modals.length ? 'hidden' : 'unset';\n    }, [modals]);\n\n    const openModal = <T extends unknown>(modal: React.FC<T>, size: ModalSize = 's', showCloser = true) => {\n        const getModal = (params?: OwnModalProps<T>, closeCallback?: () => void) => {\n            const id = uuid();\n\n            return {\n                id,\n                modal,\n                props: {\n                    size,\n                    showCloser,\n                    closeCallback,\n                    t,\n                    ...params,\n                },\n            } as unknown as ModalObject;\n        };\n\n        return (props?: OwnModalProps<T>, closeCallback?: () => void) => {\n            addModal(getModal(props, closeCallback));\n        };\n    };\n\n    return {\n        openModal, modals, setModalDirty, currentModalId, dirtyModals, closeModal,\n    };\n};\n"],"names":["useModal","t","modals","setModals","React","currentModalId","setCurrentModalId","dirtyModals","setDirtyModals","closeModal","id","oldDirtyModals","deletePropertyById","oldModals","modal","addModal","setModalDirty","isDirty","rest","useEffect","latestModalId","_a","size","showCloser","getModal","params","closeCallback","uuid","props"],"mappings":";;;AAQO,MAAMA,IAAW,CAACC,MAAiB;AACtC,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAwB,CAAA,CAAE,GACtD,CAACC,GAAgBC,CAAiB,IAAIF,EAAM,SAAiB,EAAE,GAC/D,CAACG,GAAaC,CAAc,IAAIJ,EAAM,SAAkC,CAAA,CAC7E,GAEKK,IAAa,CAACC,MAAe;AAC/B,IAAAF,EAAe,CAACG,MAAmBC,EAAmBD,GAAgBD,CAAE,CAAC,GACzEP,EAAU,CAACU,MAAcA,EAAU,OAAO,CAACC,MAAUA,EAAM,OAAOJ,CAAE,CAAC;AAAA,EACzE,GAEMK,IAAW,CAACD,MAAuB;AACrC,IAAAX,EAAU,CAACU,MAAc,CAAC,GAAGA,GAAWC,CAAK,CAAC;AAAA,EAClD,GAEME,IAAgB,CAACN,GAAYO,MAAqB;AACpD,IAAAT,EAAe,CAACU,OAAU;AAAA,MACtB,GAAGA;AAAA,MACH,CAACR,CAAE,GAAGO;AAAA,IAAA,EACR;AAAA,EACN;AAEA,SAAAE,EAAU,MAAM;;AACZ,UAAMC,KAAgBC,IAAA,CAAC,GAAGnB,CAAM,EAAE,UAAZ,gBAAAmB,EAAmB;AAEzC,IAAAf,EAAkBc,KAAiB,EAAE,GACrC,SAAS,KAAK,MAAM,WAAWlB,EAAO,SAAS,WAAW;AAAA,EAC9D,GAAG,CAACA,CAAM,CAAC,GAwBJ;AAAA,IACH,WAvBc,CAAoBY,GAAoBQ,IAAkB,KAAKC,IAAa,OAAS;AACnG,YAAMC,IAAW,CAACC,GAA2BC,OAGlC;AAAA,QACH,IAHOC,EAAA;AAAA,QAIP,OAAAb;AAAA,QACA,OAAO;AAAA,UACH,MAAAQ;AAAA,UACA,YAAAC;AAAA,UACA,eAAAG;AAAA,UACA,GAAAzB;AAAA,UACA,GAAGwB;AAAA,QAAA;AAAA,MACP;AAIR,aAAO,CAACG,GAA0BF,MAA+B;AAC7D,QAAAX,EAASS,EAASI,GAAOF,CAAa,CAAC;AAAA,MAC3C;AAAA,IACJ;AAAA,IAGe,QAAAxB;AAAA,IAAQ,eAAAc;AAAA,IAAe,gBAAAX;AAAA,IAAgB,aAAAE;AAAA,IAAa,YAAAE;AAAA,EAAA;AAEvE;"}

package/dist/modal/types.d.ts

@@ -3,7 +3,7 @@ type ModalProps = {
     closeCallback: () => void;
     close: () => void;
     size: ModalSize;
-    isDouble?: boolean;
+    showCloser?: boolean;
     t: TFunction;
 } & unknown;
 export type TFunction = (field: string, options?: {
@@ -19,7 +19,7 @@ export type ModalObject = {
     props: ModalProps;
 };
 export type ContextProps = {
-    openModal: <T>(modal: React.FC<T>, size?: ModalSize, isDouble?: boolean) => (props?: OwnModalProps<T>, closeCallback?: () => void) => void;
+    openModal: <T>(modal: React.FC<T>, size?: ModalSize, showCloser?: boolean) => (props?: OwnModalProps<T>, closeCallback?: () => void) => void;
     modals: ModalObject[];
     currentModalId: ModalObject['id'];
     setModalDirty: (id: ModalObject['id'], isDirty: boolean) => void;

package/dist/sidepanel/component.d.ts

@@ -16,6 +16,7 @@ export type SidepanelProps = {
     bottomAddons?: React.ReactNode;
     dataTestId?: string;
     noCloser?: boolean;
+    showCloser?: boolean;
     noStickyFooter?: boolean;
     noStickyHeader?: boolean;
 } & Back;

package/dist/sidepanel/component.js

@@ -1,41 +1,43 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import v from "react";
-import N from "classnames";
-import { FlexColumns as x } from "../flex-columns/component.js";
-import { SidepanelHeader as S } from "../sidepanel-header/component.js";
-import { Skeleton as g } from "../skeleton/component.js";
+import { jsx as e, jsxs as v } from "react/jsx-runtime";
+import N from "react";
+import x from "classnames";
+import { FlexColumns as S } from "../flex-columns/component.js";
+import { SidepanelHeader as g } from "../sidepanel-header/component.js";
+import { Skeleton as y } from "../skeleton/component.js";
 import r from "./index.module.css.js";
-const H = ({
+const R = ({
   dataTestId: i,
   title: m,
   loading: t,
   headerRightAddons: a,
   subtitle: l,
   noCloser: s,
-  headerBottomAddons: n,
-  noStickyFooter: c,
-  noStickyHeader: d,
+  showCloser: n,
+  headerBottomAddons: c,
+  noStickyFooter: d,
+  noStickyHeader: p,
   bottomAddons: o,
-  children: p,
-  ...f
-}) => /* @__PURE__ */ e(v.Fragment, { children: t ? /* @__PURE__ */ e(x, { className: r.loader, columns: 1, gr: 20, children: new Array(7).fill("").map((y, h) => /* @__PURE__ */ e(g, { animate: !0, visible: !0, className: r.input }, h)) }) : /* @__PURE__ */ u("div", { children: [
+  children: f,
+  ...h
+}) => /* @__PURE__ */ e(N.Fragment, { children: t ? /* @__PURE__ */ e(S, { className: r.loader, columns: 1, gr: 20, children: new Array(7).fill("").map((j, u) => /* @__PURE__ */ e(y, { animate: !0, visible: !0, className: r.input }, u)) }) : /* @__PURE__ */ v("div", { children: [
   /* @__PURE__ */ e(
-    S,
+    g,
     {
       title: m,
-      className: d ? void 0 : r.header,
+      className: p ? void 0 : r.header,
       subtitle: l,
       noCloser: s,
+      showCloser: n,
       dataTestId: i,
       rightAddons: a,
-      bottomAddons: n,
-      ...f
+      bottomAddons: c,
+      ...h
     }
   ),
-  /* @__PURE__ */ e("div", { className: r.content, children: p }),
-  o && /* @__PURE__ */ e("div", { className: N(r.footer, { [r.noSticky]: c }), children: o })
+  /* @__PURE__ */ e("div", { className: r.content, children: f }),
+  o && /* @__PURE__ */ e("div", { className: x(r.footer, { [r.noSticky]: d }), children: o })
 ] }) });
 export {
-  H as Sidepanel
+  R as Sidepanel
 };
 //# sourceMappingURL=component.js.map

package/dist/sidepanel/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/sidepanel/component.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\nimport React from 'react';\nimport classNames from 'classnames';\n\nimport { FlexColumns } from '../flex-columns';\nimport { TFunction } from '../modal';\nimport { SidepanelHeader } from '../sidepanel-header';\nimport { Skeleton } from '../skeleton';\n\nimport styles from './index.module.css';\n\ntype Back = {\n    back?: () => void;\n    t: TFunction;\n} | {\n    back?: never;\n    t?: never;\n};\n\nexport type SidepanelProps = {\n    title?: string;\n    loading?: boolean;\n    subtitle?: string;\n    headerRightAddons?: React.ReactNode;\n    headerBottomAddons?: React.ReactNode;\n    bottomAddons?: React.ReactNode;\n    dataTestId?: string;\n    noCloser?: boolean;\n    noStickyFooter?: boolean;\n    noStickyHeader?: boolean;\n} & Back;\n\nexport const Sidepanel: React.FC<SidepanelProps> = ({\n    dataTestId,\n    title,\n    loading,\n    headerRightAddons,\n    subtitle,\n    noCloser,\n    headerBottomAddons,\n    noStickyFooter,\n    noStickyHeader,\n    bottomAddons,\n    children,\n    ...props\n}) => (\n    <React.Fragment>\n        { loading ? (\n            <FlexColumns className={ styles.loader } columns={ 1 } gr={ 20 }>\n                { new Array(7).fill('').map((_, i) => (\n                    <Skeleton key={ i } animate={ true } visible={ true } className={ styles.input } />\n                )) }\n            </FlexColumns>\n        ) : (\n            <div>\n                <SidepanelHeader\n                    title={ title }\n                    className={ noStickyHeader ? undefined : styles.header }\n                    subtitle={ subtitle }\n                    noCloser={ noCloser }\n                    dataTestId={ dataTestId }\n                    rightAddons={ headerRightAddons }\n                    bottomAddons={ headerBottomAddons }\n                    { ...props }\n                />\n\n                <div className={ styles.content }>\n                    { children }\n                </div>\n\n                { bottomAddons && (\n                    <div className={ classNames(styles.footer, { [styles.noSticky]: noStickyFooter }) }>\n                        { bottomAddons }\n                    </div>\n                ) }\n            </div>\n        ) }\n    </React.Fragment>\n);\n"],"names":["Sidepanel","dataTestId","title","loading","headerRightAddons","subtitle","noCloser","headerBottomAddons","noStickyFooter","noStickyHeader","bottomAddons","children","props","React","FlexColumns","styles","_","i","jsx","Skeleton","SidepanelHeader","classNames"],"mappings":";;;;;;;AAgCO,MAAMA,IAAsC,CAAC;AAAA,EAChD,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACP,wBACKC,EAAM,UAAN,EACK,UAAAV,sBACGW,GAAA,EAAY,WAAYC,EAAO,QAAS,SAAU,GAAI,IAAK,IACtD,UAAA,IAAI,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,CAACC,GAAGC,MAC5B,gBAAAC,EAACC,GAAA,EAAmB,SAAU,IAAO,SAAU,IAAO,WAAYJ,EAAO,MAAA,GAAzDE,CAAiE,CACpF,EAAA,CACL,sBAEC,OAAA,EACG,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,OAAAlB;AAAA,MACA,WAAYO,IAAiB,SAAYM,EAAO;AAAA,MAChD,UAAAV;AAAA,MACA,UAAAC;AAAA,MACA,YAAAL;AAAA,MACA,aAAcG;AAAA,MACd,cAAeG;AAAA,MACb,GAAGK;AAAA,IAAA;AAAA,EAAA;AAAA,EAGT,gBAAAM,EAAC,OAAA,EAAI,WAAYH,EAAO,SAClB,UAAAJ,GACN;AAAA,EAEED,KACE,gBAAAQ,EAAC,OAAA,EAAI,WAAYG,EAAWN,EAAO,QAAQ,EAAE,CAACA,EAAO,QAAQ,GAAGP,EAAA,CAAgB,GAC1E,UAAAE,EAAA,CACN;AAAA,EAAA,CAER,EAAA,CAER;"}
+{"version":3,"file":"component.js","sources":["../../src/sidepanel/component.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\nimport React from 'react';\nimport classNames from 'classnames';\n\nimport { FlexColumns } from '../flex-columns';\nimport { TFunction } from '../modal';\nimport { SidepanelHeader } from '../sidepanel-header';\nimport { Skeleton } from '../skeleton';\n\nimport styles from './index.module.css';\n\ntype Back = {\n    back?: () => void;\n    t: TFunction;\n} | {\n    back?: never;\n    t?: never;\n};\n\nexport type SidepanelProps = {\n    title?: string;\n    loading?: boolean;\n    subtitle?: string;\n    headerRightAddons?: React.ReactNode;\n    headerBottomAddons?: React.ReactNode;\n    bottomAddons?: React.ReactNode;\n    dataTestId?: string;\n    noCloser?: boolean;\n    showCloser?: boolean;\n    noStickyFooter?: boolean;\n    noStickyHeader?: boolean;\n} & Back;\n\nexport const Sidepanel: React.FC<SidepanelProps> = ({\n    dataTestId,\n    title,\n    loading,\n    headerRightAddons,\n    subtitle,\n    noCloser,\n    showCloser,\n    headerBottomAddons,\n    noStickyFooter,\n    noStickyHeader,\n    bottomAddons,\n    children,\n    ...props\n}) => (\n    <React.Fragment>\n        { loading ? (\n            <FlexColumns className={ styles.loader } columns={ 1 } gr={ 20 }>\n                { new Array(7).fill('').map((_, i) => (\n                    <Skeleton key={ i } animate={ true } visible={ true } className={ styles.input } />\n                )) }\n            </FlexColumns>\n        ) : (\n            <div>\n                <SidepanelHeader\n                    title={ title }\n                    className={ noStickyHeader ? undefined : styles.header }\n                    subtitle={ subtitle }\n                    noCloser={ noCloser }\n                    showCloser={ showCloser }\n                    dataTestId={ dataTestId }\n                    rightAddons={ headerRightAddons }\n                    bottomAddons={ headerBottomAddons }\n                    { ...props }\n                />\n\n                <div className={ styles.content }>\n                    { children }\n                </div>\n\n                { bottomAddons && (\n                    <div className={ classNames(styles.footer, { [styles.noSticky]: noStickyFooter }) }>\n                        { bottomAddons }\n                    </div>\n                ) }\n            </div>\n        ) }\n    </React.Fragment>\n);\n"],"names":["Sidepanel","dataTestId","title","loading","headerRightAddons","subtitle","noCloser","showCloser","headerBottomAddons","noStickyFooter","noStickyHeader","bottomAddons","children","props","React","FlexColumns","styles","_","i","jsx","Skeleton","SidepanelHeader","classNames"],"mappings":";;;;;;;AAiCO,MAAMA,IAAsC,CAAC;AAAA,EAChD,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACP,wBACKC,EAAM,UAAN,EACK,UAAAX,sBACGY,GAAA,EAAY,WAAYC,EAAO,QAAS,SAAU,GAAI,IAAK,IACtD,UAAA,IAAI,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,CAACC,GAAGC,MAC5B,gBAAAC,EAACC,GAAA,EAAmB,SAAU,IAAO,SAAU,IAAO,WAAYJ,EAAO,MAAA,GAAzDE,CAAiE,CACpF,EAAA,CACL,sBAEC,OAAA,EACG,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,OAAAnB;AAAA,MACA,WAAYQ,IAAiB,SAAYM,EAAO;AAAA,MAChD,UAAAX;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAN;AAAA,MACA,aAAcG;AAAA,MACd,cAAeI;AAAA,MACb,GAAGK;AAAA,IAAA;AAAA,EAAA;AAAA,EAGT,gBAAAM,EAAC,OAAA,EAAI,WAAYH,EAAO,SAClB,UAAAJ,GACN;AAAA,EAEED,KACE,gBAAAQ,EAAC,OAAA,EAAI,WAAYG,EAAWN,EAAO,QAAQ,EAAE,CAACA,EAAO,QAAQ,GAAGP,EAAA,CAAgB,GAC1E,UAAAE,EAAA,CACN;AAAA,EAAA,CAER,EAAA,CAER;"}

package/dist/sidepanel-header/component.d.ts

@@ -28,6 +28,7 @@ export type SidepanelHeaderProps = {
      * Id компонента для тестов
      */
     noCloser?: boolean;
+    showCloser?: boolean;
     dataTestId?: string;
     subtitle?: string;
 } & Back;

package/dist/sidepanel-header/component.js

@@ -1,13 +1,13 @@
 import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import p from "classnames";
-import { BackButton as f } from "../back-button/component.js";
-import { FlexColumns as g } from "../flex-columns/component.js";
+import { BackButton as g } from "../back-button/component.js";
+import { FlexColumns as w } from "../flex-columns/component.js";
 import { Typography as t } from "../typography/component.js";
 import e from "./index.module.css.js";
-const h = ({ title: m, subtitle: l }) => /* @__PURE__ */ a(g, { columns: 1, gr: 4, className: e.title, children: [
+const h = ({ title: m, subtitle: l }) => /* @__PURE__ */ a(w, { columns: 1, gr: 4, className: e.title, children: [
   /* @__PURE__ */ r(t.Title, { color: "primary", tag: "div", view: "small", weight: "bold", children: m }),
   l && /* @__PURE__ */ r(t.Text, { view: "title", weight: "regular", color: "secondary", children: l })
-] }), j = ({
+] }), u = ({
   className: m,
   dataTestId: l,
   title: o,
@@ -16,7 +16,8 @@ const h = ({ title: m, subtitle: l }) => /* @__PURE__ */ a(g, { columns: 1, gr:
   subtitle: c,
   t: d,
   bottomAddons: n,
-  noCloser: v
+  noCloser: f,
+  showCloser: v
 }) => /* @__PURE__ */ a(
   "div",
   {
@@ -24,9 +25,9 @@ const h = ({ title: m, subtitle: l }) => /* @__PURE__ */ a(g, { columns: 1, gr:
     className: p(e.wrapper, m),
     children: [
       (i || o || s) && /* @__PURE__ */ a("div", { className: e.heading, children: [
-        i && d && /* @__PURE__ */ r(f, { onClick: i, t: d }),
+        i && d && /* @__PURE__ */ r(g, { onClick: i, t: d }),
         !i && o && /* @__PURE__ */ r(h, { title: o, subtitle: c }),
-        s && /* @__PURE__ */ r("div", { className: p(e.rightAddons, { [e.noCloser]: !!v }), children: s })
+        s && /* @__PURE__ */ r("div", { className: p(e.rightAddons, { [e.noCloser]: !!f || v === !1 }), children: s })
       ] }),
       !!i && o && /* @__PURE__ */ r(h, { title: o, subtitle: c }),
       !!n && /* @__PURE__ */ r("div", { className: e.bottomAddons, children: n })
@@ -34,6 +35,6 @@ const h = ({ title: m, subtitle: l }) => /* @__PURE__ */ a(g, { columns: 1, gr:
   }
 );
 export {
-  j as SidepanelHeader
+  u as SidepanelHeader
 };
 //# sourceMappingURL=component.js.map

package/dist/sidepanel-header/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/sidepanel-header/component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { BackButton } from '../back-button';\nimport { FlexColumns } from '../flex-columns';\nimport { TFunction } from '../modal';\nimport { Typography } from '../typography';\n\nimport styles from './index.module.css';\n\ntype Back = {\n    back?: () => void;\n    t: TFunction;\n} | {\n    back?: never;\n    t?: never;\n};\n\nexport type SidepanelHeaderProps = {\n    /**\n     * Кастомный класс\n     */\n    className?: string;\n\n    /**\n     * title\n     */\n    title?: string;\n\n    /**\n     * rightAddons - слот слева\n     */\n    rightAddons?: React.ReactNode;\n\n    /**\n     * bottomAddons - слот внизу\n     */\n    bottomAddons?: React.ReactNode;\n\n    /**\n     * Id компонента для тестов\n     */\n    noCloser?: boolean;\n    dataTestId?: string;\n\n    subtitle?: string;\n} & Back;\n\nconst Title = ({ title, subtitle }: {title: string; subtitle?: string}) => (\n    <FlexColumns columns={ 1 } gr={ 4 } className={ styles.title }>\n\n        <Typography.Title color=\"primary\" tag=\"div\" view=\"small\" weight=\"bold\">\n            { title }\n        </Typography.Title>\n\n        { subtitle && (\n            <Typography.Text view=\"title\" weight=\"regular\" color=\"secondary\">\n                { subtitle }\n            </Typography.Text>\n        ) }\n\n    </FlexColumns>\n);\n\nexport const SidepanelHeader: React.FC<SidepanelHeaderProps> = ({\n    className,\n    dataTestId,\n    title,\n    rightAddons,\n    back,\n    subtitle,\n    t,\n    bottomAddons,\n    noCloser,\n}) => (\n    <div\n        data-test-id={ dataTestId }\n        className={ cn(styles.wrapper, className) }\n    >\n        { (back || title || rightAddons) && (\n            <div className={ styles.heading }>\n                { back && t && (\n                    <BackButton onClick={ back } t={ t } />\n                ) }\n\n                { !back && title && (\n                    <Title title={ title } subtitle={ subtitle } />\n                ) }\n\n                { rightAddons && <div className={ cn(styles.rightAddons, { [styles.noCloser]: !!noCloser }) }>{ rightAddons }</div> }\n            </div>\n        ) }\n\n        { !!back && title && (\n            <Title title={ title } subtitle={ subtitle } />\n        ) }\n\n        { !!bottomAddons && <div className={ styles.bottomAddons }>{ bottomAddons }</div> }\n\n    </div>\n);\n"],"names":["Title","title","subtitle","jsxs","FlexColumns","styles","jsx","Typography","SidepanelHeader","className","dataTestId","rightAddons","back","t","bottomAddons","noCloser","cn","BackButton"],"mappings":";;;;;;AAgDA,MAAMA,IAAQ,CAAC,EAAE,OAAAC,GAAO,UAAAC,QACpB,gBAAAC,EAACC,GAAA,EAAY,SAAU,GAAI,IAAK,GAAI,WAAYC,EAAO,OAEnD,UAAA;AAAA,EAAA,gBAAAC,EAACC,EAAW,OAAX,EAAiB,OAAM,WAAU,KAAI,OAAM,MAAK,SAAQ,QAAO,QAC1D,UAAAN,EAAA,CACN;AAAA,EAEEC,KACE,gBAAAI,EAACC,EAAW,MAAX,EAAgB,MAAK,SAAQ,QAAO,WAAU,OAAM,aAC/C,UAAAL,EAAA,CACN;AAAA,GAGR,GAGSM,IAAkD,CAAC;AAAA,EAC5D,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAT;AAAA,EACA,aAAAU;AAAA,EACA,MAAAC;AAAA,EACA,UAAAV;AAAA,EACA,GAAAW;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACJ,MACI,gBAAAZ;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAeO;AAAA,IACf,WAAYM,EAAGX,EAAO,SAASI,CAAS;AAAA,IAErC,UAAA;AAAA,OAAAG,KAAQX,KAASU,MAChB,gBAAAR,EAAC,OAAA,EAAI,WAAYE,EAAO,SAClB,UAAA;AAAA,QAAAO,KAAQC,KACN,gBAAAP,EAACW,GAAA,EAAW,SAAUL,GAAO,GAAAC,GAAQ;AAAA,QAGvC,CAACD,KAAQX,KACP,gBAAAK,EAACN,GAAA,EAAM,OAAAC,GAAgB,UAAAC,GAAsB;AAAA,QAG/CS,KAAe,gBAAAL,EAAC,OAAA,EAAI,WAAYU,EAAGX,EAAO,aAAa,EAAE,CAACA,EAAO,QAAQ,GAAG,CAAC,CAACU,EAAA,CAAU,GAAM,UAAAJ,EAAA,CAAa;AAAA,MAAA,GACjH;AAAA,MAGF,CAAC,CAACC,KAAQX,KACR,gBAAAK,EAACN,GAAA,EAAM,OAAAC,GAAgB,UAAAC,GAAsB;AAAA,MAG/C,CAAC,CAACY,KAAgB,gBAAAR,EAAC,SAAI,WAAYD,EAAO,cAAiB,UAAAS,EAAA,CAAc;AAAA,IAAA;AAAA,EAAA;AAE/E;"}
+{"version":3,"file":"component.js","sources":["../../src/sidepanel-header/component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { BackButton } from '../back-button';\nimport { FlexColumns } from '../flex-columns';\nimport { TFunction } from '../modal';\nimport { Typography } from '../typography';\n\nimport styles from './index.module.css';\n\ntype Back = {\n    back?: () => void;\n    t: TFunction;\n} | {\n    back?: never;\n    t?: never;\n};\n\nexport type SidepanelHeaderProps = {\n    /**\n     * Кастомный класс\n     */\n    className?: string;\n\n    /**\n     * title\n     */\n    title?: string;\n\n    /**\n     * rightAddons - слот слева\n     */\n    rightAddons?: React.ReactNode;\n\n    /**\n     * bottomAddons - слот внизу\n     */\n    bottomAddons?: React.ReactNode;\n\n    /**\n     * Id компонента для тестов\n     */\n    noCloser?: boolean;\n    showCloser?: boolean;\n    dataTestId?: string;\n\n    subtitle?: string;\n} & Back;\n\nconst Title = ({ title, subtitle }: {title: string; subtitle?: string}) => (\n    <FlexColumns columns={ 1 } gr={ 4 } className={ styles.title }>\n\n        <Typography.Title color=\"primary\" tag=\"div\" view=\"small\" weight=\"bold\">\n            { title }\n        </Typography.Title>\n\n        { subtitle && (\n            <Typography.Text view=\"title\" weight=\"regular\" color=\"secondary\">\n                { subtitle }\n            </Typography.Text>\n        ) }\n\n    </FlexColumns>\n);\n\nexport const SidepanelHeader: React.FC<SidepanelHeaderProps> = ({\n    className,\n    dataTestId,\n    title,\n    rightAddons,\n    back,\n    subtitle,\n    t,\n    bottomAddons,\n    noCloser,\n    showCloser,\n}) => (\n    <div\n        data-test-id={ dataTestId }\n        className={ cn(styles.wrapper, className) }\n    >\n        { (back || title || rightAddons) && (\n            <div className={ styles.heading }>\n                { back && t && (\n                    <BackButton onClick={ back } t={ t } />\n                ) }\n\n                { !back && title && (\n                    <Title title={ title } subtitle={ subtitle } />\n                ) }\n\n                { rightAddons && <div className={ cn(styles.rightAddons, { [styles.noCloser]: !!noCloser || showCloser === false }) }>{ rightAddons }</div> }\n            </div>\n        ) }\n\n        { !!back && title && (\n            <Title title={ title } subtitle={ subtitle } />\n        ) }\n\n        { !!bottomAddons && <div className={ styles.bottomAddons }>{ bottomAddons }</div> }\n\n    </div>\n);\n"],"names":["Title","title","subtitle","jsxs","FlexColumns","styles","jsx","Typography","SidepanelHeader","className","dataTestId","rightAddons","back","t","bottomAddons","noCloser","showCloser","cn","BackButton"],"mappings":";;;;;;AAiDA,MAAMA,IAAQ,CAAC,EAAE,OAAAC,GAAO,UAAAC,QACpB,gBAAAC,EAACC,GAAA,EAAY,SAAU,GAAI,IAAK,GAAI,WAAYC,EAAO,OAEnD,UAAA;AAAA,EAAA,gBAAAC,EAACC,EAAW,OAAX,EAAiB,OAAM,WAAU,KAAI,OAAM,MAAK,SAAQ,QAAO,QAC1D,UAAAN,EAAA,CACN;AAAA,EAEEC,KACE,gBAAAI,EAACC,EAAW,MAAX,EAAgB,MAAK,SAAQ,QAAO,WAAU,OAAM,aAC/C,UAAAL,EAAA,CACN;AAAA,GAGR,GAGSM,IAAkD,CAAC;AAAA,EAC5D,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAT;AAAA,EACA,aAAAU;AAAA,EACA,MAAAC;AAAA,EACA,UAAAV;AAAA,EACA,GAAAW;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACJ,MACI,gBAAAb;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAeO;AAAA,IACf,WAAYO,EAAGZ,EAAO,SAASI,CAAS;AAAA,IAErC,UAAA;AAAA,OAAAG,KAAQX,KAASU,MAChB,gBAAAR,EAAC,OAAA,EAAI,WAAYE,EAAO,SAClB,UAAA;AAAA,QAAAO,KAAQC,KACN,gBAAAP,EAACY,GAAA,EAAW,SAAUN,GAAO,GAAAC,GAAQ;AAAA,QAGvC,CAACD,KAAQX,KACP,gBAAAK,EAACN,GAAA,EAAM,OAAAC,GAAgB,UAAAC,GAAsB;AAAA,QAG/CS,KAAe,gBAAAL,EAAC,OAAA,EAAI,WAAYW,EAAGZ,EAAO,aAAa,EAAE,CAACA,EAAO,QAAQ,GAAG,CAAC,CAACU,KAAYC,MAAe,IAAO,GAAM,UAAAL,EAAA,CAAa;AAAA,MAAA,GACzI;AAAA,MAGF,CAAC,CAACC,KAAQX,KACR,gBAAAK,EAACN,GAAA,EAAM,OAAAC,GAAgB,UAAAC,GAAsB;AAAA,MAG/C,CAAC,CAACY,KAAgB,gBAAAR,EAAC,SAAI,WAAYD,EAAO,cAAiB,UAAAS,EAAA,CAAc;AAAA,IAAA;AAAA,EAAA;AAE/E;"}

package/dist/sidepanel-header/index.module.css

@@ -1 +1 @@
-.wrapper_QxqD{padding:28px 32px 12px;background-color:var(--color-bg-primary);box-sizing:border-box}.heading_XGDy{display:flex;justify-content:space-between;min-height:48px}.title_jwxc,.bottomAddons_3yzd{padding-bottom:8px;padding-top:8px}.rightAddons_aZFa{margin-right:48px;height:48px;display:flex;align-items:center}.noCloser_O7u0{margin-right:0}@media(max-width:823px){.wrapper_QxqD{padding:16px 16px 12px!important}}
+.wrapper_QxqD{padding:28px 32px 12px;background-color:var(--color-bg-primary);box-sizing:border-box}.heading_XGDy{display:flex;justify-content:space-between;min-height:48px}.title_jwxc,.bottomAddons_3yzd{padding-bottom:8px;padding-top:8px}.rightAddons_aZFa{margin-right:48px;height:48px;display:flex;align-items:center}.noCloser_O7u0{margin-right:0!important}@media(max-width:823px){.wrapper_QxqD{padding:16px 16px 12px!important}}

package/package.json

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