@oliasoft-open-source/react-ui-library 4.4.8 → 4.4.9-beta-1
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.
- package/dist/assets/{index-neKlYvgy.js → index-UlXF8M5L.js} +21 -5
- package/dist/index.d.ts +7 -2
- package/dist/index.html +1 -1
- package/dist/index.js +21 -5
- package/dist/index.js.map +1 -1
- package/dist/storybook/assets/{Color-6VNJS4EI-mlGeGy0N.js → Color-6VNJS4EI-dBRov0iu.js} +1 -1
- package/dist/storybook/assets/{DocsRenderer-NNNQARDV-FLE8MQVp.js → DocsRenderer-NNNQARDV-XOipoxsx.js} +1 -1
- package/dist/storybook/assets/{WithTooltip-4HIR6TLV-gwf45DIV.js → WithTooltip-4HIR6TLV-N9BTPjWv.js} +1 -1
- package/dist/storybook/assets/{accordion-6_27SROY.js → accordion-MRdNs3mQ.js} +1 -1
- package/dist/storybook/assets/{accordion.stories-yWtLkrNK.js → accordion.stories-UmGPZpjJ.js} +2 -2
- package/dist/storybook/assets/{actions-Z9jDWreP.js → actions--jdeAagr.js} +1 -1
- package/dist/storybook/assets/actions.stories-T8b1WLu9.js +1 -0
- package/dist/storybook/assets/afe.stories-Vw9r62sk.js +88 -0
- package/dist/storybook/assets/badge.stories-spKtjcPw.js +1 -0
- package/dist/storybook/assets/blowout.stories-U_cS_3Xs.js +40 -0
- package/dist/storybook/assets/{button-group-q8QKkLVU.js → button-group-kcxXYkIJ.js} +1 -1
- package/dist/storybook/assets/{button-group.stories-tLZpLTfD.js → button-group.stories-U6DjmSki.js} +2 -2
- package/dist/storybook/assets/button-qfybxFqE.js +1 -0
- package/dist/storybook/assets/button.stories-6GvGJMKF.js +80 -0
- package/dist/storybook/assets/{buttons-and-links-t1EEC4gc.js → buttons-and-links-e6-ikhN9.js} +2 -2
- package/dist/storybook/assets/card.stories-v_QIHoI3.js +1 -0
- package/dist/storybook/assets/{casing-loads.stories-ee6r2j2Q.js → casing-loads.stories-xqjG7_uN.js} +2 -2
- package/dist/storybook/assets/cell.stories-SsCpOpZw.js +212 -0
- package/dist/storybook/assets/{check-box-LZdXXKhv.js → check-box-7DccPNCs.js} +1 -1
- package/dist/storybook/assets/{check-box.stories-0XCykxnz.js → check-box.stories-QBPARD7M.js} +2 -2
- package/dist/storybook/assets/{chunk-HLWAVYOI-53hWDdvc.js → chunk-HLWAVYOI-HfFAKSRB.js} +1 -1
- package/dist/storybook/assets/color-RZTO_BH4.js +25 -0
- package/dist/storybook/assets/{column.stories-6OLsjlcP.js → column.stories-FWqVDX5B.js} +4 -4
- package/dist/storybook/assets/{dialog-WKHRZcjc.js → dialog-e8amLd6m.js} +1 -1
- package/dist/storybook/assets/{drawer-WuErQ5Z8.js → drawer-LFjap9lP.js} +1 -1
- package/dist/storybook/assets/{drawer.stories-ezk4vO0w.js → drawer.stories-liH4UlvJ.js} +4 -4
- package/dist/storybook/assets/empty.stories-quAOsHNV.js +1 -0
- package/dist/storybook/assets/{field-eknsj_Ll.js → field-9udMeZdr.js} +1 -1
- package/dist/storybook/assets/{field.stories-RmhJ16HT.js → field.stories-H98nslNw.js} +2 -2
- package/dist/storybook/assets/file-input.stories-WyK9TFKC.js +66 -0
- package/dist/storybook/assets/{flex-3eLDDUyy.js → flex-ZVra76N-.js} +1 -1
- package/dist/storybook/assets/{flex.stories-_VBDAVzN.js → flex.stories-JzmT6lSO.js} +2 -2
- package/dist/storybook/assets/footer.stories-wPp58LMn.js +3 -0
- package/dist/storybook/assets/form.stories-RMbO5qjE.js +49 -0
- package/dist/storybook/assets/formation.stories-0fppcLax.js +74 -0
- package/dist/storybook/assets/{formatter-SWP5E3XI-TLomX0jS.js → formatter-SWP5E3XI-s19u3emO.js} +1 -1
- package/dist/storybook/assets/{heading-Bk0bpNfe.js → heading-sY0SLHoQ.js} +1 -1
- package/dist/storybook/assets/{heading.stories-DmZLaZJb.js → heading.stories-hnhUBXVe.js} +2 -2
- package/dist/storybook/assets/{help-icon--rUDxLUD.js → help-icon-yrJgkgdC.js} +1 -1
- package/dist/storybook/assets/help-icon.stories-gjzAU_pF.js +4 -0
- package/dist/storybook/assets/hoist-non-react-statics.cjs-pnyno-Dk.js +8 -0
- package/dist/storybook/assets/{icon-y1a2N5SZ.js → icon-_m67DAr0.js} +3 -3
- package/dist/storybook/assets/icon.stories-vAvCbxZP.js +6 -0
- package/dist/storybook/assets/iframe-uF49rd0M.js +7 -0
- package/dist/storybook/assets/{index-0dxTfrBP.js → index-oLFGkfb-.js} +5 -5
- package/dist/storybook/assets/index.es-LXZC0YVN.js +79 -0
- package/dist/storybook/assets/{input-group.stories-WljyIQ0a.js → input-group.stories-zQ6b9scC.js} +2 -2
- package/dist/storybook/assets/{input-u1He-wWs.js → input-iDZqV-2m.js} +1 -1
- package/dist/storybook/assets/{input-validation-jCRmk_jl.js → input-validation-lIx2JTiW.js} +2 -2
- package/dist/storybook/assets/{input.stories-rLdDRxtU.js → input.stories-iopguZKB.js} +1 -1
- package/dist/storybook/assets/{inputs-ZpY3-Ny4.js → inputs-ubhN8jR5.js} +14 -14
- package/dist/storybook/assets/{label-0_Qf6I8t.js → label-J7MI85wD.js} +1 -1
- package/dist/storybook/assets/label.stories-kmvMrgz2.js +11 -0
- package/dist/storybook/assets/{layout-forms-tcQfdK2L.js → layout-forms-R_iC_SeZ.js} +4 -4
- package/dist/storybook/assets/{layout-general-bz1oHjNF.js → layout-general-2sM6LsZn.js} +2 -2
- package/dist/storybook/assets/list-1fS-ZLaF.js +8 -0
- package/dist/storybook/assets/{list-heading-Vd3hu5Pf.js → list-heading-vbaXVA9N.js} +1 -1
- package/dist/storybook/assets/{list.stories-data-9RrIjRci.js → list.stories-data-tBKSPg9P.js} +1 -1
- package/dist/storybook/assets/list.stories-maVHoPyy.js +478 -0
- package/dist/storybook/assets/{loader.stories-0OwmnNML.js → loader.stories-9Tv8nlOO.js} +2 -2
- package/dist/storybook/assets/{menu.stories-data-l5rlcD9_.js → menu.stories-data-VCYkzuDD.js} +1 -1
- package/dist/storybook/assets/{menu.stories-5G4phywO.js → menu.stories-iE1tUnCd.js} +2 -2
- package/dist/storybook/assets/{message-uMHaTEXV.js → message-p9VAXLNZ.js} +1 -1
- package/dist/storybook/assets/{message.stories-CDgUaLZP.js → message.stories-34ul5gSz.js} +2 -2
- package/dist/storybook/assets/{modal.stories-15sY1c5H.js → modal.stories-RMMVeIMK.js} +2 -2
- package/dist/storybook/assets/{number-input-SvjJIGsW.js → number-input-d7hXQldd.js} +1 -1
- package/dist/storybook/assets/{number-input.stories-BURENIFo.js → number-input.stories-477qVsQF.js} +2 -2
- package/dist/storybook/assets/objectWithoutPropertiesLoose-9Q1jwsKS.js +1 -0
- package/dist/storybook/assets/option-dropdown.stories-NRogMOtD.js +21 -0
- package/dist/storybook/assets/{padding-and-spacing-dSuzf2dz.js → padding-and-spacing-_thODzSW.js} +1 -1
- package/dist/storybook/assets/page.stories-qo9KEiWt.js +57 -0
- package/dist/storybook/assets/{pagination-5n5spTRo.js → pagination-qKZAUHlD.js} +1 -1
- package/dist/storybook/assets/{pagination.stories-g4a-aSxq.js → pagination.stories-tRiEpkH6.js} +2 -2
- package/dist/storybook/assets/pop-confirm.stories-aFXfbsuI.js +9 -0
- package/dist/storybook/assets/{popover-Y3FpGdUS.js → popover-GnGIPc9x.js} +1 -1
- package/dist/storybook/assets/popover.stories-zzxDYG13.js +1 -0
- package/dist/storybook/assets/{preview-xbxc--KY.js → preview-FRdqQg8W.js} +3 -3
- package/dist/storybook/assets/{preview-8q_cpMjL.js → preview-eDFlm4aX.js} +2 -2
- package/dist/storybook/assets/projects.stories-mDHzd2Nc.js +47 -0
- package/dist/storybook/assets/{radio-button-jHcwHUA4.js → radio-button-T38JdN-I.js} +1 -1
- package/dist/storybook/assets/{radio-button.stories-LkCJsp5P.js → radio-button.stories-MbtUJQ4_.js} +5 -5
- package/dist/storybook/assets/react-router-dom-2JKSc1g5.js +8 -0
- package/dist/storybook/assets/{reservoirs.stories-CtIlcj-X.js → reservoirs.stories-ttnZYnPz.js} +2 -2
- package/dist/storybook/assets/{rich-text-input.stories-7UzvJ-A1.js → rich-text-input.stories-OiAxLAVQ.js} +3 -3
- package/dist/storybook/assets/{row.stories-uPD-qTX2.js → row.stories-8AoB-Dlf.js} +2 -2
- package/dist/storybook/assets/{select-JjEPivho.js → select-0hek2Baz.js} +1 -1
- package/dist/storybook/assets/{select.stories-qFDyxRFm.js → select.stories-tCGanTNP.js} +2 -2
- package/dist/storybook/assets/{side-bar-Fjr2t9MT.js → side-bar-0iIgujp4.js} +1 -1
- package/dist/storybook/assets/side-bar.stories-v7wWMQcv.js +1 -0
- package/dist/storybook/assets/{site.stories-UH3PK5eu.js → site.stories-2PTp7gw0.js} +2 -2
- package/dist/storybook/assets/{slider-nl2rJ9LF.js → slider-t5EokN-o.js} +2 -2
- package/dist/storybook/assets/{slider.stories--aZa8kf-.js → slider.stories-Knk-d29_.js} +4 -4
- package/dist/storybook/assets/spacer.stories--6Lac6Fz.js +1 -0
- package/dist/storybook/assets/{syntaxhighlighter-NMPM6SWI-1xSal2rv.js → syntaxhighlighter-NMPM6SWI-y1MAbcc6.js} +1 -1
- package/dist/storybook/assets/table-o1Zuxe0v.js +1 -0
- package/dist/storybook/assets/{table.stories-GrJ75DyI.js → table.stories-K2LI80yY.js} +2 -2
- package/dist/storybook/assets/{table.stories-data-9XfBJddg.js → table.stories-data-tHq-3JM9.js} +1 -1
- package/dist/storybook/assets/text-link.stories-sfurduAc.js +14 -0
- package/dist/storybook/assets/{textarea-u-nirfI6.js → textarea-QFVBH_vb.js} +1 -1
- package/dist/storybook/assets/{textarea.stories-Hl-oeUWU.js → textarea.stories-HETiaNLn.js} +1 -1
- package/dist/storybook/assets/{title.stories-RyQ9x-ug.js → title.stories-waT6sG0P.js} +3 -3
- package/dist/storybook/assets/{toaster-eOozfa7U.js → toaster-bqqWcltU.js} +1 -1
- package/dist/storybook/assets/{toaster.stories--z_U2gRN.js → toaster.stories-oExX0THb.js} +2 -2
- package/dist/storybook/assets/{toggle-BPI2y-lU.js → toggle-b0PkHQDl.js} +1 -1
- package/dist/storybook/assets/{toggle.stories-HiGs6slZ.js → toggle.stories-wWcYddEt.js} +2 -2
- package/dist/storybook/assets/{tooltip-HEHiU__l.js → tooltip-ZHdi6rl-.js} +1 -1
- package/dist/storybook/assets/{tooltip.stories-tiOgoWHH.js → tooltip.stories-gTfOeEzv.js} +1 -1
- package/dist/storybook/assets/tooltip.test-case.stories-8mCQYXFD.js +3 -0
- package/dist/storybook/assets/{top-bar-3dxv0sp9.js → top-bar-odjinr_b.js} +1 -1
- package/dist/storybook/assets/top-bar.stories-Q3tcZHmc.js +1 -0
- package/dist/storybook/assets/top-bar.testcase.stories-85g2VfLi.js +30 -0
- package/dist/storybook/assets/{tree.stories-_5t-Rrls.js → tree.stories-vNmT3unc.js} +3 -3
- package/dist/storybook/assets/unit-input.stories-OL_uzjER.js +273 -0
- package/dist/storybook/iframe.html +1 -1
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/dist/storybook/stories.json +1 -1
- package/package.json +2 -1
- package/dist/404.html +0 -1
- package/dist/storybook/assets/actions.stories-Qrio9EMy.js +0 -1
- package/dist/storybook/assets/afe.stories-u2K3NwaR.js +0 -88
- package/dist/storybook/assets/badge.stories-C0MXS15j.js +0 -1
- package/dist/storybook/assets/blowout.stories-BXWf5R9h.js +0 -40
- package/dist/storybook/assets/button-7V8oA22w.js +0 -1
- package/dist/storybook/assets/button.stories-f6VcbEgi.js +0 -71
- package/dist/storybook/assets/card.stories-HzHJW6ek.js +0 -1
- package/dist/storybook/assets/cell.stories-y081eSUk.js +0 -208
- package/dist/storybook/assets/color-LlgCLGE5.js +0 -25
- package/dist/storybook/assets/empty.stories-lva3DbfI.js +0 -1
- package/dist/storybook/assets/file-input.stories-6NjWeNyC.js +0 -66
- package/dist/storybook/assets/footer.stories-m5VFK6Bo.js +0 -3
- package/dist/storybook/assets/form.stories-z3f6tVdU.js +0 -49
- package/dist/storybook/assets/formation.stories-KUe50fTQ.js +0 -74
- package/dist/storybook/assets/help-icon.stories-vifwJgNA.js +0 -4
- package/dist/storybook/assets/icon.stories-h0hheUmg.js +0 -6
- package/dist/storybook/assets/iframe-ujjJUTtn.js +0 -7
- package/dist/storybook/assets/index.es-JXn3JM7k.js +0 -86
- package/dist/storybook/assets/label.stories-aXdU5_Ql.js +0 -11
- package/dist/storybook/assets/list-8l-RGDgw.js +0 -8
- package/dist/storybook/assets/list.stories-uR6izjvO.js +0 -457
- package/dist/storybook/assets/option-dropdown.stories-Q2zd2AcS.js +0 -21
- package/dist/storybook/assets/page.stories-9XUTUblI.js +0 -57
- package/dist/storybook/assets/pop-confirm.stories-_agvSFJd.js +0 -9
- package/dist/storybook/assets/popover.stories-bWBLR9fB.js +0 -1
- package/dist/storybook/assets/projects.stories-84p22lkF.js +0 -47
- package/dist/storybook/assets/side-bar.stories-0_pud_bN.js +0 -1
- package/dist/storybook/assets/spacer.stories-bgTBb3VB.js +0 -1
- package/dist/storybook/assets/table-lfeSnryj.js +0 -1
- package/dist/storybook/assets/text-link.stories-kjfUeFtk.js +0 -1
- package/dist/storybook/assets/tooltip.test-case.stories-3T_tzhJs.js +0 -3
- package/dist/storybook/assets/top-bar.stories-sMvXnmhR.js +0 -1
- package/dist/storybook/assets/top-bar.testcase.stories-Nb8fdPBS.js +0 -30
- package/dist/storybook/assets/unit-input.stories-u823izRm.js +0 -273
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r,C as n}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r,C as n}from"./index-oLFGkfb-.js";import{Center as d,SpaceBetween as a,JustifyEnd as c,Column as l}from"./flex.stories-JzmT6lSO.js";import{Default as h,CustomColumnWidth as p,DefaultGap as x,CustomGap as m,Responsive as j}from"./grid.stories-hPfW-CxX.js";import{Default as u,FixedWidth as f,NoPadding as g,ResponsiveWidth as w}from"./column.stories-FWqVDX5B.js";import{useMDXComponents as s}from"./index-4YXVTraW.js";import"./index-RfLt4OUa.js";import"./iframe-uF49rd0M.js";import"../sb-preview/runtime.js";import"./index-miLrID2P.js";import"./extends-dGVwEr9R.js";import"./assertThisInitialized-4q6YPdh3.js";import"./inheritsLoose-Y9jOMJLd.js";import"./index-gM75B7fB.js";import"./flex-ZVra76N-.js";import"./button-qfybxFqE.js";import"./index-VW3EWkuE.js";import"./common-types-U65vzrrz.js";import"./disabled-context-urNQThQz.js";import"./spinner-R8Il4aRe.js";import"./icon-_m67DAr0.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./tooltip-ZHdi6rl-.js";import"./text-6KQ6ntOV.js";import"./grid-u1mZpaML.js";import"./styled-components.browser.esm-qIipjd6c.js";import"./card-0r8RRVk-.js";import"./row-vFUhHoz5.js";import"./heading-sY0SLHoQ.js";import"./help-icon-yrJgkgdC.js";function t(i){const o=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code",h3:"h3"},s(),i.components);return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Layout (General)"}),`
|
|
2
2
|
`,e.jsx(o.h1,{id:"layout-general",children:"Layout (General)"}),`
|
|
3
3
|
`,e.jsx(o.h2,{id:"flex",children:"Flex"}),`
|
|
4
4
|
`,e.jsxs(o.p,{children:["The ",e.jsx(o.code,{children:"Flex"})," component is a basic flexbox wrapper with optional props for ",e.jsx(o.code,{children:"alignItems"}),", ",e.jsx(o.code,{children:"justifyContent"})," and ",e.jsx(o.code,{children:"flexDirection"}),". This is a conveninent way to center items vertically and/or horizontally, to align them to opposite edges, or align them to the far side."]}),`
|
|
@@ -32,4 +32,4 @@ import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r,C as n}from"./index-
|
|
|
32
32
|
`,e.jsx(n,{of:g}),`
|
|
33
33
|
`,e.jsx(o.h3,{id:"responsive",children:"Responsive"}),`
|
|
34
34
|
`,e.jsxs(o.p,{children:["To change the layout on smaller devices, you can set props for ",e.jsx(o.code,{children:"widthTablet"})," (up to 992px wide) and/or ",e.jsx(o.code,{children:"widthMobile"})," (up to 575px wide)."]}),`
|
|
35
|
-
`,e.jsx(n,{of:w})]})}function
|
|
35
|
+
`,e.jsx(n,{of:w})]})}function V(i={}){const{wrapper:o}=Object.assign({},s(),i.components);return o?e.jsx(o,Object.assign({},i,{children:e.jsx(t,i)})):t(i)}export{V as default};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{r as o}from"./index-RfLt4OUa.js";import{c as V}from"./index-VW3EWkuE.js";import{P as ae,D as ne,C as re,I as te}from"./index.es-LXZC0YVN.js";import{C as le}from"./card-0r8RRVk-.js";import{s as r,N as se,M as ie,L as oe}from"./list-heading-vbaXVA9N.js";import{I as k}from"./common-types-U65vzrrz.js";import{D as B}from"./disabled-context-urNQThQz.js";import{A as G}from"./actions--jdeAagr.js";import{B as F}from"./badge-23Ty_zBt.js";import{I as w}from"./icon-_m67DAr0.js";import{L as ce}from"./loader-TGOJBZQG.js";const E=({label:a})=>a?e.jsx("span",{className:r.label,children:e.jsx(F,{color:a.color,title:a.value,small:a.small})}):null;try{E.displayName="Label",E.__docgenInfo={description:"",displayName:"Label",props:{label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"ILabel"}}}}}catch{}const L=({item:a})=>a.metaCount!==void 0?e.jsx(F,{color:"rgba(0,0,0,0.25)",title:a.metaCount}):null;try{L.displayName="MetaCount",L.__docgenInfo={description:"",displayName:"MetaCount",props:{item:{defaultValue:null,description:"",name:"item",required:!0,type:{name:"{ metaCount?: number | undefined; }"}}}}}catch{}const R=({item:a,expanding:i})=>{const c=d=>{d.preventDefault(),d.stopPropagation()};return i&&a.active&&a.content?e.jsx("div",{className:r.itemContent,onClick:c,children:a.content}):null};try{R.displayName="ItemContent",R.__docgenInfo={description:"",displayName:"ItemContent",props:{item:{defaultValue:null,description:"",name:"item",required:!0,type:{name:"{ active?: boolean | undefined; content?: ReactNode; }"}},expanding:{defaultValue:null,description:"",name:"expanding",required:!1,type:{name:"boolean"}}}}}catch{}const M=o.forwardRef(({item:a,index:i},c)=>{const d=o.useContext(B),{actions:_,disabled:u,expanded:g,onClick:b,title:t,name:s,icon:n,testId:p}=a;return e.jsx("div",{ref:f=>{c&&"current"in c&&Array.isArray(c.current)&&i!==void 0&&(c.current[i]=f)},"data-testid":p??null,className:V(r.item,r.heading,u||d?r.disabled:"",b?r.action:""),onClick:f=>{b&&b(f)},title:t,children:e.jsx("div",{children:e.jsxs("div",{className:r.itemHeader,children:[typeof g=="boolean"&&e.jsx("div",{className:V(r.expandIcon,g&&r.expanded),children:e.jsx(w,{icon:k.CHEVRON_RIGHT})}),e.jsx(se,{name:s,icon:n}),e.jsxs("div",{className:r.right,children:[e.jsx(L,{item:a}),!(u||d)&&_&&e.jsx("div",{className:r.actions,children:e.jsx(G,{actions:a.actions??[]})})]})]})})})});try{M.displayName="ListSubheading",M.__docgenInfo={description:"",displayName:"ListSubheading",props:{item:{defaultValue:null,description:"",name:"item",required:!0,type:{name:"IListSubheadingItem"}},index:{defaultValue:null,description:"",name:"index",required:!1,type:{name:"number"}}}}}catch{}const de=(a,i)=>a?{cursor:i.cursor?i.cursor:"",...a.style}:null,H=o.forwardRef(({items:a,expanding:i,invokeEditOnRowClick:c,provided:d,draggable:_},u)=>{const g=o.useContext(B),b=(t,s,n,p,f,y)=>{const h=n.component||"a";return o.createElement(h,{href:n.url,to:n.url,ref:s==null?void 0:s.innerRef,...s.draggableProps,style:de(s.draggableProps,n),className:V(r.item,n.active?r.active:"",n.disabled||g?r.disabled:"",f?r.action:""),onClick:m=>{if(c&&y&&y.onClick&&y.onClick(m,n.id),n.onClick)return n.onClick(m)},key:t,"data-id":t,title:n.title,"data-testid":n.testId},e.jsxs("div",{ref:m=>{u&&"current"in u&&Array.isArray(u.current)&&t!==void 0&&(u.current[t]=m)},style:{paddingLeft:p},children:[e.jsxs("div",{className:r.itemHeader,children:[_&&e.jsx("div",{className:r.drag,...s.dragHandleProps,children:e.jsx(w,{icon:k.DRAG})}),n.level&&n.level>0?e.jsx("div",{className:r.indentIcon,children:e.jsx(w,{icon:k.INDENT})}):null,e.jsx(E,{label:n.label}),e.jsx(ie,{item:n}),e.jsxs("div",{className:r.right,children:[e.jsx(L,{item:n}),!(n.disabled||g)&&n.actions&&e.jsx("div",{className:r.actions,children:e.jsx(G,{actions:n.actions})})]})]}),e.jsx(R,{item:n,expanding:i})]}))};return e.jsxs(e.Fragment,{children:[a.map((t,s)=>{const n=t.type==="Heading",p=t.actions&&t.actions.find(h=>{var m;return h.label&&((m=String(h.label))==null?void 0:m.toLowerCase())==="edit"}),f=!!(p||t.url||t.onClick),y=t.level&&t.level>1?(t.level-1)*20:0;return n?e.jsx(M,{ref:u,item:t,index:s},s):_?e.jsx(ae,{draggableId:t.id+"",index:s,children:h=>b(s,h,t,y,f,p)},t.id):b(s,d,t,y,f,p)}),d.placeholder]})});try{H.displayName="ListRow",H.__docgenInfo={description:"",displayName:"ListRow",props:{draggable:{defaultValue:null,description:"",name:"draggable",required:!1,type:{name:"boolean"}},onListReorder:{defaultValue:null,description:"",name:"onListReorder",required:!1,type:{name:"((args: { from?: number; to?: number; }) => void) | undefined"}},expanding:{defaultValue:null,description:"",name:"expanding",required:!1,type:{name:"boolean"}},invokeEditOnRowClick:{defaultValue:null,description:"",name:"invokeEditOnRowClick",required:!1,type:{name:"boolean"}},snapshot:{defaultValue:null,description:"",name:"snapshot",required:!1,type:{name:"DroppableStateSnapshot"}},provided:{defaultValue:null,description:"",name:"provided",required:!1,type:{name:"any"}},items:{defaultValue:null,description:"",name:"items",required:!0,type:{name:"IListItem[]"}}}}}catch{}const P=({list:a,bordered:i=!1,expanding:c=!1,narrow:d=!1,toggleNarrow:_=!1,onToggleNarrow:u=()=>{},invokeEditOnRowClick:g=!0,noHeader:b=!1,stickyHeader:t,draggable:s=!1,onListReorder:n=()=>{},marginBottom:p=0,height:f,testId:y,scrollDetails:h={scrollable:!1,hideScrollbar:!1,triggerScrollToActiveItem:!1,infiniteScroll:!1,limit:10,infiniteScrollTarget:void 0}})=>{const{scrollable:m,hideScrollbar:z,triggerScrollToActiveItem:T,infiniteScroll:A,infiniteScrollTarget:J}=h,v=o.useRef(null),I=o.useRef([]),j=o.useRef(null),O=A?Math.ceil(window.innerHeight/44):a.items.length,[N,K]=o.useState(O),[Q,U]=o.useState(N<(a==null?void 0:a.items.length));o.useEffect(()=>{I.current=I.current.slice(0,a.items.length)},[a.items.length]);const W=()=>{if(N>=a.items.length){U(!1);return}const l=O+N;K(l)},X=l=>l.findIndex(x=>x.active===!0),Y=l=>{if(!j.current||!v.current)return;const x=1;if(T&&l>=0){const D=I.current.reduce((S,$,ee)=>ee<l?S+$.clientHeight+x:S,0),q=j.current.clientHeight/2-I.current[l].clientHeight/2,C=D-q;if(t){const S=v.current.clientHeight/2;j.current.scrollTop=C+S}const Z=v.current.clientHeight;j.current.scrollTop=C+Z}};return o.useEffect(()=>{if(T){const l=X(a==null?void 0:a.items);Y(l)}},[j.current,v.current,T]),e.jsx(ne,{onDragEnd:l=>{var q,C;const x=(q=l==null?void 0:l.source)==null?void 0:q.index,D=(C=l==null?void 0:l.destination)==null?void 0:C.index;n({from:x,to:D})},children:e.jsx(re,{droppableId:"droppable",children:(l,x)=>e.jsx("div",{className:V(d?r.narrow:"",m?r.scrollableList:"",z?r.hideScrollbar:""),"data-testid":y,id:"scrollableDiv",style:{height:f,marginBottom:p},ref:j,children:e.jsx("div",{ref:l.innerRef,...l.droppableProps,children:e.jsxs(le,{bordered:i,padding:!1,children:[!b&&e.jsx(oe,{name:a.name,actions:a.actions,toggleNarrow:_,onToggleNarrow:u,stickyHeader:t,ref:v}),e.jsx("div",{className:V(r.list,i?r.bordered:""),children:A?e.jsx(te,{dataLength:N,next:W,hasMore:Q,scrollableTarget:J||"scrollableDiv",loader:e.jsx(ce,{}),className:r.infiniteScrollContainer,children:e.jsx(H,{draggable:s,items:a.items.slice(0,N),expanding:c,invokeEditOnRowClick:g,onListReorder:n,provided:l,snapshot:x,ref:I})}):e.jsx(H,{draggable:s,items:a.items,expanding:c,invokeEditOnRowClick:g,onListReorder:n,provided:l,snapshot:x,ref:I})})]})})})})})};try{P.displayName="List",P.__docgenInfo={description:"",displayName:"List",props:{drawer:{defaultValue:null,description:"",name:"drawer",required:!1,type:{name:"boolean"}},list:{defaultValue:null,description:"",name:"list",required:!0,type:{name:"IListData"}},bordered:{defaultValue:{value:"false"},description:"",name:"bordered",required:!1,type:{name:"boolean"}},expanding:{defaultValue:{value:"false"},description:"",name:"expanding",required:!1,type:{name:"boolean"}},narrow:{defaultValue:{value:"false"},description:"",name:"narrow",required:!1,type:{name:"boolean"}},toggleNarrow:{defaultValue:{value:"false"},description:"",name:"toggleNarrow",required:!1,type:{name:"boolean"}},onToggleNarrow:{defaultValue:{value:"() => {}"},description:"",name:"onToggleNarrow",required:!1,type:{name:"TEmpty"}},invokeEditOnRowClick:{defaultValue:{value:"true"},description:"",name:"invokeEditOnRowClick",required:!1,type:{name:"boolean"}},noHeader:{defaultValue:{value:"false"},description:"",name:"noHeader",required:!1,type:{name:"boolean"}},stickyHeader:{defaultValue:null,description:"",name:"stickyHeader",required:!1,type:{name:"boolean"}},draggable:{defaultValue:{value:"false"},description:"",name:"draggable",required:!1,type:{name:"boolean"}},onListReorder:{defaultValue:{value:"() => {}"},description:"",name:"onListReorder",required:!1,type:{name:"((args: IReorderData) => void)"}},marginBottom:{defaultValue:{value:"0"},description:"",name:"marginBottom",required:!1,type:{name:"string | number"}},height:{defaultValue:null,description:"",name:"height",required:!1,type:{name:"string | number"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}},scrollDetails:{defaultValue:{value:`{
|
|
2
|
+
scrollable: false,
|
|
3
|
+
hideScrollbar: false,
|
|
4
|
+
triggerScrollToActiveItem: false,
|
|
5
|
+
infiniteScroll: false,
|
|
6
|
+
limit: 10,
|
|
7
|
+
infiniteScrollTarget: undefined,
|
|
8
|
+
}`},description:"",name:"scrollDetails",required:!1,type:{name:"IScrollDetails"}}}}}catch{}export{P as L,M as a};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{B as j}from"./badge-23Ty_zBt.js";import{c as u}from"./index-VW3EWkuE.js";import{I as g}from"./icon-
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{B as j}from"./badge-23Ty_zBt.js";import{c as u}from"./index-VW3EWkuE.js";import{I as g}from"./icon-_m67DAr0.js";import{T as v}from"./tooltip-ZHdi6rl-.js";import{r as f}from"./index-RfLt4OUa.js";import{I as N}from"./common-types-U65vzrrz.js";import{H as y}from"./heading-sY0SLHoQ.js";import{A as h}from"./actions--jdeAagr.js";const x="_inputInTable_j55lv_1",b="_inputHover_j55lv_13",I="_inputFocus_j55lv_18",T="_inputError_j55lv_25",w="_inputWarning_j55lv_26",H="_inputDisabled_j55lv_61",C="_hideScrollbars_j55lv_67",V="_header_j55lv_77",q="_headerTitle_j55lv_77",R="_heading_j55lv_78",E="_itemHeader_j55lv_78",k="_narrow_j55lv_81",M="_stickyHeader_j55lv_85",S="_title_j55lv_96",L="_name_j55lv_102",F="_iconTooltipMargin_j55lv_105",W="_bold_j55lv_108",$="_toggleNarrow_j55lv_117",B="_drag_j55lv_135",D="_list_j55lv_155",A="_bordered_j55lv_159",J="_item_j55lv_78",O="_action_j55lv_192",P="_active_j55lv_195",X="_indented_j55lv_202",z="_disabled_j55lv_215",G="_label_j55lv_226",K="_details_j55lv_237",Q="_metadata_j55lv_238",U="_itemContent_j55lv_246",Y="_indentIcon_j55lv_253",Z="_expandIcon_j55lv_258",ee="_expanded_j55lv_265",te="_right_j55lv_268",ae="_actions_j55lv_276",ne="_scrollableList_j55lv_281",oe="_infiniteScrollContainer_j55lv_286",re="_hideScrollbar_j55lv_67",n={inputInTable:x,inputHover:b,inputFocus:I,inputError:T,inputWarning:w,inputDisabled:H,hideScrollbars:C,header:V,headerTitle:q,heading:R,itemHeader:E,narrow:k,stickyHeader:M,title:S,name:L,iconTooltipMargin:F,bold:W,toggleNarrow:$,drag:B,list:D,bordered:A,item:J,action:O,active:P,indented:X,disabled:z,label:G,details:K,metadata:Q,itemContent:U,indentIcon:Y,expandIcon:Z,expanded:ee,right:te,actions:ae,scrollableList:ne,infiniteScrollContainer:oe,hideScrollbar:re},c=({name:a,icon:t,testId:l})=>{const o=t&&e.jsx(g,{icon:t.icon,color:t.color||"#db2828"});return e.jsxs("span",{className:u(n.name,n.bold),"data-testid":l,children:[a,t&&t.tooltip&&t.tooltip.text?e.jsx("span",{className:n.iconTooltipMargin,children:e.jsx(v,{text:t.tooltip.text,maxWidth:"350px",children:o})}):t&&t.icon&&e.jsx("span",{className:n.iconTooltipMargin,children:o})]})};try{c.displayName="Name",c.__docgenInfo={description:"",displayName:"Name",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"ReactNode"}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"{ icon: ReactNode; color?: string; tooltip?: { text: ReactNode; }; } | undefined"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}try{name.displayName="name",name.__docgenInfo={description:"",displayName:"name",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"ReactNode"}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"{ icon: ReactNode; color?: string; tooltip?: { text: ReactNode; }; } | undefined"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const p=({item:a})=>{const{name:t,icon:l,details:o,metadata:i,invalid:s,testId:r}=a;let d=e.jsx(c,{name:t,icon:l,testId:r&&`${r}-name`});return s&&(d=e.jsx(j,{small:!0,margin:"-2px",title:"!",children:d})),e.jsxs("span",{className:n.title,children:[d,o&&e.jsx("span",{className:n.details,"data-testid":r&&`${r}-details`,children:o}),i&&e.jsx("span",{className:n.metadata,"data-testid":r&&`${r}-metadata`,children:i})]})};try{p.displayName="MetaContent",p.__docgenInfo={description:"",displayName:"MetaContent",props:{item:{defaultValue:null,description:"",name:"item",required:!0,type:{name:"IMetaContentItem"}}}}}catch{}const _=({toggleNarrow:a,onClickToggleNarrow:t})=>a?e.jsx("a",{className:n.toggleNarrow,onClick:t,children:e.jsx(g,{icon:N.CHEVRON_LEFT})}):null;try{_.displayName="ToggleNarrow",_.__docgenInfo={description:"",displayName:"ToggleNarrow",props:{toggleNarrow:{defaultValue:null,description:"",name:"toggleNarrow",required:!1,type:{name:"boolean"}},onClickToggleNarrow:{defaultValue:null,description:"",name:"onClickToggleNarrow",required:!1,type:{name:"TEmpty"}}}}}catch{}const m=f.forwardRef(({name:a,actions:t=[],toggleNarrow:l=!1,onToggleNarrow:o=()=>{},stickyHeader:i},s)=>e.jsxs("div",{ref:s,className:u(n.header,i?n.stickyHeader:""),children:[e.jsx(_,{toggleNarrow:l,onClickToggleNarrow:o}),a&&e.jsx("div",{className:n.headerTitle,children:e.jsx(y,{top:!0,marginBottom:0,children:a})}),e.jsx("div",{className:n.right,children:e.jsx("div",{className:n.actions,children:e.jsx(h,{actions:t})})})]}));try{m.displayName="ListHeading",m.__docgenInfo={description:"",displayName:"ListHeading",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined"}},actions:{defaultValue:{value:"[]"},description:"",name:"actions",required:!1,type:{name:"any[]"}},toggleNarrow:{defaultValue:{value:"false"},description:"",name:"toggleNarrow",required:!1,type:{name:"boolean"}},onToggleNarrow:{defaultValue:{value:"() => {}"},description:"",name:"onToggleNarrow",required:!1,type:{name:"TEmpty"}},stickyHeader:{defaultValue:null,description:"",name:"stickyHeader",required:!1,type:{name:"boolean"}}}}}catch{}export{m as L,p as M,c as N,n as s};
|
package/dist/storybook/assets/{list.stories-data-9RrIjRci.js → list.stories-data-tBKSPg9P.js}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-FsUICBgo.js";import{I as i,T as c}from"./common-types-U65vzrrz.js";import{F as o}from"./flex-
|
|
1
|
+
import{j as t}from"./jsx-runtime-FsUICBgo.js";import{I as i,T as c}from"./common-types-U65vzrrz.js";import{F as o}from"./flex-ZVra76N-.js";import{M as d}from"./actions--jdeAagr.js";import{I as n}from"./icon-_m67DAr0.js";import{M as l}from"./types-VB5zD18b.js";const a=[{id:1,name:"Aardvark"},{id:2,name:"Kangaroo",active:!0},{id:3,name:"Jaguar",disabled:!0}],p=[{id:1,name:"Marsupials",type:"Heading",metaCount:1},{id:2,name:"Aardvark"},{id:3,name:"Kangaroo",active:!0},{id:4,name:"Mammals",type:"Heading",metaCount:1},{id:5,name:"Jaguar"}],g=[{id:1,name:"Aardvark"},{id:2,name:"Kangaroo",active:!0},{id:3,name:"Grey",level:1},{id:4,name:"Eastern",level:2},{id:5,name:"Macropus giganteus giganteus",title:"Macropus giganteus giganteus",level:3},{id:6,name:"Macropus giganteus tasmaniensis",title:"Macropus giganteus tasmaniensis",level:3},{id:7,name:"Western",level:2},{id:8,name:"Red",level:1},{id:9,name:"Jaguar"}],h={items:a},r={name:"Animals",actions:[{label:"More",subActions:[{label:"Item",icon:"up",onClick:()=>{}},{label:"Item",icon:"down",onClick:()=>{}}]},{label:"Add",primary:!0,icon:"add",onClick:()=>{}}],items:a},m={...r,items:p},A={...r,name:t.jsxs(o,{gap:"var(--padding-xs)",alignItems:"center",children:["Animals",t.jsx(n,{icon:i.STAR})]}),items:a.map(e=>({...e,name:t.jsxs(o,{gap:"var(--padding-xs)",alignItems:"center",children:[e.name,t.jsx(n,{icon:i.STAR})]})}))};a.map(e=>({...e,actions:[{childComponent:t.jsx(d,{menu:{trigger:c.COMPONENT,component:t.jsx(n,{icon:i.MENU}),placement:"bottom-end",sections:[{type:l.OPTION,label:"Item",onClick:()=>{}},{type:l.OPTION,label:"Item",onClick:()=>{}}]}})}]}));const C={items:a.map(e=>({...e,actions:[{label:"More",subActions:[{label:"Move Up",icon:"up",onClick:()=>{}},{label:"Move Down",icon:"down",onClick:()=>{}}]}]}))},k={items:a.map((e,s)=>({...e,label:{value:String(s+1),color:"var(--color-text-info)"}}))},j={items:a.map(e=>({...e,label:{value:t.jsx(t.Fragment,{children:" "}),color:"var(--color-text-info)",small:!0}}))},T={...m,items:m.items.map((e,s)=>({...e,label:{value:String(s+1),color:"var(--color-text-info)"}}))},f={items:a.map(e=>({...e,actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]}))},y={items:a.map((e,s)=>({...e,details:"Description goes here",metadata:"2019-05-03 09:03:51",testId:`story-list-item-${s}`}))},S={items:a.map(e=>({...e,content:t.jsx("div",{children:"Example content element (for show/hide)."})}))},N={items:g},E={items:[...a,{id:4,name:"Dodo",invalid:!0}]},O={items:a.map(e=>({...e,icon:{icon:"success",color:"var(--color-text-success)",tooltip:{text:t.jsx(t.Fragment,{children:"Tooltip goes here"})}}}))},D={items:a.map(e=>({...e,metaCount:3}))},w={name:"Animals",items:[...Array(50)].map((e,s)=>({id:s,name:`Aardvark #${s+1}`}))};export{f as a,C as b,y as c,S as d,r as e,k as f,j as g,N as h,E as i,A as j,O as k,h as l,D as m,w as n,T as o};
|
|
@@ -0,0 +1,478 @@
|
|
|
1
|
+
import{j as s}from"./jsx-runtime-FsUICBgo.js";import{r as B}from"./index-RfLt4OUa.js";import{f as x}from"./immer.esm-bD7SSJ7T.js";import{H as on,S as dn,R as z,L as G}from"./react-router-dom-2JKSc1g5.js";import{L as y,a as P}from"./list-1fS-ZLaF.js";import{L as mn}from"./list-heading-vbaXVA9N.js";import{F as ln}from"./flex-ZVra76N-.js";import{l as cn,a as pn,b as un,c as gn,d as hn,e as yn,f as bn,g as kn,h as xn,i as fn,j as Sn,k as In,m as Cn,n as rn}from"./list.stories-data-tBKSPg9P.js";import"./inheritsLoose-Y9jOMJLd.js";import"./index-4QtD-hFu.js";import"./extends-dGVwEr9R.js";import"./hoist-non-react-statics.cjs-pnyno-Dk.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./index-VW3EWkuE.js";import"./index.es-LXZC0YVN.js";import"./redux-F5dueAP3.js";import"./objectSpread2-93s0nBry.js";import"./index-miLrID2P.js";import"./memoize-one.esm-hqe5SRxC.js";import"./card-0r8RRVk-.js";import"./common-types-U65vzrrz.js";import"./disabled-context-urNQThQz.js";import"./actions--jdeAagr.js";import"./lodash-Bmg8FrMx.js";import"./button-qfybxFqE.js";import"./spinner-R8Il4aRe.js";import"./icon-_m67DAr0.js";import"./tslib.es6-OIsz3r9a.js";import"./tooltip-ZHdi6rl-.js";import"./types-VB5zD18b.js";import"./types-5uVBABF4.js";import"./badge-23Ty_zBt.js";import"./loader-TGOJBZQG.js";import"./heading-sY0SLHoQ.js";import"./help-icon-yrJgkgdC.js";const sa={title:"Basic/List",component:y,args:{list:cn,noHeader:!0},parameters:{layout:"fullscreen"}},o=d=>s.jsx(y,{...d}),O=o.bind({}),L=o.bind({});L.args={list:pn};const D=o.bind({});D.args={list:un};const v=o.bind({});v.args={list:gn};const K=o.bind({});K.args={list:hn,expanding:!0};const H=o.bind({});H.args={list:yn,noHeader:!1};const M=o.bind({});M.args={list:bn};const j=o.bind({});j.args={list:kn};const R=o.bind({});R.args={list:xn};const T=o.bind({});T.args={list:fn};const E=o.bind({});E.args={list:Sn,noHeader:!1};const w=o.bind({});w.args={bordered:!0};const N=o.bind({});N.args={list:In};const $=o.bind({});$.args={list:Cn};const S=o.bind({});S.args={list:rn,noHeader:!1,stickyHeader:!0};S.parameters={docs:{story:{inline:!1,iframeHeight:200}}};const f=o.bind({});f.args={list:rn,scrollDetails:{scrollable:!0}};f.parameters={docs:{description:{story:"Adds an internal scrollbar to the `List`, which will fill its parent height unless a `height` is set. The scrollbar can be toggled using `hideScrollbar`."}}};f.decorators=[d=>s.jsx("div",{style:{height:200,overflow:"hidden"},children:d()})];const J=()=>{const[d,b]=B.useState(0),k={name:"Animals",items:[...Array(50)].map((m,l)=>({id:l,name:`Aardvark #${l+1}`,active:l===d,onClick:()=>b(l)}))};return s.jsx("div",{style:{height:200,overflow:"auto"},children:s.jsx(y,{list:k,scrollDetails:{infiniteScroll:!0,scrollable:!0,limit:10}})})},_=()=>{const d=(e,a)=>{switch(a.type){case"headingClicked":{const{headingKey:t}=a.payload;return x(e,r=>{const i=r[t];i.expanded=!i.expanded})}case"itemClicked":{const{headingKey:t,itemIndex:r}=a.payload;return x(e,i=>{Object.keys(i).forEach(h=>{i[h].items.forEach((A,sn)=>{A.active=h===t&&sn===r})})})}case"addClicked":{const{headingKey:t}=a.payload;return x(e,r=>{const i=r[t];i.expanded=!0,i.items.push({name:`${i.label} #${i.items.length+1}`})})}case"deleteClicked":{const{headingKey:t,itemIndex:r}=a.payload;return x(e,i=>{let{items:h}=i[t];delete h[r],i[t].items=h.filter(A=>A)})}default:return e}},b=()=>({mammals:{draggable:!0,name:"Mammals",key:"mammals",label:"Mammals",expanded:!0,items:[{name:"Click item to scroll",type:"Heading"},{name:"Mammal #1",active:!0},{name:"Mammal #2"},{name:"Mammal #3"},{name:"Mammal #4"},{name:"Mammal #5"},{name:"Mammal #6"},{name:"Mammal #7"},{name:"Mammal #8"},{name:"Mammal #9"},{name:"Mammal #10"}]},amphibians:{name:"Amphibians (sticky header)",key:"amphibians",label:"Amphibians",expanded:!0,items:[{name:"Click item to scroll",type:"Heading"},{name:"Amphibian #1",active:!0},{name:"Amphibian #2"},{name:"Amphibian #3"},{name:"Amphibian #4"},{name:"Amphibian #5"},{name:"Amphibian #6"},{name:"Amphibian #7"},{name:"Amphibian #8"},{name:"Amphibian #9"},{name:"Amphibian #10"}]}}),[k,m]=B.useReducer(d,{},()=>b()),[l,u]=B.useState(!1),c=(e,a)=>{u(!0),m({type:"itemClicked",payload:{headingKey:e,itemIndex:a}}),setTimeout(()=>u(!1),0)},p=e=>{m({type:"addClicked",payload:{headingKey:e}})},g=(e,a)=>m({type:"deleteClicked",payload:{headingKey:e,itemIndex:a}}),{mammals:I,amphibians:F}=k,C=e=>({...e,actions:[{label:"Add",primary:!0,icon:"add",onClick:()=>p(e.key)}],items:e.items.map((a,t)=>a.type=="Heading"?{...a,id:t}:{...a,id:t,onClick:()=>c(e.key,t),actions:[{label:"Delete",icon:"delete",onClick:()=>g(e.key,t)}]})}),n=300;return s.jsxs(ln,{gap:!0,children:[s.jsx(y,{list:C(I),bordered:!0,height:n,scrollDetails:{scrollable:!0,hideScrollbar:!1,triggerScrollToActiveItem:l}}),s.jsx(y,{list:C(F),bordered:!0,stickyHeader:!0,height:n,scrollDetails:{scrollable:!0,hideScrollbar:!1,triggerScrollToActiveItem:l}})]})},W=()=>{const d=(n,e)=>{switch(e.type){case"headingClicked":{const{headingKey:a}=e.payload;return x(n,t=>{const r=t[a];r.expanded=!r.expanded})}case"itemClicked":{const{headingKey:a,itemIndex:t}=e.payload;return x(n,r=>{Object.keys(r).forEach(i=>{r[i].items.forEach((h,A)=>{h.active=i===a&&A===t})})})}case"addClicked":{const{headingKey:a}=e.payload;return x(n,t=>{const r=t[a];r.expanded=!0,r.items.push({name:`${r.label} #${r.items.length+1}`})})}case"deleteClicked":{const{headingKey:a,itemIndex:t}=e.payload;return x(n,r=>{let{items:i}=r[a];delete i[t],r[a].items=i.filter(h=>h)})}default:return n}},b=()=>({mammals:{key:"mammals",label:"Mammals",expanded:!0,items:[{name:"Aardvark",active:!0},{name:"Kangaroo"}]},amphibians:{key:"amphibians",label:"Amphibians",expanded:!0,items:[{name:"Frog"}]}}),[k,m]=B.useReducer(d,b()),l=n=>m({type:"headingClicked",payload:{headingKey:n}}),u=(n,e)=>m({type:"itemClicked",payload:{headingKey:n,itemIndex:e}}),c=n=>m({type:"addClicked",payload:{headingKey:n}}),p=(n,e)=>m({type:"deleteClicked",payload:{headingKey:n,itemIndex:e}}),{mammals:g,amphibians:I}=k,F=n=>({name:n.label,metaCount:n.items.length,expanded:n.expanded,onClick:()=>l(n.key),actions:[{label:"Add",primary:!0,icon:"add",onClick:()=>c(n.key)}]}),C=n=>({...n,items:n.items.map((e,a)=>({...e,id:a,onClick:()=>u(n.key,a),actions:[{label:"Delete",icon:"delete",onClick:()=>p(n.key,a)}]}))});return s.jsxs(s.Fragment,{children:[s.jsx(mn,{name:"Animals"}),s.jsx(P,{item:F(g)}),g.expanded&&s.jsx(y,{noHeader:!0,list:C(g)}),s.jsx(P,{item:F(I)}),I.expanded&&s.jsx(y,{noHeader:!0,list:C(I)})]})},X=()=>{const d=(u,c,p)=>{if(c&&isNaN(c)||p&&isNaN(p)||c===p)return u;const g=[...u];return typeof p=="number"&&typeof c=="number"&&g.splice(p,0,g.splice(c,1)[0]),g},b={name:"List Name",draggable:!0,items:[{id:1,name:"element 1",actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]},{id:2,name:"Long element name goes here lorem ipsum dolor lorem ipsum dolor",actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]},{id:3,name:"element 3"},{id:4,name:"element 4",actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]},{id:5,name:"element 5",actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]}]},[k,m]=B.useState(b.items),l=u=>{const{to:c,from:p}=u;m(d(k,p,c))};return s.jsx(y,{list:{...b,items:k},draggable:!0,onListReorder:l})},q=()=>{const d={items:[{id:1,name:"Dashboard",component:G,url:"/dashboard"},{id:2,name:"Settings",component:G,url:"/settings"}]};return s.jsxs(on,{children:[s.jsx(y,{list:d,noHeader:!0}),s.jsxs(dn,{children:[s.jsx(z,{path:"/dashboard",children:"Dashboard"}),s.jsx(z,{path:"/settings",children:"Settings"})]})]})};var Q,U,V;O.parameters={...O.parameters,docs:{...(Q=O.parameters)==null?void 0:Q.docs,source:{originalSource:`args => {
|
|
2
|
+
return <List {...args} />;
|
|
3
|
+
}`,...(V=(U=O.parameters)==null?void 0:U.docs)==null?void 0:V.source}}};var Y,Z,ee;L.parameters={...L.parameters,docs:{...(Y=L.parameters)==null?void 0:Y.docs,source:{originalSource:`args => {
|
|
4
|
+
return <List {...args} />;
|
|
5
|
+
}`,...(ee=(Z=L.parameters)==null?void 0:Z.docs)==null?void 0:ee.source}}};var ne,ae,te;D.parameters={...D.parameters,docs:{...(ne=D.parameters)==null?void 0:ne.docs,source:{originalSource:`args => {
|
|
6
|
+
return <List {...args} />;
|
|
7
|
+
}`,...(te=(ae=D.parameters)==null?void 0:ae.docs)==null?void 0:te.source}}};var re,se,ie;v.parameters={...v.parameters,docs:{...(re=v.parameters)==null?void 0:re.docs,source:{originalSource:`args => {
|
|
8
|
+
return <List {...args} />;
|
|
9
|
+
}`,...(ie=(se=v.parameters)==null?void 0:se.docs)==null?void 0:ie.source}}};var oe,de,me;K.parameters={...K.parameters,docs:{...(oe=K.parameters)==null?void 0:oe.docs,source:{originalSource:`args => {
|
|
10
|
+
return <List {...args} />;
|
|
11
|
+
}`,...(me=(de=K.parameters)==null?void 0:de.docs)==null?void 0:me.source}}};var le,ce,pe;H.parameters={...H.parameters,docs:{...(le=H.parameters)==null?void 0:le.docs,source:{originalSource:`args => {
|
|
12
|
+
return <List {...args} />;
|
|
13
|
+
}`,...(pe=(ce=H.parameters)==null?void 0:ce.docs)==null?void 0:pe.source}}};var ue,ge,he;M.parameters={...M.parameters,docs:{...(ue=M.parameters)==null?void 0:ue.docs,source:{originalSource:`args => {
|
|
14
|
+
return <List {...args} />;
|
|
15
|
+
}`,...(he=(ge=M.parameters)==null?void 0:ge.docs)==null?void 0:he.source}}};var ye,be,ke;j.parameters={...j.parameters,docs:{...(ye=j.parameters)==null?void 0:ye.docs,source:{originalSource:`args => {
|
|
16
|
+
return <List {...args} />;
|
|
17
|
+
}`,...(ke=(be=j.parameters)==null?void 0:be.docs)==null?void 0:ke.source}}};var xe,fe,Se;R.parameters={...R.parameters,docs:{...(xe=R.parameters)==null?void 0:xe.docs,source:{originalSource:`args => {
|
|
18
|
+
return <List {...args} />;
|
|
19
|
+
}`,...(Se=(fe=R.parameters)==null?void 0:fe.docs)==null?void 0:Se.source}}};var Ie,Ce,Ae;T.parameters={...T.parameters,docs:{...(Ie=T.parameters)==null?void 0:Ie.docs,source:{originalSource:`args => {
|
|
20
|
+
return <List {...args} />;
|
|
21
|
+
}`,...(Ae=(Ce=T.parameters)==null?void 0:Ce.docs)==null?void 0:Ae.source}}};var Le,De,ve;E.parameters={...E.parameters,docs:{...(Le=E.parameters)==null?void 0:Le.docs,source:{originalSource:`args => {
|
|
22
|
+
return <List {...args} />;
|
|
23
|
+
}`,...(ve=(De=E.parameters)==null?void 0:De.docs)==null?void 0:ve.source}}};var Ke,He,Me;w.parameters={...w.parameters,docs:{...(Ke=w.parameters)==null?void 0:Ke.docs,source:{originalSource:`args => {
|
|
24
|
+
return <List {...args} />;
|
|
25
|
+
}`,...(Me=(He=w.parameters)==null?void 0:He.docs)==null?void 0:Me.source}}};var je,Re,Te;N.parameters={...N.parameters,docs:{...(je=N.parameters)==null?void 0:je.docs,source:{originalSource:`args => {
|
|
26
|
+
return <List {...args} />;
|
|
27
|
+
}`,...(Te=(Re=N.parameters)==null?void 0:Re.docs)==null?void 0:Te.source}}};var Ee,we,Ne;$.parameters={...$.parameters,docs:{...(Ee=$.parameters)==null?void 0:Ee.docs,source:{originalSource:`args => {
|
|
28
|
+
return <List {...args} />;
|
|
29
|
+
}`,...(Ne=(we=$.parameters)==null?void 0:we.docs)==null?void 0:Ne.source}}};var $e,Be,Fe;S.parameters={...S.parameters,docs:{...($e=S.parameters)==null?void 0:$e.docs,source:{originalSource:`args => {
|
|
30
|
+
return <List {...args} />;
|
|
31
|
+
}`,...(Fe=(Be=S.parameters)==null?void 0:Be.docs)==null?void 0:Fe.source}}};var Oe,Je,_e;f.parameters={...f.parameters,docs:{...(Oe=f.parameters)==null?void 0:Oe.docs,source:{originalSource:`args => {
|
|
32
|
+
return <List {...args} />;
|
|
33
|
+
}`,...(_e=(Je=f.parameters)==null?void 0:Je.docs)==null?void 0:_e.source}}};var We,Xe,qe;J.parameters={...J.parameters,docs:{...(We=J.parameters)==null?void 0:We.docs,source:{originalSource:`() => {
|
|
34
|
+
const [activeIndex, setActiveIndex] = useState(0);
|
|
35
|
+
const list = {
|
|
36
|
+
name: 'Animals',
|
|
37
|
+
items: [...Array(50)].map((item, index) => ({
|
|
38
|
+
id: index,
|
|
39
|
+
name: \`Aardvark #\${index + 1}\`,
|
|
40
|
+
active: index === activeIndex,
|
|
41
|
+
onClick: () => setActiveIndex(index)
|
|
42
|
+
}))
|
|
43
|
+
};
|
|
44
|
+
return <div style={{
|
|
45
|
+
height: 200,
|
|
46
|
+
overflow: 'auto'
|
|
47
|
+
}}>
|
|
48
|
+
<List list={list} scrollDetails={{
|
|
49
|
+
infiniteScroll: true,
|
|
50
|
+
scrollable: true,
|
|
51
|
+
limit: 10
|
|
52
|
+
}} />
|
|
53
|
+
</div>;
|
|
54
|
+
}`,...(qe=(Xe=J.parameters)==null?void 0:Xe.docs)==null?void 0:qe.source}}};var ze,Ge,Pe;_.parameters={..._.parameters,docs:{...(ze=_.parameters)==null?void 0:ze.docs,source:{originalSource:`() => {
|
|
55
|
+
const reducer: Reducer<StateShape, Action> = (state, action) => {
|
|
56
|
+
switch (action.type) {
|
|
57
|
+
case 'headingClicked':
|
|
58
|
+
{
|
|
59
|
+
const {
|
|
60
|
+
headingKey
|
|
61
|
+
} = action.payload;
|
|
62
|
+
return produce(state, draft => {
|
|
63
|
+
const heading = draft[headingKey];
|
|
64
|
+
heading.expanded = !heading.expanded;
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
case 'itemClicked':
|
|
68
|
+
{
|
|
69
|
+
const {
|
|
70
|
+
headingKey,
|
|
71
|
+
itemIndex
|
|
72
|
+
} = action.payload;
|
|
73
|
+
return produce(state, draft => {
|
|
74
|
+
Object.keys(draft).forEach(key => {
|
|
75
|
+
draft[key].items.forEach((item, i) => {
|
|
76
|
+
item.active = key === headingKey && i === itemIndex;
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
case 'addClicked':
|
|
82
|
+
{
|
|
83
|
+
const {
|
|
84
|
+
headingKey
|
|
85
|
+
} = action.payload;
|
|
86
|
+
return produce(state, draft => {
|
|
87
|
+
const heading = draft[headingKey];
|
|
88
|
+
heading.expanded = true;
|
|
89
|
+
heading.items.push({
|
|
90
|
+
name: \`\${heading.label} #\${heading.items.length + 1}\`
|
|
91
|
+
});
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
case 'deleteClicked':
|
|
95
|
+
{
|
|
96
|
+
const {
|
|
97
|
+
headingKey,
|
|
98
|
+
itemIndex
|
|
99
|
+
} = action.payload;
|
|
100
|
+
return produce(state, draft => {
|
|
101
|
+
let {
|
|
102
|
+
items
|
|
103
|
+
} = draft[headingKey];
|
|
104
|
+
delete items[itemIndex];
|
|
105
|
+
draft[headingKey].items = items.filter(i => i); //remove empty slots
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
default:
|
|
110
|
+
return state;
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
const initialState = () => ({
|
|
114
|
+
mammals: {
|
|
115
|
+
draggable: true,
|
|
116
|
+
name: 'Mammals',
|
|
117
|
+
key: 'mammals',
|
|
118
|
+
label: 'Mammals',
|
|
119
|
+
expanded: true,
|
|
120
|
+
items: [{
|
|
121
|
+
name: 'Click item to scroll',
|
|
122
|
+
type: 'Heading'
|
|
123
|
+
}, {
|
|
124
|
+
name: 'Mammal #1',
|
|
125
|
+
active: true
|
|
126
|
+
}, {
|
|
127
|
+
name: 'Mammal #2'
|
|
128
|
+
}, {
|
|
129
|
+
name: 'Mammal #3'
|
|
130
|
+
}, {
|
|
131
|
+
name: 'Mammal #4'
|
|
132
|
+
}, {
|
|
133
|
+
name: 'Mammal #5'
|
|
134
|
+
}, {
|
|
135
|
+
name: 'Mammal #6'
|
|
136
|
+
}, {
|
|
137
|
+
name: 'Mammal #7'
|
|
138
|
+
}, {
|
|
139
|
+
name: 'Mammal #8'
|
|
140
|
+
}, {
|
|
141
|
+
name: 'Mammal #9'
|
|
142
|
+
}, {
|
|
143
|
+
name: 'Mammal #10'
|
|
144
|
+
}]
|
|
145
|
+
},
|
|
146
|
+
amphibians: {
|
|
147
|
+
name: 'Amphibians (sticky header)',
|
|
148
|
+
key: 'amphibians',
|
|
149
|
+
label: 'Amphibians',
|
|
150
|
+
expanded: true,
|
|
151
|
+
items: [{
|
|
152
|
+
name: 'Click item to scroll',
|
|
153
|
+
type: 'Heading'
|
|
154
|
+
}, {
|
|
155
|
+
name: 'Amphibian #1',
|
|
156
|
+
active: true
|
|
157
|
+
}, {
|
|
158
|
+
name: 'Amphibian #2'
|
|
159
|
+
}, {
|
|
160
|
+
name: 'Amphibian #3'
|
|
161
|
+
}, {
|
|
162
|
+
name: 'Amphibian #4'
|
|
163
|
+
}, {
|
|
164
|
+
name: 'Amphibian #5'
|
|
165
|
+
}, {
|
|
166
|
+
name: 'Amphibian #6'
|
|
167
|
+
}, {
|
|
168
|
+
name: 'Amphibian #7'
|
|
169
|
+
}, {
|
|
170
|
+
name: 'Amphibian #8'
|
|
171
|
+
}, {
|
|
172
|
+
name: 'Amphibian #9'
|
|
173
|
+
}, {
|
|
174
|
+
name: 'Amphibian #10'
|
|
175
|
+
}]
|
|
176
|
+
}
|
|
177
|
+
});
|
|
178
|
+
const [state, dispatch] = useReducer(reducer, {}, () => initialState());
|
|
179
|
+
const [triggerScroll, setTriggerScroll] = useState(false);
|
|
180
|
+
const onClickItem = (headingKey: string, itemIndex: number) => {
|
|
181
|
+
setTriggerScroll(true);
|
|
182
|
+
dispatch({
|
|
183
|
+
type: 'itemClicked',
|
|
184
|
+
payload: {
|
|
185
|
+
headingKey,
|
|
186
|
+
itemIndex
|
|
187
|
+
}
|
|
188
|
+
});
|
|
189
|
+
// will execute after stack is cleared
|
|
190
|
+
setTimeout(() => setTriggerScroll(false), 0);
|
|
191
|
+
};
|
|
192
|
+
const onAddItem = (headingKey: string) => {
|
|
193
|
+
dispatch({
|
|
194
|
+
type: 'addClicked',
|
|
195
|
+
payload: {
|
|
196
|
+
headingKey
|
|
197
|
+
}
|
|
198
|
+
});
|
|
199
|
+
};
|
|
200
|
+
const onDeleteItem = (headingKey: string, itemIndex: number) => dispatch({
|
|
201
|
+
type: 'deleteClicked',
|
|
202
|
+
payload: {
|
|
203
|
+
headingKey,
|
|
204
|
+
itemIndex
|
|
205
|
+
}
|
|
206
|
+
});
|
|
207
|
+
const {
|
|
208
|
+
mammals,
|
|
209
|
+
amphibians
|
|
210
|
+
} = state;
|
|
211
|
+
const hydrateList = (list: any) => ({
|
|
212
|
+
...list,
|
|
213
|
+
actions: [{
|
|
214
|
+
label: 'Add',
|
|
215
|
+
primary: true,
|
|
216
|
+
icon: 'add',
|
|
217
|
+
onClick: () => onAddItem(list.key)
|
|
218
|
+
}],
|
|
219
|
+
items: list.items.map((item: any, itemIndex: number) => {
|
|
220
|
+
if (item.type == 'Heading') {
|
|
221
|
+
return {
|
|
222
|
+
...item,
|
|
223
|
+
id: itemIndex
|
|
224
|
+
};
|
|
225
|
+
}
|
|
226
|
+
return {
|
|
227
|
+
...item,
|
|
228
|
+
id: itemIndex,
|
|
229
|
+
onClick: () => onClickItem(list.key, itemIndex),
|
|
230
|
+
actions: [{
|
|
231
|
+
label: 'Delete',
|
|
232
|
+
icon: 'delete',
|
|
233
|
+
onClick: () => onDeleteItem(list.key, itemIndex)
|
|
234
|
+
}]
|
|
235
|
+
};
|
|
236
|
+
})
|
|
237
|
+
});
|
|
238
|
+
const height = 300;
|
|
239
|
+
return <Flex gap>
|
|
240
|
+
<List list={hydrateList(mammals)} bordered height={height} scrollDetails={{
|
|
241
|
+
scrollable: true,
|
|
242
|
+
hideScrollbar: false,
|
|
243
|
+
triggerScrollToActiveItem: triggerScroll
|
|
244
|
+
}} />
|
|
245
|
+
<List list={hydrateList(amphibians)} bordered stickyHeader height={height} scrollDetails={{
|
|
246
|
+
scrollable: true,
|
|
247
|
+
hideScrollbar: false,
|
|
248
|
+
triggerScrollToActiveItem: triggerScroll
|
|
249
|
+
}} />
|
|
250
|
+
</Flex>;
|
|
251
|
+
}`,...(Pe=(Ge=_.parameters)==null?void 0:Ge.docs)==null?void 0:Pe.source}}};var Qe,Ue,Ve;W.parameters={...W.parameters,docs:{...(Qe=W.parameters)==null?void 0:Qe.docs,source:{originalSource:`() => {
|
|
252
|
+
const reducer: Reducer<StateShape, Action> = (state, action) => {
|
|
253
|
+
switch (action.type) {
|
|
254
|
+
case 'headingClicked':
|
|
255
|
+
{
|
|
256
|
+
const {
|
|
257
|
+
headingKey
|
|
258
|
+
} = action.payload;
|
|
259
|
+
return produce(state, draft => {
|
|
260
|
+
const heading = draft[headingKey];
|
|
261
|
+
heading.expanded = !heading.expanded;
|
|
262
|
+
});
|
|
263
|
+
}
|
|
264
|
+
case 'itemClicked':
|
|
265
|
+
{
|
|
266
|
+
const {
|
|
267
|
+
headingKey,
|
|
268
|
+
itemIndex
|
|
269
|
+
} = action.payload;
|
|
270
|
+
return produce(state, draft => {
|
|
271
|
+
Object.keys(draft).forEach(key => {
|
|
272
|
+
draft[key].items.forEach((item, i) => {
|
|
273
|
+
item.active = key === headingKey && i === itemIndex;
|
|
274
|
+
});
|
|
275
|
+
});
|
|
276
|
+
});
|
|
277
|
+
}
|
|
278
|
+
case 'addClicked':
|
|
279
|
+
{
|
|
280
|
+
const {
|
|
281
|
+
headingKey
|
|
282
|
+
} = action.payload;
|
|
283
|
+
return produce(state, draft => {
|
|
284
|
+
const heading = draft[headingKey];
|
|
285
|
+
heading.expanded = true;
|
|
286
|
+
heading.items.push({
|
|
287
|
+
name: \`\${heading.label} #\${heading.items.length + 1}\`
|
|
288
|
+
});
|
|
289
|
+
});
|
|
290
|
+
}
|
|
291
|
+
case 'deleteClicked':
|
|
292
|
+
{
|
|
293
|
+
const {
|
|
294
|
+
headingKey,
|
|
295
|
+
itemIndex
|
|
296
|
+
} = action.payload;
|
|
297
|
+
return produce(state, draft => {
|
|
298
|
+
let {
|
|
299
|
+
items
|
|
300
|
+
} = draft[headingKey];
|
|
301
|
+
delete items[itemIndex];
|
|
302
|
+
draft[headingKey].items = items.filter(i => i); //remove empty slots
|
|
303
|
+
});
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
default:
|
|
307
|
+
return state;
|
|
308
|
+
}
|
|
309
|
+
};
|
|
310
|
+
const initialState: () => StateShape = () => ({
|
|
311
|
+
mammals: {
|
|
312
|
+
key: 'mammals',
|
|
313
|
+
label: 'Mammals',
|
|
314
|
+
expanded: true,
|
|
315
|
+
items: [{
|
|
316
|
+
name: 'Aardvark',
|
|
317
|
+
active: true
|
|
318
|
+
}, {
|
|
319
|
+
name: 'Kangaroo'
|
|
320
|
+
}]
|
|
321
|
+
},
|
|
322
|
+
amphibians: {
|
|
323
|
+
key: 'amphibians',
|
|
324
|
+
label: 'Amphibians',
|
|
325
|
+
expanded: true,
|
|
326
|
+
items: [{
|
|
327
|
+
name: 'Frog'
|
|
328
|
+
}]
|
|
329
|
+
}
|
|
330
|
+
});
|
|
331
|
+
const [state, dispatch] = useReducer(reducer, initialState());
|
|
332
|
+
const onClickHeading = (headingKey: string) => dispatch({
|
|
333
|
+
type: 'headingClicked',
|
|
334
|
+
payload: {
|
|
335
|
+
headingKey
|
|
336
|
+
}
|
|
337
|
+
});
|
|
338
|
+
const onClickItem = (headingKey: string, itemIndex: number) => dispatch({
|
|
339
|
+
type: 'itemClicked',
|
|
340
|
+
payload: {
|
|
341
|
+
headingKey,
|
|
342
|
+
itemIndex
|
|
343
|
+
}
|
|
344
|
+
});
|
|
345
|
+
const onAddItem = (headingKey: string) => dispatch({
|
|
346
|
+
type: 'addClicked',
|
|
347
|
+
payload: {
|
|
348
|
+
headingKey
|
|
349
|
+
}
|
|
350
|
+
});
|
|
351
|
+
const onDeleteItem = (headingKey: string, itemIndex: number) => dispatch({
|
|
352
|
+
type: 'deleteClicked',
|
|
353
|
+
payload: {
|
|
354
|
+
headingKey,
|
|
355
|
+
itemIndex
|
|
356
|
+
}
|
|
357
|
+
});
|
|
358
|
+
const {
|
|
359
|
+
mammals,
|
|
360
|
+
amphibians
|
|
361
|
+
} = state;
|
|
362
|
+
const hydrateHeading = (list: ListSection) => ({
|
|
363
|
+
name: list.label,
|
|
364
|
+
metaCount: list.items.length,
|
|
365
|
+
expanded: list.expanded,
|
|
366
|
+
onClick: () => onClickHeading(list.key),
|
|
367
|
+
actions: [{
|
|
368
|
+
label: 'Add',
|
|
369
|
+
primary: true,
|
|
370
|
+
icon: 'add',
|
|
371
|
+
onClick: () => onAddItem(list.key)
|
|
372
|
+
}]
|
|
373
|
+
});
|
|
374
|
+
const hydrateList = (list: ListSection) => ({
|
|
375
|
+
...list,
|
|
376
|
+
items: list.items.map((item, itemIndex) => ({
|
|
377
|
+
...item,
|
|
378
|
+
id: itemIndex,
|
|
379
|
+
onClick: () => onClickItem(list.key, itemIndex),
|
|
380
|
+
actions: [{
|
|
381
|
+
label: 'Delete',
|
|
382
|
+
icon: 'delete',
|
|
383
|
+
onClick: () => onDeleteItem(list.key, itemIndex)
|
|
384
|
+
}]
|
|
385
|
+
}))
|
|
386
|
+
});
|
|
387
|
+
return <>
|
|
388
|
+
<ListHeading name="Animals" />
|
|
389
|
+
<ListSubheading item={hydrateHeading(mammals)} />
|
|
390
|
+
{mammals.expanded && <List noHeader list={hydrateList(mammals)} />}
|
|
391
|
+
<ListSubheading item={hydrateHeading(amphibians)} />
|
|
392
|
+
{amphibians.expanded && <List noHeader list={hydrateList(amphibians)} />}
|
|
393
|
+
</>;
|
|
394
|
+
}`,...(Ve=(Ue=W.parameters)==null?void 0:Ue.docs)==null?void 0:Ve.source}}};var Ye,Ze,en;X.parameters={...X.parameters,docs:{...(Ye=X.parameters)==null?void 0:Ye.docs,source:{originalSource:`() => {
|
|
395
|
+
const arraymove = (arr: ListItem[], from?: number, to?: number): ListItem[] => {
|
|
396
|
+
if (from && isNaN(from) || to && isNaN(to) || from === to) {
|
|
397
|
+
return arr;
|
|
398
|
+
}
|
|
399
|
+
const copy = [...arr];
|
|
400
|
+
if (typeof to === 'number' && typeof from === 'number') {
|
|
401
|
+
copy.splice(to, 0, copy.splice(from, 1)[0]);
|
|
402
|
+
}
|
|
403
|
+
return copy;
|
|
404
|
+
};
|
|
405
|
+
const beautifulDnD = {
|
|
406
|
+
name: 'List Name',
|
|
407
|
+
draggable: true,
|
|
408
|
+
items: [{
|
|
409
|
+
id: 1,
|
|
410
|
+
name: 'element 1',
|
|
411
|
+
actions: [{
|
|
412
|
+
label: 'Delete',
|
|
413
|
+
icon: 'delete',
|
|
414
|
+
onClick: () => {}
|
|
415
|
+
}]
|
|
416
|
+
}, {
|
|
417
|
+
id: 2,
|
|
418
|
+
name: 'Long element name goes here lorem ipsum dolor lorem ipsum dolor',
|
|
419
|
+
actions: [{
|
|
420
|
+
label: 'Delete',
|
|
421
|
+
icon: 'delete',
|
|
422
|
+
onClick: () => {}
|
|
423
|
+
}]
|
|
424
|
+
}, {
|
|
425
|
+
id: 3,
|
|
426
|
+
name: 'element 3'
|
|
427
|
+
}, {
|
|
428
|
+
id: 4,
|
|
429
|
+
name: 'element 4',
|
|
430
|
+
actions: [{
|
|
431
|
+
label: 'Delete',
|
|
432
|
+
icon: 'delete',
|
|
433
|
+
onClick: () => {}
|
|
434
|
+
}]
|
|
435
|
+
}, {
|
|
436
|
+
id: 5,
|
|
437
|
+
name: 'element 5',
|
|
438
|
+
actions: [{
|
|
439
|
+
label: 'Delete',
|
|
440
|
+
icon: 'delete',
|
|
441
|
+
onClick: () => {}
|
|
442
|
+
}]
|
|
443
|
+
}]
|
|
444
|
+
};
|
|
445
|
+
const [reorderedItems, setReorderedItems] = useState(beautifulDnD.items);
|
|
446
|
+
const onListReorder = (reorderData: IReorderData) => {
|
|
447
|
+
const {
|
|
448
|
+
to,
|
|
449
|
+
from
|
|
450
|
+
} = reorderData;
|
|
451
|
+
setReorderedItems((arraymove((reorderedItems as any), from, to) as any));
|
|
452
|
+
};
|
|
453
|
+
return <List list={{
|
|
454
|
+
...beautifulDnD,
|
|
455
|
+
items: reorderedItems
|
|
456
|
+
}} draggable onListReorder={onListReorder} />;
|
|
457
|
+
}`,...(en=(Ze=X.parameters)==null?void 0:Ze.docs)==null?void 0:en.source}}};var nn,an,tn;q.parameters={...q.parameters,docs:{...(nn=q.parameters)==null?void 0:nn.docs,source:{originalSource:`() => {
|
|
458
|
+
const list = {
|
|
459
|
+
items: [{
|
|
460
|
+
id: 1,
|
|
461
|
+
name: 'Dashboard',
|
|
462
|
+
component: Link,
|
|
463
|
+
url: '/dashboard'
|
|
464
|
+
}, {
|
|
465
|
+
id: 2,
|
|
466
|
+
name: 'Settings',
|
|
467
|
+
component: Link,
|
|
468
|
+
url: '/settings'
|
|
469
|
+
}]
|
|
470
|
+
};
|
|
471
|
+
return <HashRouter>
|
|
472
|
+
<List list={list} noHeader />
|
|
473
|
+
<Switch>
|
|
474
|
+
<Route path="/dashboard">Dashboard</Route>
|
|
475
|
+
<Route path="/settings">Settings</Route>
|
|
476
|
+
</Switch>
|
|
477
|
+
</HashRouter>;
|
|
478
|
+
}`,...(tn=(an=q.parameters)==null?void 0:an.docs)==null?void 0:tn.source}}};const ia=["Default","Actions","Menus","Details","Expanding","Header","Badges","BadgesSmall","Nested","InvalidItems","JSXTitles","Bordered","IconWithTooltip","Metacount","StickyHeader","Scrollable","InfiniteScroll","ScrollToActiveItem","HeadingsManaged","ManagedDragAndDrop","AsRouterLink"];export{L as Actions,q as AsRouterLink,M as Badges,j as BadgesSmall,w as Bordered,O as Default,v as Details,K as Expanding,H as Header,W as HeadingsManaged,N as IconWithTooltip,J as InfiniteScroll,T as InvalidItems,E as JSXTitles,X as ManagedDragAndDrop,D as Menus,$ as Metacount,R as Nested,_ as ScrollToActiveItem,f as Scrollable,S as StickyHeader,ia as __namedExportsOrder,sa as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{r as N}from"./index-RfLt4OUa.js";import{a as l}from"./common-types-U65vzrrz.js";import{L as g}from"./loader-TGOJBZQG.js";import{P as M}from"./progress-bar-NRjN2baY.js";import{S as x}from"./spinner-R8Il4aRe.js";import{S as m}from"./spacer-Yji9g2AW.js";import{B as L}from"./button-
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{r as N}from"./index-RfLt4OUa.js";import{a as l}from"./common-types-U65vzrrz.js";import{L as g}from"./loader-TGOJBZQG.js";import{P as M}from"./progress-bar-NRjN2baY.js";import{S as x}from"./spinner-R8Il4aRe.js";import{S as m}from"./spacer-Yji9g2AW.js";import{B as L}from"./button-qfybxFqE.js";import{C as q}from"./card-0r8RRVk-.js";import"./index-VW3EWkuE.js";import"./disabled-context-urNQThQz.js";import"./icon-_m67DAr0.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-Y9jOMJLd.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./tooltip-ZHdi6rl-.js";import"./index-miLrID2P.js";const ge={title:"Progress/Loader",component:g,argTypes:{theme:{control:{type:"inline-radio"},options:["white","light","dark"]}},args:{theme:"white",text:"Loading...",width:"100%",height:"100%",fullViewPortSize:!1},decorators:[r=>e.jsx("div",{style:{height:"200px",position:"relative"},children:r()})],parameters:{docs:{source:{excludeDecorators:!0}}}},S=r=>{const{theme:t}=r;return e.jsx(g,{...r,children:e.jsx(x,{dark:t!=="dark"})})},h=r=>{const{theme:t}=r;return e.jsx(g,{...r,children:e.jsx(M,{width:"300px",inverted:t==="dark",percentage:40})})},a=S.bind({});a.args={testId:"story-default-spinner"};const u=h.bind({}),s=S.bind({});s.args={theme:l.LIGHT};const o=S.bind({});o.args={theme:l.DARK,fullViewPortSize:!0};const i=h.bind({});i.args={theme:l.DARK,fullViewPortSize:!0};const n=h.bind({});n.args={details:"Some extra info"};const d=h.bind({});d.args={text:"",details:e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{opacity:.5},children:"Step 1: Lorem ipsum...DONE"}),e.jsx(m,{height:"var(--padding-xs)"}),e.jsx("div",{children:"Step 2: Dolor est"}),e.jsx(m,{height:"var(--padding-xs)"}),e.jsx("div",{style:{opacity:.5},children:"Step 3: Compendum"}),e.jsx(m,{height:"var(--padding-xs)"}),e.jsx(L,{label:"Cancel",onClick:()=>{}})]})};const c=()=>{const[r,t]=N.useState(!0);return e.jsxs(e.Fragment,{children:[e.jsx(L,{label:"Toggle loading",onClick:()=>t(!r)}),e.jsx(m,{}),e.jsx(q,{children:e.jsxs("div",{style:{position:"relative"},children:[r&&e.jsx(g,{cover:!0,theme:l.WHITE,children:e.jsx(x,{dark:!0})}),"Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(20)]})})]})};c.parameters={docs:{story:{inline:!1,iframeHeight:400}}};const p=()=>{const[r,t]=N.useState(!0);return e.jsxs(e.Fragment,{children:[e.jsx(L,{label:"Toggle loading",onClick:()=>t(!r)}),e.jsx(m,{}),e.jsx(q,{children:e.jsx("div",{style:{position:"relative"},children:r?e.jsx(g,{theme:l.WHITE,height:"200px",children:e.jsx(x,{dark:!0})}):e.jsx("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(20)})})})]})};p.parameters={docs:{story:{inline:!1,iframeHeight:400}}};var j,v,k;a.parameters={...a.parameters,docs:{...(j=a.parameters)==null?void 0:j.docs,source:{originalSource:`(args: ILoaderProps) => {
|
|
2
2
|
const {
|
|
3
3
|
theme
|
|
4
4
|
} = args;
|
|
@@ -80,4 +80,4 @@ import{j as e}from"./jsx-runtime-FsUICBgo.js";import{r as N}from"./index-RfLt4OU
|
|
|
80
80
|
</div>
|
|
81
81
|
</Card>
|
|
82
82
|
</>;
|
|
83
|
-
}`,...(G=(X=p.parameters)==null?void 0:X.docs)==null?void 0:G.source}}};const
|
|
83
|
+
}`,...(G=(X=p.parameters)==null?void 0:X.docs)==null?void 0:G.source}}};const ue=["Default","WithProgressBar","TintedBackground","FullViewport","FullViewportWithProgressBar","WithExtraTextDetails","WithExtraJSXDetails","CoversCardContent","ReplacesCardContent"];export{c as CoversCardContent,a as Default,o as FullViewport,i as FullViewportWithProgressBar,p as ReplacesCardContent,s as TintedBackground,d as WithExtraJSXDetails,n as WithExtraTextDetails,u as WithProgressBar,ue as __namedExportsOrder,ge as default};
|
package/dist/storybook/assets/{menu.stories-data-l5rlcD9_.js → menu.stories-data-VCYkzuDD.js}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as n}from"./jsx-runtime-FsUICBgo.js";import{T as o}from"./common-types-U65vzrrz.js";import{F as i}from"./flex-
|
|
1
|
+
import{j as n}from"./jsx-runtime-FsUICBgo.js";import{T as o}from"./common-types-U65vzrrz.js";import{F as i}from"./flex-ZVra76N-.js";import{B as s}from"./badge-23Ty_zBt.js";import{M as l}from"./types-VB5zD18b.js";const a=async e=>{await console.log("onFileChange",e)},t={label:"Select",trigger:o.DROP_DOWN_BUTTON,sections:[{type:l.HEADING,label:"Heading"},{type:l.OPTION,label:"King",onClick:()=>{}},{type:l.OPTION,label:"Queen",selected:!0,onClick:()=>{}},{type:l.DIVIDER},{type:l.OPTION,label:"Knight",disabled:!0,onClick:()=>{}},{type:l.OPTION,label:"Bishop",onClick:()=>{}}]},y={...t,sections:t.sections.map(e=>e.type===l.OPTION?{...e,onClick:void 0,onChange:a,upload:!0}:e)},b={...t,label:n.jsxs(i,{alignItems:"center",gap:"4px",children:["Select",n.jsx(s,{small:!0,title:"BETA"})]}),sections:Array(3).fill({type:"Menu",trigger:"Text",menu:{trigger:"Text",placement:"right-start",label:n.jsxs(i,{alignItems:"center",gap:"4px",children:["Parent",n.jsx(s,{small:!0,title:"BETA"})]}),title:"Parent",sections:Array(3).fill({type:"Option",label:n.jsxs(i,{alignItems:"center",gap:"4px",children:["Child",n.jsx(s,{small:!0,title:"BETA"})]}),title:"Child"})}})},d={label:"123 m",trigger:"DropDownButton",sections:[{type:"Option",label:"403.5433",description:"ft",inline:!0,onClick:()=>{}},{type:"Option",label:"123",description:"m",inline:!0,onClick:()=>{},selected:!0},{type:"Option",label:"0.123",description:"km",inline:!0,onClick:()=>{}}]},r=[{label:"Delete",icon:"delete",onClick:()=>{}},{label:"Rename",icon:"rename",onClick:()=>{}}],O={...t,sections:t.sections.map(e=>e.type==="Option"?{...e,inline:!0,actions:r}:e)},h={...t,sections:t.sections.map(e=>e.type==="Option"||e.type==="Heading"?{...e,icon:"star",onClick:()=>{}}:e)},C={...t,sections:Array(3).fill({type:"Menu",trigger:"Text",menu:{trigger:"Text",placement:"right-start",label:"Parent",sections:Array(3).fill({type:"Option",label:"Child",onClick:()=>{}})}})},T={...t,sections:Array(100).fill({type:"Option",label:"Item",onClick:()=>{}})},x={label:"No sections",trigger:"DropDownButton",sections:[]},k={label:"Select",trigger:"DropDownButton",showAllButton:{visible:!0,showAllTitle:"Show all...",showLessTitle:"Show less...",additionalSections:[{type:"Divider"},{type:"Option",label:"This item is always shown",onClick:()=>{}}]},sections:Array(8).fill({type:"Option",label:"Item",onClick:()=>{}})};export{y as a,d as b,O as c,h as d,x as e,C as f,b as g,k as h,T as i,t as m};
|