deploy: 7fb3a6a

assets/blocking-page-scroll.stories-B83WE-kM.js

@@ -0,0 +1,36 @@
+import{j as u}from"./index-CMu3Kjdk.js";import{r as s}from"./index-DVXBtNgz.js";import{H as m}from"./index-DgaVQ6HT.js";import{H as a}from"./index-DqfXHWeU.js";import{T as e}from"./index-xa7G255s.js";import{B as E}from"./index-C8DP56y-.js";import{B as c}from"./index-DX7BcFfT.js";import{D as i}from"./dialog-D3Br7OsT.js";const A={title:"Dialog Based/Dialog",tags:["!dev"]},n={name:"5) Page Scroll Lock",render:()=>{const[B,l]=s.useState(!1),[d,o]=s.useState(!1);return u.jsxs(u.Fragment,{children:[u.jsx(m,{children:u.jsxs(E,{children:[u.jsx(c,{onClick:()=>l(!0),children:"Открыть диалог, неблокирующий скролл"}),u.jsx(c,{onClick:()=>o(!0),children:"Открыть диалог с блокировкой скролла"})]})}),u.jsxs(i,{isModal:!1,isOpen:B,close:()=>l(!1),labeledBy:"headingOfNonBlocking",children:[u.jsx(a,{id:"headingOfNonBlocking",className:"mb-20",children:"Я не блокирую скролл страницы"}),u.jsx(e,{children:"Попробуйте проскроллить контент страницы позади меня - я дам с легкостью это сделать"})]}),u.jsxs(i,{isModal:!1,isOpen:d,close:()=>o(!1),labeledBy:"headingOfBlocking",withPageScrollLock:!0,children:[u.jsx(a,{id:"headingOfBlocking",className:"mb-20",children:"Я блокирую скролл страницы"}),u.jsx(e,{className:"mb-10",children:"Пока я открыт, скролл страницы заблокирован."}),u.jsx(e,{className:"mb-10",children:"Эта фича активируется с помощью пропа withPageScrollLock."}),u.jsx(e,{className:"mb-10",children:"Данный проп активирует CSS, который блокирует скролл контента позади меня."})]})]})}};var r,t,g;n.parameters={...n.parameters,docs:{...(r=n.parameters)==null?void 0:r.docs,source:{originalSource:`{
+  name: '5) Page Scroll Lock',
+  render: () => {
+    const [isOpenNonBlockingPageScroll, setIsOpenNonBlockingPageScroll] = useState(false);
+    const [isOpenBlockingPageScroll, setIsOpenBlockingPageScroll] = useState(false);
+    return <>
+                <HeightWrapper>
+                    <ButtonsRow>
+                        <Button onClick={() => setIsOpenNonBlockingPageScroll(true)}>
+                            Открыть диалог, неблокирующий скролл
+                        </Button>
+                        <Button onClick={() => setIsOpenBlockingPageScroll(true)}>
+                            Открыть диалог с блокировкой скролла
+                        </Button>
+                    </ButtonsRow>
+                </HeightWrapper>
+
+                <Dialog isModal={false} isOpen={isOpenNonBlockingPageScroll} close={() => setIsOpenNonBlockingPageScroll(false)} labeledBy="headingOfNonBlocking">
+                    <Heading id="headingOfNonBlocking" className="mb-20">
+                        Я не блокирую скролл страницы
+                    </Heading>
+                    <Text>Попробуйте проскроллить контент страницы позади меня - я дам с легкостью это сделать</Text>
+                </Dialog>
+                <Dialog isModal={false} isOpen={isOpenBlockingPageScroll} close={() => setIsOpenBlockingPageScroll(false)} labeledBy="headingOfBlocking" withPageScrollLock>
+                    <Heading id="headingOfBlocking" className="mb-20">
+                        Я блокирую скролл страницы
+                    </Heading>
+                    <Text className="mb-10">Пока я открыт, скролл страницы заблокирован.</Text>
+                    <Text className="mb-10">Эта фича активируется с помощью пропа withPageScrollLock.</Text>
+                    <Text className="mb-10">
+                        Данный проп активирует CSS, который блокирует скролл контента позади меня.
+                    </Text>
+                </Dialog>
+            </>;
+  }
+}`,...(g=(t=n.parameters)==null?void 0:t.docs)==null?void 0:g.source}}};const P=["PageScrollLock"];export{n as PageScrollLock,P as __namedExportsOrder,A as default};

assets/client-DWUO8fVt.js

@@ -0,0 +1 @@
+import{r}from"./index-Cbx7Fas8.js";var o={},t=r;o.createRoot=t.createRoot,o.hydrateRoot=t.hydrateRoot;export{o as c};

assets/close-on-escape-non-modal.stories-Cs1b55yu.js

@@ -0,0 +1,30 @@
+import{j as u}from"./index-CMu3Kjdk.js";import{r as t}from"./index-DVXBtNgz.js";import{H as h}from"./index-DgaVQ6HT.js";import{H as o}from"./index-DqfXHWeU.js";import{T as s}from"./index-xa7G255s.js";import{B as m}from"./index-C8DP56y-.js";import{B as i}from"./index-DX7BcFfT.js";import{D as l}from"./dialog-D3Br7OsT.js";const D={title:"Dialog Based/Dialog",tags:["!dev"]},e={name:"3) Close On Escape Non Modal",render:()=>{const[d,a]=t.useState(!1),[E,n]=t.useState(!1);return u.jsxs(u.Fragment,{children:[u.jsx(h,{children:u.jsxs(m,{children:[u.jsx(i,{onClick:()=>a(!0),children:"Открыть диалог без Escape"}),u.jsx(i,{onClick:()=>n(!0),children:"Открыть диалог с Escape"})]})}),u.jsxs(l,{isModal:!1,isOpen:d,close:()=>a(!1),labeledBy:"headingOfWithoutEscape",children:[u.jsx(o,{id:"headingOfWithoutEscape",className:"mb-20",children:"Дефолтный диалог"}),u.jsx(s,{children:"Так как я немодальный, закрыть меня с помощью Escape не выйдет - как ни пытайся!"})]}),u.jsxs(l,{isModal:!1,isOpen:E,close:()=>n(!1),labeledBy:"headingOfWithEscape",withCloseOnEscapeForNonModal:!0,children:[u.jsx(o,{id:"headingOfWithEscape",className:"mb-20",children:"Продвинутый диалог"}),u.jsx(s,{className:"mb-10",children:"Хоть я и немодальный диалог, меня можно закрыть в помощью клавиши Escape."}),u.jsx(s,{className:"mb-10",children:"Это работает благодаря пропу withCloseOnEscapeForNonModal."})]})]})}};var r,c,p;e.parameters={...e.parameters,docs:{...(r=e.parameters)==null?void 0:r.docs,source:{originalSource:`{
+  name: '3) Close On Escape Non Modal',
+  render: () => {
+    const [isOpenWithoutEscapeHandler, setIsOpenWithoutEscapeHandler] = useState(false);
+    const [isOpenWithEscapeHandler, setIsOpenWithEscapeHandler] = useState(false);
+    return <>
+                <HeightWrapper>
+                    <ButtonsRow>
+                        <Button onClick={() => setIsOpenWithoutEscapeHandler(true)}>Открыть диалог без Escape</Button>
+                        <Button onClick={() => setIsOpenWithEscapeHandler(true)}>Открыть диалог с Escape</Button>
+                    </ButtonsRow>
+                </HeightWrapper>
+                <Dialog isModal={false} isOpen={isOpenWithoutEscapeHandler} close={() => setIsOpenWithoutEscapeHandler(false)} labeledBy="headingOfWithoutEscape">
+                    <Heading id="headingOfWithoutEscape" className="mb-20">
+                        Дефолтный диалог
+                    </Heading>
+                    <Text>Так как я немодальный, закрыть меня с помощью Escape не выйдет - как ни пытайся!</Text>
+                </Dialog>
+                <Dialog isModal={false} isOpen={isOpenWithEscapeHandler} close={() => setIsOpenWithEscapeHandler(false)} labeledBy="headingOfWithEscape" withCloseOnEscapeForNonModal>
+                    <Heading id="headingOfWithEscape" className="mb-20">
+                        Продвинутый диалог
+                    </Heading>
+                    <Text className="mb-10">
+                        Хоть я и немодальный диалог, меня можно закрыть в помощью клавиши Escape.
+                    </Text>
+                    <Text className="mb-10">Это работает благодаря пропу withCloseOnEscapeForNonModal.</Text>
+                </Dialog>
+            </>;
+  }
+}`,...(p=(c=e.parameters)==null?void 0:c.docs)==null?void 0:p.source}}};const F=["CloseOnEscapeNonModal"];export{e as CloseOnEscapeNonModal,F as __namedExportsOrder,D as default};