@ryuzaki13/react-foundation-ui 1.0.13 → 1.0.15

package/storybook-static/assets/Modal.stories-cPIHRa9a.js

@@ -1,180 +0,0 @@
-import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-SfMJGCsn.js";import{t as i}from"./react-dom-CncQzc_h.js";import{t as a}from"./jsx-runtime-BBQGix-2.js";import{a as o,i as s}from"./utils-CReRlw17.js";import{n as ee,t as c}from"./lucide-react-CK2oyDtF.js";import{a as l,i as te,r as ne,s as re}from"./error-RVOk7zpw.js";import{o as u}from"./Flex-C_VnI9xY.js";import{t as d}from"./flex-DuYzsEBQ.js";import{t as f}from"./Button-BUkCW8Zg.js";import{t as p}from"./button-Bl3Hu8CS.js";import{t as m}from"./Input-B7DWcGCL.js";import{t as h}from"./input-Be5K9_B7.js";import{i as ie}from"./Grid-y8wKyEwc.js";import{t as g}from"./grid-D0WOuGlB.js";import{i as _,t as v}from"./misc-CPvLzCFJ.js";var y,b,x,S,C,w,T,E,ae,D,O,k,oe=n((()=>{y=`vGPUKV`,b=`O7gb7P`,x=`RVq8v3`,S=`PCSUAL`,C=`XDCHzq`,w=`t1kl8L`,T=`o3PEEB`,E=`WhUkxm`,ae=`NDgdMi`,D=`JDlse5`,O=`FaDKSt`,k={modal:y,sm:b,md:x,lg:S,xl:C,xxl:w,inside:T,header:E,body:ae,headerText:D,headerButton:O}})),A,j,M,N=n((()=>{A=t(r(),1),j=(0,A.createContext)({modals:[],openModal:()=>{},closeModal:()=>{},isTopModal:()=>!1}),M=()=>(0,A.useContext)(j)})),P,F,I,L,R,z,B,se=n((()=>{P=t(r(),1),l(),s(),c(),F=t(i(),1),p(),d(),g(),v(),oe(),N(),I=a(),L=({children:e,className:t})=>(0,I.jsx)(`div`,{className:o(`surface2 paddingMd borderBottom`,t),children:e}),L.displayName=`Modal.Toolbar`,R=({children:e,className:t,scrollable:n})=>(0,I.jsx)(`div`,{className:o(`paddingMd h100 overflowHidden`,t),children:n?(0,I.jsx)(_,{className:`h100`,children:e}):e}),R.displayName=`Modal.Content`,z=({children:e,className:t})=>(0,I.jsx)(`div`,{className:o(`surface2 borderTop paddingMd`,t),children:(0,I.jsx)(u,{gap:`sm`,align:`center`,justify:`end`,children:e})}),z.displayName=`Modal.Footer`,B=({isOpen:e,title:t,size:n=`sm`,height:r,onClose:i,children:a})=>{let s=(0,P.useId)(),c=(0,P.useId)(),{modals:l,openModal:u,closeModal:d,isTopModal:p}=M(),[m,h]=(0,P.useState)(!1),g=(0,P.useEffectEvent)(()=>h(!0)),_=(0,P.useEffectEvent)(()=>h(!1)),v=e&&(l.length===0||p(s)),y=re(e||!1);if(te({active:v||!1,onDismiss:i,containerRef:y}),(0,P.useEffect)(()=>(e&&(u(s),g()),()=>{d(s),_()}),[d,e,s,u]),!m)return null;let b=ne(`modal-root`);if(!b)return null;let x=null,S=null,C=null,w=P.Children.toArray(a);for(let e of w)switch(e.type.displayName){case L.displayName:if(x)throw Error(`Modal: duplicate <Toolbar> found`);x=e;break;case z.displayName:if(C)throw Error(`Modal: duplicate <Footer> found`);C=e;break;case R.displayName:if(S)throw Error(`Modal: duplicate <Content> found`);S=e;break}return(0,F.createPortal)((0,I.jsx)(I.Fragment,{children:(0,I.jsxs)(`div`,{ref:y,className:o(k.modal,k[n]),style:{height:r},role:`dialog`,"aria-modal":`true`,"aria-labelledby":c,"aria-describedby":`${c}-content`,children:[(0,I.jsxs)(`div`,{className:o(k.header,x?``:`borderBottom`),children:[(0,I.jsx)(`h3`,{className:k.headerText,id:c,children:t}),(0,I.jsx)(f,{icon:(0,I.jsx)(ee,{}),className:k.headerButton,variant:`ghost`,autoFocus:!0,"aria-label":`Закрыть модальное окно`,onClick:i})]}),(0,I.jsxs)(ie,{id:`${c}-content`,templateRows:`${x?`auto`:``} 1fr ${C?`auto`:``}`.trim(),className:k.body,children:[x,S,C]})]})}),b)},L.__docgenInfo={description:``,methods:[],displayName:`Modal.Toolbar`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``}}},R.__docgenInfo={description:``,methods:[],displayName:`Modal.Content`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``},scrollable:{required:!1,tsType:{name:`boolean`},description:``}}},z.__docgenInfo={description:``,methods:[],displayName:`Modal.Footer`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``}}}}));function V({children:e}){let[t,n]=(0,H.useState)([]),r=(0,H.useRef)(0),i=(0,H.useCallback)(e=>{n(t=>[...t,e])},[]),a=(0,H.useCallback)(e=>{n(t=>t.filter(t=>t!==e))},[]),o=(0,H.useCallback)(e=>t[t.length-1]===e,[t]);return(0,H.useEffect)(()=>{let e=r.current===0;if(e&&t.length>0){let e=window.scrollY,n=document.querySelector(`#app-root`);document.body.style.position=`fixed`,document.body.style.top=`-${e}px`,document.body.style.width=`100%`,n?.setAttribute(`inert`,`true`),r.current=t.length;return}if(!e&&t.length===0){let e=document.querySelector(`#app-root`),t=parseInt(document.body.style.top||`0`)*-1;document.body.style.position=``,document.body.style.top=``,document.body.style.width=``,e?.removeAttribute(`inert`),window.scrollTo({top:t,left:0,behavior:`instant`})}r.current=t.length},[t.length]),(0,U.jsx)(j.Provider,{value:{modals:t,openModal:i,closeModal:a,isTopModal:o},children:e})}var H,U,ce=n((()=>{H=t(r(),1),N(),U=a(),V.__docgenInfo={description:`Провайдер для централизованного управления стеком модальных окон. Дает вложенным компонентам доступ к открытию и закрытию модалок через контекст.`,methods:[],displayName:`ModalManagerProvider`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``}}}})),le=n((()=>{se(),ce(),N()})),ue=e({Controlled:()=>J,ScrollableContent:()=>X,Sizes:()=>Z,StackedModals:()=>Q,WithToolbarAndFooter:()=>Y,__namedExportsOrder:()=>$,default:()=>q});function de({children:e}){return(0,K.jsx)(`div`,{style:{minHeight:`60dvh`,padding:24,display:`flex`,alignItems:`center`,justifyContent:`center`},children:e})}function W(){let[e,t]=(0,G.useState)(`Алексей`),[n,r]=(0,G.useState)(`Департамент автоматизации бизнеса`);return(0,K.jsxs)(`div`,{style:{display:`grid`,gap:16},children:[(0,K.jsx)(m,{label:`Имя`,value:e,onChange:t,placeholder:`Введите имя`}),(0,K.jsx)(m,{label:`Подразделение`,value:n,onChange:r,placeholder:`Введите подразделение`}),(0,K.jsxs)(`div`,{style:{padding:12,borderRadius:8,background:`var(--surface-1)`,border:`1px solid var(--border-1)`},children:[`Текущие значения: `,e||`не указано`,`, `,n||`не указано`]})]})}var G,K,q,J,Y,X,Z,Q,$,fe=n((()=>{G=t(r(),1),p(),h(),le(),K=a(),q={title:`Shared/UI/Modal`,component:B,parameters:{atomicCanvas:!0,layout:`fullscreen`,docs:{description:{component:"Композиционная модалка с `Toolbar`, `Content` и `Footer`, поддержкой focus trap, возврата фокуса, закрытия по `Escape` и менеджером стека через `ModalManagerProvider`."}}},decorators:[e=>(0,K.jsx)(V,{children:(0,K.jsx)(de,{children:e()})})],args:{isOpen:!1,title:`Редактирование профиля`,size:`md`,height:void 0,onClose:()=>{},children:(0,K.jsxs)(K.Fragment,{children:[(0,K.jsx)(R,{children:(0,K.jsx)(W,{})}),(0,K.jsxs)(z,{children:[(0,K.jsx)(f,{variant:`transparent`,children:`Отмена`}),(0,K.jsx)(f,{children:`Сохранить`})]})]})},argTypes:{isOpen:{description:`Управляет видимостью модального окна.`,control:`boolean`},title:{description:`Заголовок модального окна.`,control:`text`},size:{description:`Предустановленный размер модального окна.`,control:`inline-radio`,options:[`sm`,`md`,`lg`,`xl`,`inside`]},height:{description:`Явная высота body-области модалки.`,control:`text`},onClose:{description:"Вызывается при закрытии по кнопке, `Escape` или пользовательскому действию.",control:!1},children:{description:"Композиция из `ModalToolbar`, `ModalContent`, `ModalFooter`.",control:!1}}},J={name:`Управляемая модалка`,render:e=>{let[t,n]=(0,G.useState)(!1);return(0,K.jsxs)(K.Fragment,{children:[(0,K.jsx)(f,{onClick:()=>n(!0),children:`Открыть модалку`}),(0,K.jsxs)(B,{...e,isOpen:t,onClose:()=>n(!1),children:[(0,K.jsx)(R,{children:(0,K.jsx)(W,{})}),(0,K.jsxs)(z,{children:[(0,K.jsx)(f,{variant:`transparent`,onClick:()=>n(!1),children:`Отмена`}),(0,K.jsx)(f,{onClick:()=>n(!1),children:`Сохранить`})]})]})]})}},Y={name:`Полная композиция`,render:e=>{let[t,n]=(0,G.useState)(!1);return(0,K.jsxs)(K.Fragment,{children:[(0,K.jsx)(f,{onClick:()=>n(!0),children:`Открыть сценарий редактирования`}),(0,K.jsxs)(B,{...e,isOpen:t,onClose:()=>n(!1),height:`min(34rem, 70dvh)`,children:[(0,K.jsx)(L,{children:(0,K.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,justifyContent:`space-between`,gap:12,padding:12,borderRadius:8,background:`var(--surface-1)`,border:`1px solid var(--border-1)`},children:[(0,K.jsxs)(`div`,{children:[(0,K.jsx)(`div`,{style:{fontWeight:600},children:`Черновик обновлён автоматически`}),(0,K.jsx)(`div`,{style:{opacity:.72},children:`Последнее сохранение: 2 минуты назад`})]}),(0,K.jsx)(f,{variant:`transparent`,children:`Сбросить`})]})}),(0,K.jsx)(R,{children:(0,K.jsx)(W,{})}),(0,K.jsxs)(z,{children:[(0,K.jsx)(f,{variant:`transparent`,onClick:()=>n(!1),children:`Отмена`}),(0,K.jsx)(f,{variant:`success`,onClick:()=>n(!1),children:`Применить`})]})]})]})}},X={name:`Длинный контент`,render:e=>{let[t,n]=(0,G.useState)(!1);return(0,K.jsxs)(K.Fragment,{children:[(0,K.jsx)(f,{onClick:()=>n(!0),children:`Открыть длинный контент`}),(0,K.jsxs)(B,{...e,isOpen:t,onClose:()=>n(!1),size:`lg`,height:`min(38rem, 75dvh)`,title:`Журнал изменений`,children:[(0,K.jsx)(R,{children:(0,K.jsx)(`div`,{style:{display:`grid`,gap:12},children:Array.from({length:18},(e,t)=>(0,K.jsxs)(`div`,{style:{padding:12,borderRadius:8,border:`1px solid var(--border-1)`,background:`var(--surface-1)`},children:[(0,K.jsxs)(`div`,{style:{fontWeight:600},children:[`Событие #`,t+1]}),(0,K.jsx)(`div`,{style:{opacity:.72},children:`Пользователь обновил настройки карточки, изменил состав полей и подтвердил сохранение конфигурации.`})]},t))})}),(0,K.jsx)(z,{children:(0,K.jsx)(f,{onClick:()=>n(!1),children:`Закрыть`})})]})]})}},Z={name:`Размеры`,render:()=>{let[e,t]=(0,G.useState)(null);return(0,K.jsxs)(K.Fragment,{children:[(0,K.jsx)(`div`,{style:{display:`flex`,flexWrap:`wrap`,gap:12,justifyContent:`center`},children:[`sm`,`md`,`lg`,`xl`,`inside`].map(e=>(0,K.jsx)(f,{variant:`transparent`,onClick:()=>t(e),children:e.toUpperCase()},e))}),e&&(0,K.jsxs)(B,{isOpen:!0,onClose:()=>t(null),size:e,title:`Размер ${e.toUpperCase()}`,children:[(0,K.jsx)(R,{children:(0,K.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,K.jsx)(`div`,{children:`Этот сценарий помогает быстро сравнить ширину и поведение модалки для разных размеров.`}),(0,K.jsx)(`div`,{style:{opacity:.72},children:"Проверьте отступы, читабельность и поведение при `Escape`."})]})}),(0,K.jsx)(z,{children:(0,K.jsx)(f,{onClick:()=>t(null),children:`Понятно`})})]})]})}},Q={name:`Стек модалок`,render:e=>{let[t,n]=(0,G.useState)(!1),[r,i]=(0,G.useState)(!1);return(0,K.jsxs)(K.Fragment,{children:[(0,K.jsx)(f,{onClick:()=>n(!0),children:`Открыть первую модалку`}),(0,K.jsxs)(B,{...e,isOpen:t,onClose:()=>{i(!1),n(!1)},size:`lg`,title:`Первая модалка`,children:[(0,K.jsx)(R,{children:(0,K.jsxs)(`div`,{style:{display:`grid`,gap:16},children:[(0,K.jsx)(`div`,{children:"Откройте вторую модалку и проверьте, что `Escape` закрывает только верхний слой."}),(0,K.jsx)(f,{variant:`transparent`,onClick:()=>i(!0),children:`Открыть вторую модалку`})]})}),(0,K.jsx)(z,{children:(0,K.jsx)(f,{variant:`transparent`,onClick:()=>n(!1),children:`Закрыть первую`})})]}),(0,K.jsxs)(B,{isOpen:r,onClose:()=>i(!1),size:`sm`,title:`Вторая модалка`,children:[(0,K.jsx)(R,{children:(0,K.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,K.jsx)(`div`,{children:`Эта модалка должна считаться верхней в стеке.`}),(0,K.jsx)(m,{label:`Короткое поле`,value:`Фокус внутри`,onChange:()=>{}})]})}),(0,K.jsx)(z,{children:(0,K.jsx)(f,{onClick:()=>i(!1),children:`Закрыть вторую`})})]})]})}},J.parameters={...J.parameters,docs:{...J.parameters?.docs,source:{originalSource:`{
-  name: "Управляемая модалка",
-  render: args => {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button onClick={() => setOpen(true)}>Открыть модалку</Button>
-                <Modal {...args} isOpen={open} onClose={() => setOpen(false)}>
-                    <ModalContent>
-                        <DemoFormContent />
-                    </ModalContent>
-                    <ModalFooter>
-                        <Button variant="transparent" onClick={() => setOpen(false)}>
-                            Отмена
-                        </Button>
-                        <Button onClick={() => setOpen(false)}>Сохранить</Button>
-                    </ModalFooter>
-                </Modal>
-            </>;
-  }
-}`,...J.parameters?.docs?.source}}},Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{
-  name: "Полная композиция",
-  render: args => {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button onClick={() => setOpen(true)}>Открыть сценарий редактирования</Button>
-                <Modal {...args} isOpen={open} onClose={() => setOpen(false)} height="min(34rem, 70dvh)">
-                    <ModalToolbar>
-                        <div style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            gap: 12,
-            padding: 12,
-            borderRadius: 8,
-            background: "var(--surface-1)",
-            border: "1px solid var(--border-1)"
-          }}>
-                            <div>
-                                <div style={{
-                fontWeight: 600
-              }}>Черновик обновлён автоматически</div>
-                                <div style={{
-                opacity: 0.72
-              }}>Последнее сохранение: 2 минуты назад</div>
-                            </div>
-                            <Button variant="transparent">Сбросить</Button>
-                        </div>
-                    </ModalToolbar>
-                    <ModalContent>
-                        <DemoFormContent />
-                    </ModalContent>
-                    <ModalFooter>
-                        <Button variant="transparent" onClick={() => setOpen(false)}>
-                            Отмена
-                        </Button>
-                        <Button variant="success" onClick={() => setOpen(false)}>
-                            Применить
-                        </Button>
-                    </ModalFooter>
-                </Modal>
-            </>;
-  }
-}`,...Y.parameters?.docs?.source}}},X.parameters={...X.parameters,docs:{...X.parameters?.docs,source:{originalSource:`{
-  name: "Длинный контент",
-  render: args => {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button onClick={() => setOpen(true)}>Открыть длинный контент</Button>
-                <Modal {...args} isOpen={open} onClose={() => setOpen(false)} size="lg" height="min(38rem, 75dvh)" title="Журнал изменений">
-                    <ModalContent>
-                        <div style={{
-            display: "grid",
-            gap: 12
-          }}>
-                            {Array.from({
-              length: 18
-            }, (_, index) => <div key={index} style={{
-              padding: 12,
-              borderRadius: 8,
-              border: "1px solid var(--border-1)",
-              background: "var(--surface-1)"
-            }}>
-                                    <div style={{
-                fontWeight: 600
-              }}>Событие #{index + 1}</div>
-                                    <div style={{
-                opacity: 0.72
-              }}>
-                                        Пользователь обновил настройки карточки, изменил состав полей и подтвердил сохранение конфигурации.
-                                    </div>
-                                </div>)}
-                        </div>
-                    </ModalContent>
-                    <ModalFooter>
-                        <Button onClick={() => setOpen(false)}>Закрыть</Button>
-                    </ModalFooter>
-                </Modal>
-            </>;
-  }
-}`,...X.parameters?.docs?.source}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
-  name: "Размеры",
-  render: () => {
-    const [openSize, setOpenSize] = useState<"sm" | "md" | "lg" | "xl" | "inside" | null>(null);
-    return <>
-                <div style={{
-        display: "flex",
-        flexWrap: "wrap",
-        gap: 12,
-        justifyContent: "center"
-      }}>
-                    {(["sm", "md", "lg", "xl", "inside"] as const).map(size => <Button key={size} variant="transparent" onClick={() => setOpenSize(size)}>
-                            {size.toUpperCase()}
-                        </Button>)}
-                </div>
-
-                {openSize && <Modal isOpen onClose={() => setOpenSize(null)} size={openSize} title={\`Размер \${openSize.toUpperCase()}\`}>
-                        <ModalContent>
-                            <div style={{
-            display: "grid",
-            gap: 12
-          }}>
-                                <div>Этот сценарий помогает быстро сравнить ширину и поведение модалки для разных размеров.</div>
-                                <div style={{
-              opacity: 0.72
-            }}>Проверьте отступы, читабельность и поведение при \`Escape\`.</div>
-                            </div>
-                        </ModalContent>
-                        <ModalFooter>
-                            <Button onClick={() => setOpenSize(null)}>Понятно</Button>
-                        </ModalFooter>
-                    </Modal>}
-            </>;
-  }
-}`,...Z.parameters?.docs?.source}}},Q.parameters={...Q.parameters,docs:{...Q.parameters?.docs,source:{originalSource:`{
-  name: "Стек модалок",
-  render: args => {
-    const [outerOpen, setOuterOpen] = useState(false);
-    const [innerOpen, setInnerOpen] = useState(false);
-    return <>
-                <Button onClick={() => setOuterOpen(true)}>Открыть первую модалку</Button>
-
-                <Modal {...args} isOpen={outerOpen} onClose={() => {
-        setInnerOpen(false);
-        setOuterOpen(false);
-      }} size="lg" title="Первая модалка">
-                    <ModalContent>
-                        <div style={{
-            display: "grid",
-            gap: 16
-          }}>
-                            <div>Откройте вторую модалку и проверьте, что \`Escape\` закрывает только верхний слой.</div>
-                            <Button variant="transparent" onClick={() => setInnerOpen(true)}>
-                                Открыть вторую модалку
-                            </Button>
-                        </div>
-                    </ModalContent>
-                    <ModalFooter>
-                        <Button variant="transparent" onClick={() => setOuterOpen(false)}>
-                            Закрыть первую
-                        </Button>
-                    </ModalFooter>
-                </Modal>
-
-                <Modal isOpen={innerOpen} onClose={() => setInnerOpen(false)} size="sm" title="Вторая модалка">
-                    <ModalContent>
-                        <div style={{
-            display: "grid",
-            gap: 12
-          }}>
-                            <div>Эта модалка должна считаться верхней в стеке.</div>
-                            <Input label="Короткое поле" value={"Фокус внутри"} onChange={() => {}} />
-                        </div>
-                    </ModalContent>
-                    <ModalFooter>
-                        <Button onClick={() => setInnerOpen(false)}>Закрыть вторую</Button>
-                    </ModalFooter>
-                </Modal>
-            </>;
-  }
-}`,...Q.parameters?.docs?.source}}},$=[`Controlled`,`WithToolbarAndFooter`,`ScrollableContent`,`Sizes`,`StackedModals`]}));fe();export{J as Controlled,X as ScrollableContent,Z as Sizes,Q as StackedModals,Y as WithToolbarAndFooter,$ as __namedExportsOrder,q as default,fe as n,ue as t};

package/storybook-static/assets/formatter-L2YTDE3Q-Cdp-Jp2M.js

@@ -1 +0,0 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{m as t,p as n}from"./iframe-SfMJGCsn.js";import{i as r,n as i,r as a,t as o}from"./chunk-3LY4VQVK-BxHCYS2R.js";var s;e((()=>{a(),i(),t(),s=(0,n(r(),1).default)(2)(async(e,t)=>e===!1?t:o(t))}))();export{s as formatter};

package/storybook-static/assets/grid-D0WOuGlB.js

@@ -1 +0,0 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{a as t,n,r}from"./Grid-y8wKyEwc.js";var i=e((()=>{n(),t(),r()}));export{i as t};

package/storybook-static/assets/odata-service-8sDCOQ3I.js

@@ -1 +0,0 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{P as t}from"./formatters-yIBztcem.js";var n=e((()=>{t()}));export{n as t};

package/storybook-static/assets/select-BPvMbVDe.js

@@ -1 +0,0 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{n as t}from"./Select-DYVS7SCZ.js";import{n}from"./ODataSelect-D7GAFOcM.js";import{n as r}from"./SerializableSelect-DwCnuBgv.js";var i=e((()=>{n(),t(),r()}));export{i as t};

package/storybook-static/assets/ui-CmVy0trY.js

@@ -1 +0,0 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{a as t,r as n}from"./DateInput-C72jV86j.js";var r=e((()=>{t(),n()}));export{r as t};