@oliasoft-open-source/react-ui-library 4.7.0-beta-1 → 4.7.0-beta-3

package/dist/storybook/assets/label.stories-niFJlzWW.js

@@ -0,0 +1,11 @@
+import{j}from"./jsx-runtime-FsUICBgo.js";import{r as E}from"./index-RfLt4OUa.js";import{L as n}from"./label-CezqEpI3.js";import"./index-VW3EWkuE.js";import"./common-types-U65vzrrz.js";import"./help-icon-DUhtRK0A.js";import"./tooltip-pjcB4ZxN.js";import"./index-miLrID2P.js";import"./icon-8EQazuuW.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-8sb_A2v4.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";const K={title:"Forms/Label",component:n,args:{label:"Label"}},t=e=>j.jsx(n,{...e}),c=t.bind({}),o=t.bind({});o.args={helpText:"Tooltip goes here"};const r=t.bind({});r.args={onClickHelp:()=>{}};const s=t.bind({});s.args={info:"Info goes here"};const l=()=>{const[e,v]=E.useState(!1),y=()=>v(!e);return j.jsx(n,{label:"Label",lock:{visible:!0,active:e,onClick:y,tooltip:e?"Unlock":"Lock",testId:"testId"}})},a=t.bind({});a.args={libraryIcon:{onClick:()=>{},tooltip:"View in library"}};var p,i,m;c.parameters={...c.parameters,docs:{...(p=c.parameters)==null?void 0:p.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(m=(i=c.parameters)==null?void 0:i.docs)==null?void 0:m.source}}};var d,b,g;o.parameters={...o.parameters,docs:{...(d=o.parameters)==null?void 0:d.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(g=(b=o.parameters)==null?void 0:b.docs)==null?void 0:g.source}}};var L,u,k;r.parameters={...r.parameters,docs:{...(L=r.parameters)==null?void 0:L.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(k=(u=r.parameters)==null?void 0:u.docs)==null?void 0:k.source}}};var I,f,x;s.parameters={...s.parameters,docs:{...(I=s.parameters)==null?void 0:I.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(x=(f=s.parameters)==null?void 0:f.docs)==null?void 0:x.source}}};var S,T,h;l.parameters={...l.parameters,docs:{...(S=l.parameters)==null?void 0:S.docs,source:{originalSource:`() => {
+  const [locked, setLocked] = useState(false);
+  const handleToggleLock = () => setLocked(!locked);
+  return <Label label="Label" lock={{
+    visible: true,
+    active: locked,
+    onClick: handleToggleLock,
+    tooltip: locked ? 'Unlock' : 'Lock',
+    testId: 'testId'
+  }} />;
+}`,...(h=(T=l.parameters)==null?void 0:T.docs)==null?void 0:h.source}}};var C,H,P;a.parameters={...a.parameters,docs:{...(C=a.parameters)==null?void 0:C.docs,source:{originalSource:"(args: ILabelProps) => <Label {...args} />",...(P=(H=a.parameters)==null?void 0:H.docs)==null?void 0:P.source}}};const M=["Default","HelpIconTooltip","HelpIconClickable","InfoIcon","LockIcon","LibraryIcon"];export{c as Default,r as HelpIconClickable,o as HelpIconTooltip,s as InfoIcon,a as LibraryIcon,l as LockIcon,M as __namedExportsOrder,K as default};

package/dist/storybook/assets/layout-forms-hnqEzhUh.js

@@ -0,0 +1,16 @@
+import{j as t}from"./jsx-runtime-FsUICBgo.js";import{M as s,C as o}from"./index-xs8f072L.js";import{Default as p,LabelOnLeft as m}from"./field.stories-2Qckj9Ou.js";import{Default as l,LabelsOnLeft as a,Row as h}from"./form.stories-NIwGiDxn.js";import{useMDXComponents as n}from"./index-4YXVTraW.js";import"./index-RfLt4OUa.js";import"./iframe-7Gvk33Dy.js";import"../sb-preview/runtime.js";import"./index-miLrID2P.js";import"./inheritsLoose-8sb_A2v4.js";import"./assertThisInitialized-4q6YPdh3.js";import"./index-R5dkQuFe.js";import"./index-PPLHz8o0.js";import"./field-fx75Y95f.js";import"./index-VW3EWkuE.js";import"./label-CezqEpI3.js";import"./common-types-U65vzrrz.js";import"./help-icon-DUhtRK0A.js";import"./tooltip-pjcB4ZxN.js";import"./icon-8EQazuuW.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";import"./input-vzl5J-q1.js";import"./types-5uVBABF4.js";import"./lodash-Bmg8FrMx.js";import"./text-6KQ6ntOV.js";import"./select-Bp8YY8Ze.js";import"./memoize-one.esm-hqe5SRxC.js";import"./types-VB5zD18b.js";import"./actions-MkrpU3sl.js";import"./button-MXXjI7Bb.js";import"./spinner-R8Il4aRe.js";import"./badge-23Ty_zBt.js";import"./select.input-zP5tW20f.js";import"./check-box-w174Mu0R.js";import"./button-group-f5VgIRsa.js";import"./toggle-gxvny8zu.js";import"./input-group-R8LoqKRn.js";import"./input-group-addon-BHVsW9mL.js";import"./slider-0HIxE6AZ.js";import"./objectSpread2-93s0nBry.js";import"./index-ugi_ZH6T.js";import"./textarea-c5fYK9-8.js";import"./radio-button-9Xi1TwWI.js";import"./form-row-bwoDTUga.js";function r(i){const e=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code"},n(),i.components);return t.jsxs(t.Fragment,{children:[t.jsx(s,{title:"Layout (Forms)"}),`
+`,t.jsx(e.h1,{id:"layout-forms",children:"Layout (Forms)"}),`
+`,t.jsx(e.h2,{id:"field",children:"Field"}),`
+`,t.jsxs(e.p,{children:["This is a wrapper for any form element with default bottom margin, and props like ",t.jsx(e.code,{children:"label"})," for other default styling."]}),`
+`,t.jsx(o,{of:p}),`
+`,t.jsxs(e.p,{children:["For inline labels, use the ",t.jsx(e.code,{children:"labelLeft"})," prop (and the optional ",t.jsx(e.code,{children:"labelWidth"}),")."]}),`
+`,t.jsx(o,{of:m}),`
+`,t.jsx(e.h2,{id:"stacked",children:"Stacked"}),`
+`,t.jsxs(e.p,{children:["This is the simplest form layout, and works well when horizontal space is limited, or inputs vary in height (e.g. ",t.jsx(e.code,{children:"TextArea"}),")."]}),`
+`,t.jsx(o,{of:l}),`
+`,t.jsx(e.h2,{id:"stacked-with-inline-labels",children:"Stacked with inline labels"}),`
+`,t.jsxs(e.p,{children:["This has the same markup, but with ",t.jsx(e.code,{children:"labelLeft"})," and ",t.jsx(e.code,{children:"labelWidth"})," set on each field."]}),`
+`,t.jsx(o,{of:a}),`
+`,t.jsx(e.h2,{id:"row",children:"Row"}),`
+`,t.jsxs(e.p,{children:["Wrapping a group of form controls in ",t.jsx(e.code,{children:"FormRow"})," arranges them horizontally, and applies default spacing between each item. This works well when vertical space is limited, because inputs will only wrap onto the next line when they need to."]}),`
+`,t.jsx(o,{of:h})]})}function nt(i={}){const{wrapper:e}=Object.assign({},n(),i.components);return e?t.jsx(e,Object.assign({},i,{children:t.jsx(r,i)})):r(i)}export{nt as default};

package/dist/storybook/assets/{layout-general-QgIJDQ4H.js → layout-general-GKzWTVlq.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r,C as n}from"./index-_waogfzH.js";import{Center as d,SpaceBetween as a,JustifyEnd as c,Column as l}from"./flex.stories-lLz0Xrt_.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-6OLsjlcP.js";import{useMDXComponents as s}from"./index-4YXVTraW.js";import"./index-RfLt4OUa.js";import"./iframe-NU_z28D3.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-RYZsoWEN.js";import"./button-7V8oA22w.js";import"./index-VW3EWkuE.js";import"./common-types-U65vzrrz.js";import"./disabled-context-urNQThQz.js";import"./spinner-R8Il4aRe.js";import"./icon-y1a2N5SZ.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./tooltip-HEHiU__l.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-Bk0bpNfe.js";import"./help-icon--rUDxLUD.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)"}),`
+import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r,C as n}from"./index-xs8f072L.js";import{Center as d,SpaceBetween as a,JustifyEnd as c,Column as l}from"./flex.stories-Vlk77f1V.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-U4nQqgWb.js";import{useMDXComponents as s}from"./index-4YXVTraW.js";import"./index-RfLt4OUa.js";import"./iframe-7Gvk33Dy.js";import"../sb-preview/runtime.js";import"./index-miLrID2P.js";import"./inheritsLoose-8sb_A2v4.js";import"./assertThisInitialized-4q6YPdh3.js";import"./index-R5dkQuFe.js";import"./index-PPLHz8o0.js";import"./flex-RYZsoWEN.js";import"./button-MXXjI7Bb.js";import"./index-VW3EWkuE.js";import"./common-types-U65vzrrz.js";import"./disabled-context-urNQThQz.js";import"./spinner-R8Il4aRe.js";import"./icon-8EQazuuW.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./tooltip-pjcB4ZxN.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-CRsqGmBL.js";import"./help-icon-DUhtRK0A.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)"}),`
 `,e.jsx(o.h1,{id:"layout-general",children:"Layout (General)"}),`
 `,e.jsx(o.h2,{id:"flex",children:"Flex"}),`
 `,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-
 `,e.jsx(n,{of:g}),`
 `,e.jsx(o.h3,{id:"responsive",children:"Responsive"}),`
 `,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)."]}),`
-`,e.jsx(n,{of:w})]})}function Q(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{Q as default};
+`,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};

package/dist/storybook/assets/list-obj4NAnI.js

@@ -0,0 +1,8 @@
+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-VXFRDikp.js";import{C as le}from"./card-0r8RRVk-.js";import{l as r,N as se,M as ie,L as oe}from"./meta-content-egPJiNdW.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-MkrpU3sl.js";import{B as F}from"./badge-23Ty_zBt.js";import{I as w}from"./icon-8EQazuuW.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"}},expanding:{defaultValue:null,description:"",name:"expanding",required:!1,type:{name:"boolean"}},invokeEditOnRowClick:{defaultValue:null,description:"",name:"invokeEditOnRowClick",required:!1,type:{name:"boolean"}},onListReorder:{defaultValue:null,description:"",name:"onListReorder",required:!1,type:{name:"((args: { from?: number; to?: number; }) => void) | undefined"}},items:{defaultValue:null,description:"",name:"items",required:!0,type:{name:"IListItem[]"}},provided:{defaultValue:null,description:"",name:"provided",required:!1,type:{name:"any"}},snapshot:{defaultValue:null,description:"",name:"snapshot",required:!1,type:{name:"DroppableStateSnapshot"}}}}}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((q,$,ee)=>ee<l?q+$.clientHeight+x:q,0),S=j.current.clientHeight/2-I.current[l].clientHeight/2,C=D-S;if(t){const q=v.current.clientHeight/2;j.current.scrollTop=C+q}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 S,C;const x=(S=l==null?void 0:l.source)==null?void 0:S.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:`{
+    scrollable: false,
+    hideScrollbar: false,
+    triggerScrollToActiveItem: false,
+    infiniteScroll: false,
+    limit: 10,
+    infiniteScrollTarget: undefined,
+  }`},description:"",name:"scrollDetails",required:!1,type:{name:"IScrollDetails"}}}}}catch{}export{P as L,M as a};

package/dist/storybook/assets/{list.stories-data-IcFu6vvd.js → list.stories-data-xxLjz2Y6.js}

@@ -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-RYZsoWEN.js";import{M as d}from"./actions-Z9jDWreP.js";import{I as n}from"./icon-y1a2N5SZ.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};
+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-RYZsoWEN.js";import{M as d}from"./actions-MkrpU3sl.js";import{I as n}from"./icon-8EQazuuW.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{h as a,f as b,C as c,y as d,S as e,r as f,k as g,j as h,N as i,E as j,A as k,T as l,O as m,D as n,w as o};

package/dist/storybook/assets/list.stories-q5ZUuhM_.js

@@ -0,0 +1,478 @@
+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-EZH1n7K1.js";import{L as y,a as P}from"./list-obj4NAnI.js";import{L as mn}from"./meta-content-egPJiNdW.js";import{F as ln}from"./flex-RYZsoWEN.js";import{a as cn,b as pn,c as un,d as gn,e as hn,f as yn,g as bn,h as kn,i as xn,j as fn,k as Sn,m as In,n as Cn,o as rn}from"./list.stories-data-xxLjz2Y6.js";import"./inheritsLoose-8sb_A2v4.js";import"./index-4QtD-hFu.js";import"./tiny-invariant-R4kOKlvx.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./index-VW3EWkuE.js";import"./index.es-VXFRDikp.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-MkrpU3sl.js";import"./lodash-Bmg8FrMx.js";import"./button-MXXjI7Bb.js";import"./spinner-R8Il4aRe.js";import"./icon-8EQazuuW.js";import"./tslib.es6-OIsz3r9a.js";import"./tooltip-pjcB4ZxN.js";import"./types-VB5zD18b.js";import"./types-5uVBABF4.js";import"./badge-23Ty_zBt.js";import"./loader-TGOJBZQG.js";import"./heading-CRsqGmBL.js";import"./help-icon-DUhtRK0A.js";const ra={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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(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 => {
+  return <List {...args} />;
+}`,...(_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:`() => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const list = {
+    name: 'Animals',
+    items: [...Array(50)].map((item, index) => ({
+      id: index,
+      name: \`Aardvark #\${index + 1}\`,
+      active: index === activeIndex,
+      onClick: () => setActiveIndex(index)
+    }))
+  };
+  return <div style={{
+    height: 200,
+    overflow: 'auto'
+  }}>
+      <List list={list} scrollDetails={{
+      infiniteScroll: true,
+      scrollable: true,
+      limit: 10
+    }} />
+    </div>;
+}`,...(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:`() => {
+  const reducer: Reducer<StateShape, Action> = (state, action) => {
+    switch (action.type) {
+      case 'headingClicked':
+        {
+          const {
+            headingKey
+          } = action.payload;
+          return produce(state, draft => {
+            const heading = draft[headingKey];
+            heading.expanded = !heading.expanded;
+          });
+        }
+      case 'itemClicked':
+        {
+          const {
+            headingKey,
+            itemIndex
+          } = action.payload;
+          return produce(state, draft => {
+            Object.keys(draft).forEach(key => {
+              draft[key].items.forEach((item, i) => {
+                item.active = key === headingKey && i === itemIndex;
+              });
+            });
+          });
+        }
+      case 'addClicked':
+        {
+          const {
+            headingKey
+          } = action.payload;
+          return produce(state, draft => {
+            const heading = draft[headingKey];
+            heading.expanded = true;
+            heading.items.push({
+              name: \`\${heading.label} #\${heading.items.length + 1}\`
+            });
+          });
+        }
+      case 'deleteClicked':
+        {
+          const {
+            headingKey,
+            itemIndex
+          } = action.payload;
+          return produce(state, draft => {
+            let {
+              items
+            } = draft[headingKey];
+            delete items[itemIndex];
+            draft[headingKey].items = items.filter(i => i); //remove empty slots
+          });
+        }
+
+      default:
+        return state;
+    }
+  };
+  const initialState = () => ({
+    mammals: {
+      draggable: true,
+      name: 'Mammals',
+      key: 'mammals',
+      label: 'Mammals',
+      expanded: true,
+      items: [{
+        name: 'Click item to scroll',
+        type: 'Heading'
+      }, {
+        name: 'Mammal #1',
+        active: true
+      }, {
+        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: true,
+      items: [{
+        name: 'Click item to scroll',
+        type: 'Heading'
+      }, {
+        name: 'Amphibian #1',
+        active: true
+      }, {
+        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'
+      }]
+    }
+  });
+  const [state, dispatch] = useReducer(reducer, {}, () => initialState());
+  const [triggerScroll, setTriggerScroll] = useState(false);
+  const onClickItem = (headingKey: string, itemIndex: number) => {
+    setTriggerScroll(true);
+    dispatch({
+      type: 'itemClicked',
+      payload: {
+        headingKey,
+        itemIndex
+      }
+    });
+    // will execute after stack is cleared
+    setTimeout(() => setTriggerScroll(false), 0);
+  };
+  const onAddItem = (headingKey: string) => {
+    dispatch({
+      type: 'addClicked',
+      payload: {
+        headingKey
+      }
+    });
+  };
+  const onDeleteItem = (headingKey: string, itemIndex: number) => dispatch({
+    type: 'deleteClicked',
+    payload: {
+      headingKey,
+      itemIndex
+    }
+  });
+  const {
+    mammals,
+    amphibians
+  } = state;
+  const hydrateList = (list: any) => ({
+    ...list,
+    actions: [{
+      label: 'Add',
+      primary: true,
+      icon: 'add',
+      onClick: () => onAddItem(list.key)
+    }],
+    items: list.items.map((item: any, itemIndex: number) => {
+      if (item.type == 'Heading') {
+        return {
+          ...item,
+          id: itemIndex
+        };
+      }
+      return {
+        ...item,
+        id: itemIndex,
+        onClick: () => onClickItem(list.key, itemIndex),
+        actions: [{
+          label: 'Delete',
+          icon: 'delete',
+          onClick: () => onDeleteItem(list.key, itemIndex)
+        }]
+      };
+    })
+  });
+  const height = 300;
+  return <Flex gap>
+      <List list={hydrateList(mammals)} bordered height={height} scrollDetails={{
+      scrollable: true,
+      hideScrollbar: false,
+      triggerScrollToActiveItem: triggerScroll
+    }} />
+      <List list={hydrateList(amphibians)} bordered stickyHeader height={height} scrollDetails={{
+      scrollable: true,
+      hideScrollbar: false,
+      triggerScrollToActiveItem: triggerScroll
+    }} />
+    </Flex>;
+}`,...(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:`() => {
+  const reducer: Reducer<StateShape, Action> = (state, action) => {
+    switch (action.type) {
+      case 'headingClicked':
+        {
+          const {
+            headingKey
+          } = action.payload;
+          return produce(state, draft => {
+            const heading = draft[headingKey];
+            heading.expanded = !heading.expanded;
+          });
+        }
+      case 'itemClicked':
+        {
+          const {
+            headingKey,
+            itemIndex
+          } = action.payload;
+          return produce(state, draft => {
+            Object.keys(draft).forEach(key => {
+              draft[key].items.forEach((item, i) => {
+                item.active = key === headingKey && i === itemIndex;
+              });
+            });
+          });
+        }
+      case 'addClicked':
+        {
+          const {
+            headingKey
+          } = action.payload;
+          return produce(state, draft => {
+            const heading = draft[headingKey];
+            heading.expanded = true;
+            heading.items.push({
+              name: \`\${heading.label} #\${heading.items.length + 1}\`
+            });
+          });
+        }
+      case 'deleteClicked':
+        {
+          const {
+            headingKey,
+            itemIndex
+          } = action.payload;
+          return produce(state, draft => {
+            let {
+              items
+            } = draft[headingKey];
+            delete items[itemIndex];
+            draft[headingKey].items = items.filter(i => i); //remove empty slots
+          });
+        }
+
+      default:
+        return state;
+    }
+  };
+  const initialState: () => StateShape = () => ({
+    mammals: {
+      key: 'mammals',
+      label: 'Mammals',
+      expanded: true,
+      items: [{
+        name: 'Aardvark',
+        active: true
+      }, {
+        name: 'Kangaroo'
+      }]
+    },
+    amphibians: {
+      key: 'amphibians',
+      label: 'Amphibians',
+      expanded: true,
+      items: [{
+        name: 'Frog'
+      }]
+    }
+  });
+  const [state, dispatch] = useReducer(reducer, initialState());
+  const onClickHeading = (headingKey: string) => dispatch({
+    type: 'headingClicked',
+    payload: {
+      headingKey
+    }
+  });
+  const onClickItem = (headingKey: string, itemIndex: number) => dispatch({
+    type: 'itemClicked',
+    payload: {
+      headingKey,
+      itemIndex
+    }
+  });
+  const onAddItem = (headingKey: string) => dispatch({
+    type: 'addClicked',
+    payload: {
+      headingKey
+    }
+  });
+  const onDeleteItem = (headingKey: string, itemIndex: number) => dispatch({
+    type: 'deleteClicked',
+    payload: {
+      headingKey,
+      itemIndex
+    }
+  });
+  const {
+    mammals,
+    amphibians
+  } = state;
+  const hydrateHeading = (list: ListSection) => ({
+    name: list.label,
+    metaCount: list.items.length,
+    expanded: list.expanded,
+    onClick: () => onClickHeading(list.key),
+    actions: [{
+      label: 'Add',
+      primary: true,
+      icon: 'add',
+      onClick: () => onAddItem(list.key)
+    }]
+  });
+  const hydrateList = (list: ListSection) => ({
+    ...list,
+    items: list.items.map((item, itemIndex) => ({
+      ...item,
+      id: itemIndex,
+      onClick: () => onClickItem(list.key, itemIndex),
+      actions: [{
+        label: 'Delete',
+        icon: 'delete',
+        onClick: () => onDeleteItem(list.key, itemIndex)
+      }]
+    }))
+  });
+  return <>
+      <ListHeading name="Animals" />
+      <ListSubheading item={hydrateHeading(mammals)} />
+      {mammals.expanded && <List noHeader list={hydrateList(mammals)} />}
+      <ListSubheading item={hydrateHeading(amphibians)} />
+      {amphibians.expanded && <List noHeader list={hydrateList(amphibians)} />}
+    </>;
+}`,...(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:`() => {
+  const arraymove = (arr: ListItem[], from?: number, to?: number): ListItem[] => {
+    if (from && isNaN(from) || to && isNaN(to) || from === to) {
+      return arr;
+    }
+    const copy = [...arr];
+    if (typeof to === 'number' && typeof from === 'number') {
+      copy.splice(to, 0, copy.splice(from, 1)[0]);
+    }
+    return copy;
+  };
+  const beautifulDnD = {
+    name: 'List Name',
+    draggable: true,
+    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: () => {}
+      }]
+    }]
+  };
+  const [reorderedItems, setReorderedItems] = useState(beautifulDnD.items);
+  const onListReorder = (reorderData: IReorderData) => {
+    const {
+      to,
+      from
+    } = reorderData;
+    setReorderedItems((arraymove((reorderedItems as any), from, to) as any));
+  };
+  return <List list={{
+    ...beautifulDnD,
+    items: reorderedItems
+  }} draggable onListReorder={onListReorder} />;
+}`,...(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:`() => {
+  const list = {
+    items: [{
+      id: 1,
+      name: 'Dashboard',
+      component: Link,
+      url: '/dashboard'
+    }, {
+      id: 2,
+      name: 'Settings',
+      component: Link,
+      url: '/settings'
+    }]
+  };
+  return <HashRouter>
+      <List list={list} noHeader />
+      <Switch>
+        <Route path="/dashboard">Dashboard</Route>
+        <Route path="/settings">Settings</Route>
+      </Switch>
+    </HashRouter>;
+}`,...(tn=(an=q.parameters)==null?void 0:an.docs)==null?void 0:tn.source}}};const sa=["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,sa as __namedExportsOrder,ra as default};