@oliasoft-open-source/react-ui-library 4.0.0-beta-39 → 4.0.0-beta-41

package/dist/storybook/assets/list.stories-5ed17982.js

@@ -0,0 +1,455 @@
+import{j as s}from"./jsx-runtime-f961835c.js";import{r as $}from"./index-f80c8c95.js";import{p as k}from"./immer.esm-5c06d4d0.js";import{L as x,a as X}from"./list-1c815d64.js";import{L as Ue}from"./list-heading-e884ff66.js";import{F as Ve}from"./flex-47732c42.js";import{l as Ye,a as Ze,b as en,c as nn,d as an,e as tn,f as rn,g as sn,h as on,i as dn,j as mn,k as ln,m as Pe}from"./list.stories-data-8d368568.js";import"./index-a80ed1cf.js";import"./index.es-2e8c1ff9.js";import"./inheritsLoose-d4851ab8.js";import"./redux-10ee6be7.js";import"./objectSpread2-fdee9b6d.js";import"./hoist-non-react-statics.cjs-cd4c875b.js";import"./index-3d476d02.js";import"./memoize-one.esm-52518564.js";import"./icon-6cfc6944.js";import"./index-c89a1915.js";import"./disabled-context-d654f6ff.js";import"./card-2de0de0b.js";import"./common-types-3a5f9d98.js";import"./actions-3e8ee8ec.js";import"./lodash-75c70a11.js";import"./button-9027cb35.js";import"./spinner-cb92a546.js";import"./tooltip-23e84186.js";import"./types-cc224262.js";import"./types-332ceaf3.js";import"./badge-1615fbe5.js";import"./loader-1947f6cd.js";import"./heading-5eb5ea78.js";import"./help-icon-6216ea0b.js";const _n={title:"Basic/List",component:x,args:{list:Ye,noHeader:!0},parameters:{layout:"fullscreen"}},o=d=>s.jsx(x,{...d}),B=o.bind({}),L=o.bind({});L.args={list:Ze};const D=o.bind({});D.args={list:en};const v=o.bind({});v.args={list:nn};const K=o.bind({});K.args={list:an,expanding:!0};const H=o.bind({});H.args={list:tn,noHeader:!1};const M=o.bind({});M.args={list:rn};const j=o.bind({});j.args={list:sn};const T=o.bind({});T.args={list:on};const R=o.bind({});R.args={list:dn,noHeader:!1};const E=o.bind({});E.args={bordered:!0};const N=o.bind({});N.args={list:mn};const w=o.bind({});w.args={list:ln};const I=o.bind({});I.args={list:Pe,noHeader:!1,stickyHeader:!0};I.parameters={docs:{story:{inline:!1,iframeHeight:200}}};const f=o.bind({});f.args={list:Pe,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 O=()=>{const[d,y]=$.useState(0),b={name:"Animals",items:[...Array(50)].map((m,l)=>({id:l,name:`Aardvark #${l+1}`,active:l===d,onClick:()=>y(l)}))};return s.jsx("div",{style:{height:200,overflow:"auto"},children:s.jsx(x,{list:b,scrollDetails:{infiniteScroll:!0,scrollable:!0,limit:10}})})},J=()=>{const d=(e,a)=>{switch(a.type){case"headingClicked":{const{headingKey:t}=a.payload;return k(e,i=>{const r=i[t];r.expanded=!r.expanded})}case"itemClicked":{const{headingKey:t,itemIndex:i}=a.payload;return k(e,r=>{Object.keys(r).forEach(h=>{r[h].items.forEach((A,Qe)=>{A.active=h===t&&Qe===i})})})}case"addClicked":{const{headingKey:t}=a.payload;return k(e,i=>{const r=i[t];r.expanded=!0,r.items.push({name:`${r.label} #${r.items.length+1}`})})}case"deleteClicked":{const{headingKey:t,itemIndex:i}=a.payload;return k(e,r=>{let{items:h}=r[t];delete h[i],r[t].items=h.filter(A=>A)})}default:return e}},y=()=>({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"}]}}),[b,m]=$.useReducer(d,{},()=>y()),[l,u]=$.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:S,amphibians:F}=b,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(Ve,{gap:!0,children:[s.jsx(x,{list:C(S),bordered:!0,height:n,scrollDetails:{scrollable:!0,hideScrollbar:!1,triggerScrollToActiveItem:l}}),s.jsx(x,{list:C(F),bordered:!0,stickyHeader:!0,height:n,scrollDetails:{scrollable:!0,hideScrollbar:!1,triggerScrollToActiveItem:l}})]})},_=()=>{const d=(n,e)=>{switch(e.type){case"headingClicked":{const{headingKey:a}=e.payload;return k(n,t=>{const i=t[a];i.expanded=!i.expanded})}case"itemClicked":{const{headingKey:a,itemIndex:t}=e.payload;return k(n,i=>{Object.keys(i).forEach(r=>{i[r].items.forEach((h,A)=>{h.active=r===a&&A===t})})})}case"addClicked":{const{headingKey:a}=e.payload;return k(n,t=>{const i=t[a];i.expanded=!0,i.items.push({name:`${i.label} #${i.items.length+1}`})})}case"deleteClicked":{const{headingKey:a,itemIndex:t}=e.payload;return k(n,i=>{let{items:r}=i[a];delete r[t],i[a].items=r.filter(h=>h)})}default:return n}},y=()=>({mammals:{key:"mammals",label:"Mammals",expanded:!0,items:[{name:"Aardvark",active:!0},{name:"Kangaroo"}]},amphibians:{key:"amphibians",label:"Amphibians",expanded:!0,items:[{name:"Frog"}]}}),[b,m]=$.useReducer(d,y()),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:S}=b,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(Ue,{name:"Animals"}),s.jsx(X,{item:F(g)}),g.expanded&&s.jsx(x,{noHeader:!0,list:C(g)}),s.jsx(X,{item:F(S)}),S.expanded&&s.jsx(x,{noHeader:!0,list:C(S)})]})},W=()=>{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},y={name:"List Name",draggable:!0,items:[{id:1,name:"element 1",actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]},{id:2,name:"element 2",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:()=>{}}]}]},[b,m]=$.useState(y.items),l=u=>{const{to:c,from:p}=u;m(d(b,p,c))};return s.jsx(x,{list:{...y,items:b},draggable:!0,onListReorder:l})};var q,z,G;B.parameters={...B.parameters,docs:{...(q=B.parameters)==null?void 0:q.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(G=(z=B.parameters)==null?void 0:z.docs)==null?void 0:G.source}}};var P,Q,U;L.parameters={...L.parameters,docs:{...(P=L.parameters)==null?void 0:P.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(U=(Q=L.parameters)==null?void 0:Q.docs)==null?void 0:U.source}}};var V,Y,Z;D.parameters={...D.parameters,docs:{...(V=D.parameters)==null?void 0:V.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(Z=(Y=D.parameters)==null?void 0:Y.docs)==null?void 0:Z.source}}};var ee,ne,ae;v.parameters={...v.parameters,docs:{...(ee=v.parameters)==null?void 0:ee.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(ae=(ne=v.parameters)==null?void 0:ne.docs)==null?void 0:ae.source}}};var te,ie,re;K.parameters={...K.parameters,docs:{...(te=K.parameters)==null?void 0:te.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(re=(ie=K.parameters)==null?void 0:ie.docs)==null?void 0:re.source}}};var se,oe,de;H.parameters={...H.parameters,docs:{...(se=H.parameters)==null?void 0:se.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(de=(oe=H.parameters)==null?void 0:oe.docs)==null?void 0:de.source}}};var me,le,ce;M.parameters={...M.parameters,docs:{...(me=M.parameters)==null?void 0:me.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(ce=(le=M.parameters)==null?void 0:le.docs)==null?void 0:ce.source}}};var pe,ue,ge;j.parameters={...j.parameters,docs:{...(pe=j.parameters)==null?void 0:pe.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(ge=(ue=j.parameters)==null?void 0:ue.docs)==null?void 0:ge.source}}};var he,ye,be;T.parameters={...T.parameters,docs:{...(he=T.parameters)==null?void 0:he.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(be=(ye=T.parameters)==null?void 0:ye.docs)==null?void 0:be.source}}};var ke,xe,fe;R.parameters={...R.parameters,docs:{...(ke=R.parameters)==null?void 0:ke.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(fe=(xe=R.parameters)==null?void 0:xe.docs)==null?void 0:fe.source}}};var Ie,Se,Ce;E.parameters={...E.parameters,docs:{...(Ie=E.parameters)==null?void 0:Ie.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(Ce=(Se=E.parameters)==null?void 0:Se.docs)==null?void 0:Ce.source}}};var Ae,Le,De;N.parameters={...N.parameters,docs:{...(Ae=N.parameters)==null?void 0:Ae.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(De=(Le=N.parameters)==null?void 0:Le.docs)==null?void 0:De.source}}};var ve,Ke,He;w.parameters={...w.parameters,docs:{...(ve=w.parameters)==null?void 0:ve.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(He=(Ke=w.parameters)==null?void 0:Ke.docs)==null?void 0:He.source}}};var Me,je,Te;I.parameters={...I.parameters,docs:{...(Me=I.parameters)==null?void 0:Me.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(Te=(je=I.parameters)==null?void 0:je.docs)==null?void 0:Te.source}}};var Re,Ee,Ne;f.parameters={...f.parameters,docs:{...(Re=f.parameters)==null?void 0:Re.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(Ne=(Ee=f.parameters)==null?void 0:Ee.docs)==null?void 0:Ne.source}}};var we,$e,Fe;O.parameters={...O.parameters,docs:{...(we=O.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>;
+}`,...(Fe=($e=O.parameters)==null?void 0:$e.docs)==null?void 0:Fe.source}}};var Be,Oe,Je;J.parameters={...J.parameters,docs:{...(Be=J.parameters)==null?void 0:Be.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>;
+}`,...(Je=(Oe=J.parameters)==null?void 0:Oe.docs)==null?void 0:Je.source}}};var _e,We,Xe;_.parameters={..._.parameters,docs:{...(_e=_.parameters)==null?void 0:_e.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)} />}
+    </>;
+}`,...(Xe=(We=_.parameters)==null?void 0:We.docs)==null?void 0:Xe.source}}};var qe,ze,Ge;W.parameters={...W.parameters,docs:{...(qe=W.parameters)==null?void 0:qe.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: 'element 2',
+      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} />;
+}`,...(Ge=(ze=W.parameters)==null?void 0:ze.docs)==null?void 0:Ge.source}}};const Wn=["Default","Actions","Menus","Details","Expanding","Header","Badges","Nested","InvalidItems","JSXTitles","Bordered","IconWithTooltip","Metacount","StickyHeader","Scrollable","InfiniteScroll","ScrollToActiveItem","HeadingsManaged","ManagedDragAndDrop"];export{L as Actions,M as Badges,E as Bordered,B as Default,v as Details,K as Expanding,H as Header,_ as HeadingsManaged,N as IconWithTooltip,O as InfiniteScroll,T as InvalidItems,R as JSXTitles,W as ManagedDragAndDrop,D as Menus,w as Metacount,j as Nested,J as ScrollToActiveItem,f as Scrollable,I as StickyHeader,Wn as __namedExportsOrder,_n as default};

package/dist/storybook/assets/list.stories-data-8d368568.js

@@ -0,0 +1 @@
+import{j as s}from"./jsx-runtime-f961835c.js";import{I as i,T as r}from"./common-types-3a5f9d98.js";import{F as o}from"./flex-47732c42.js";import{M as d}from"./actions-3e8ee8ec.js";import{I as n}from"./icon-6cfc6944.js";import{M as l}from"./types-cc224262.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"}],A={items:a},c={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={...c,items:p},C={...c,name:s.jsxs(o,{gap:"var(--padding-xs)",alignItems:"center",children:["Animals",s.jsx(n,{icon:i.STAR})]}),items:a.map(e=>({...e,name:s.jsxs(o,{gap:"var(--padding-xs)",alignItems:"center",children:[e.name,s.jsx(n,{icon:i.STAR})]})}))};a.map(e=>({...e,actions:[{childComponent:s.jsx(d,{menu:{trigger:r.COMPONENT,component:s.jsx(n,{icon:i.MENU}),placement:"bottom-end",sections:[{type:l.OPTION,label:"Item",onClick:()=>{}},{type:l.OPTION,label:"Item",onClick:()=>{}}]}})}]}));const h={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,t)=>({...e,label:{value:String(t+1),color:"var(--color-text-info)"}}))},T={...m,items:m.items.map((e,t)=>({...e,label:{value:String(t+1),color:"var(--color-text-info)"}}))},j={items:a.map(e=>({...e,actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]}))},y={items:a.map((e,t)=>({...e,details:"Description goes here",metadata:"2019-05-03 09:03:51",testId:`story-list-item-${t}`}))},f={items:a.map(e=>({...e,content:s.jsx("div",{children:"Example content element (for show/hide)."})}))},S={items:g},N={items:[...a,{id:4,name:"Dodo",invalid:!0}]},E={items:a.map(e=>({...e,icon:{icon:"success",color:"var(--color-text-success)",tooltip:{text:s.jsx(s.Fragment,{children:"Tooltip goes here"})}}}))},O={items:a.map(e=>({...e,metaCount:3}))},D={name:"Animals",items:[...Array(50)].map((e,t)=>({id:t,name:`Aardvark #${t+1}`}))};export{j as a,h as b,y as c,f as d,c as e,k as f,S as g,N as h,C as i,E as j,O as k,A as l,D as m,T as n};

package/dist/storybook/assets/loader-1947f6cd.js

@@ -0,0 +1 @@
+import{j as t}from"./jsx-runtime-f961835c.js";import{c as p}from"./index-a80ed1cf.js";import{a as l}from"./common-types-3a5f9d98.js";const v="_loader_477i5_1",h="_fullViewPortSize_477i5_7",x="_cover_477i5_14",y="_dimmer_477i5_21",V="_content_477i5_44",g="_text_477i5_49",N="_details_477i5_53",a={loader:v,fullViewPortSize:h,cover:x,dimmer:y,content:V,text:g,details:N},s=({width:i,height:d,text:n="",details:o="",fullViewPortSize:c=!1,cover:u=!1,children:m=null,theme:r=l.DARK,testId:e=null})=>{const f=r===l.DARK?l.WHITE:l.INHERIT,_=r==="white"?"var(--color-background-raised)":r==="light"?"var(--color-background)":"black";return t.jsx("div",{className:p(a.loader,u?a.cover:"",{[a.fullViewPortSize]:c}),style:{width:i,height:d},"data-testid":e,children:t.jsx("div",{className:a.dimmer,style:{background:_,color:f},children:t.jsxs("div",{className:a.content,"data-testid":e&&`${e}-content`,children:[m,n&&t.jsx("div",{className:a.text,"data-testid":e&&`${e}-text`,children:n}),o&&t.jsx("div",{className:a.details,"data-testid":e&&`${e}-details`,children:o})]})})})};try{s.displayName="Loader",s.__docgenInfo={description:"",displayName:"Loader",props:{fullViewPortSize:{defaultValue:{value:"false"},description:"",name:"fullViewPortSize",required:!1,type:{name:"boolean"}},cover:{defaultValue:{value:"false"},description:"",name:"cover",required:!1,type:{name:"boolean"}},width:{defaultValue:null,description:"",name:"width",required:!1,type:{name:"TStringOrNumber"}},height:{defaultValue:null,description:"",name:"height",required:!1,type:{name:"TStringOrNumber"}},text:{defaultValue:{value:""},description:"",name:"text",required:!1,type:{name:"string"}},details:{defaultValue:{value:""},description:"",name:"details",required:!1,type:{name:"ReactNode"}},testId:{defaultValue:{value:"null"},description:"",name:"testId",required:!1,type:{name:"string | null"}},theme:{defaultValue:{value:"Theme.DARK"},description:"",name:"theme",required:!1,type:{name:"string"}}}}}catch{}export{s as L};

package/dist/storybook/assets/loader-85a5e78d.css

@@ -0,0 +1 @@
+._loader_477i5_1{width:100%;height:100%;position:relative;border-radius:inherit}._loader_477i5_1._fullViewPortSize_477i5_7{position:absolute;top:0;left:0;width:100vw;height:100vh}._loader_477i5_1._cover_477i5_14{position:absolute;top:0;left:0;bottom:0;right:0}._dimmer_477i5_21{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;vertical-align:middle;padding:var(--padding);opacity:0;line-height:1;animation-fill-mode:both;animation-duration:.5s;transition:background-color .5s linear;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;will-change:opacity;z-index:var(--zindex-dimmer);display:flex;opacity:.95}._content_477i5_44{display:flex;flex-direction:column;align-items:center}._text_477i5_49{margin-top:var(--padding);opacity:.6}._details_477i5_53{margin-top:var(--padding-xs)}

package/dist/storybook/assets/loader.stories-770a461c.js

@@ -0,0 +1,83 @@
+import{j as e}from"./jsx-runtime-f961835c.js";import{r as N}from"./index-f80c8c95.js";import{a as m}from"./common-types-3a5f9d98.js";import{L as g}from"./loader-1947f6cd.js";import{P as M}from"./progress-bar-40b8dbf0.js";import{S as x}from"./spinner-cb92a546.js";import{S as l}from"./spacer-54db0620.js";import{B as L}from"./button-9027cb35.js";import{C as q}from"./card-2de0de0b.js";import"./index-a80ed1cf.js";import"./index-c89a1915.js";import"./disabled-context-d654f6ff.js";import"./icon-6cfc6944.js";import"./inheritsLoose-d4851ab8.js";import"./tooltip-23e84186.js";import"./index-3d476d02.js";const le={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:m.LIGHT};const o=S.bind({});o.args={theme:m.DARK,fullViewPortSize:!0};const i=h.bind({});i.args={theme:m.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(l,{height:"var(--padding-xs)"}),e.jsx("div",{children:"Step 2: Dolor est"}),e.jsx(l,{height:"var(--padding-xs)"}),e.jsx("div",{style:{opacity:.5},children:"Step 3: Compendum"}),e.jsx(l,{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(l,{}),e.jsx(q,{children:e.jsxs("div",{style:{position:"relative"},children:[r&&e.jsx(g,{cover:!0,theme:m.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(l,{}),e.jsx(q,{children:e.jsx("div",{style:{position:"relative"},children:r?e.jsx(g,{theme:m.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) => {
+  const {
+    theme
+  } = args;
+  return <Loader {...args}>
+      <Spinner dark={theme !== 'dark'} />
+    </Loader>;
+}`,...(k=(v=a.parameters)==null?void 0:v.docs)==null?void 0:k.source}}};var C,f,P;u.parameters={...u.parameters,docs:{...(C=u.parameters)==null?void 0:C.docs,source:{originalSource:`(args: ILoaderProps) => {
+  const {
+    theme
+  } = args;
+  return <Loader {...args}>
+      <ProgressBar width="300px" inverted={theme === 'dark'} percentage={40} />
+    </Loader>;
+}`,...(P=(f=u.parameters)==null?void 0:f.docs)==null?void 0:P.source}}};var T,B,w;s.parameters={...s.parameters,docs:{...(T=s.parameters)==null?void 0:T.docs,source:{originalSource:`(args: ILoaderProps) => {
+  const {
+    theme
+  } = args;
+  return <Loader {...args}>
+      <Spinner dark={theme !== 'dark'} />
+    </Loader>;
+}`,...(w=(B=s.parameters)==null?void 0:B.docs)==null?void 0:w.source}}};var b,y,I;o.parameters={...o.parameters,docs:{...(b=o.parameters)==null?void 0:b.docs,source:{originalSource:`(args: ILoaderProps) => {
+  const {
+    theme
+  } = args;
+  return <Loader {...args}>
+      <Spinner dark={theme !== 'dark'} />
+    </Loader>;
+}`,...(I=(y=o.parameters)==null?void 0:y.docs)==null?void 0:I.source}}};var E,W,D;i.parameters={...i.parameters,docs:{...(E=i.parameters)==null?void 0:E.docs,source:{originalSource:`(args: ILoaderProps) => {
+  const {
+    theme
+  } = args;
+  return <Loader {...args}>
+      <ProgressBar width="300px" inverted={theme === 'dark'} percentage={40} />
+    </Loader>;
+}`,...(D=(W=i.parameters)==null?void 0:W.docs)==null?void 0:D.source}}};var F,H,V;n.parameters={...n.parameters,docs:{...(F=n.parameters)==null?void 0:F.docs,source:{originalSource:`(args: ILoaderProps) => {
+  const {
+    theme
+  } = args;
+  return <Loader {...args}>
+      <ProgressBar width="300px" inverted={theme === 'dark'} percentage={40} />
+    </Loader>;
+}`,...(V=(H=n.parameters)==null?void 0:H.docs)==null?void 0:V.source}}};var R,z,_;d.parameters={...d.parameters,docs:{...(R=d.parameters)==null?void 0:R.docs,source:{originalSource:`(args: ILoaderProps) => {
+  const {
+    theme
+  } = args;
+  return <Loader {...args}>
+      <ProgressBar width="300px" inverted={theme === 'dark'} percentage={40} />
+    </Loader>;
+}`,...(_=(z=d.parameters)==null?void 0:z.docs)==null?void 0:_.source}}};var A,J,K;c.parameters={...c.parameters,docs:{...(A=c.parameters)==null?void 0:A.docs,source:{originalSource:`() => {
+  const [loading, setLoading] = useState<boolean>(true);
+  return <>
+      <Button label="Toggle loading" onClick={() => setLoading(!loading)} />
+      <Spacer />
+      <Card>
+        <div style={{
+        position: 'relative'
+      }}>
+          {loading && <Loader cover theme={Theme.WHITE}>
+              <Spinner dark />
+            </Loader>}
+          {'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(20)}
+        </div>
+      </Card>
+    </>;
+}`,...(K=(J=c.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};var O,X,G;p.parameters={...p.parameters,docs:{...(O=p.parameters)==null?void 0:O.docs,source:{originalSource:`() => {
+  const [loading, setLoading] = useState<boolean>(true);
+  return <>
+      <Button label="Toggle loading" onClick={() => setLoading(!loading)} />
+      <Spacer />
+      <Card>
+        <div style={{
+        position: 'relative'
+      }}>
+          {loading ? <Loader theme={Theme.WHITE} height="200px">
+              <Spinner dark />
+            </Loader> : <div>
+              {'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(20)}
+            </div>}
+        </div>
+      </Card>
+    </>;
+}`,...(G=(X=p.parameters)==null?void 0:X.docs)==null?void 0:G.source}}};const me=["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,me as __namedExportsOrder,le as default};