@oliasoft-open-source/react-ui-library 4.12.3 → 4.12.4-beta-1

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

@@ -1,476 +0,0 @@
-import{j as r}from"./jsx-runtime-eps93zm2.js";import{r as W}from"./index-DhsZuJvc.js";import{f}from"./immer.esm-BwVl9PS2.js";import{H as on,S as dn,R as z,L as G}from"./react-router-dom-Ck2Y_Fzc.js";import{L as y,a as P}from"./list-By3wp5Wa.js";import{L as mn}from"./meta-content-DNgQbAW0.js";import{F as ln}from"./flex-EllkLxgO.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 fn,j as xn,k as Sn,m as In,n as Cn,o as sn}from"./list.stories-data-Doo2Rqun.js";import"./inheritsLoose-DP0QEDDI.js";import"./index-CEuq6vkz.js";import"./tiny-invariant-DqLgxztJ.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./index-Bk2sglWO.js";import"./index.es-DazXb-ul.js";import"./redux-tRgGMjwY.js";import"./objectSpread2-DW4nTBoq.js";import"./index-CUZDtIZe.js";import"./memoize-one.esm-CcMeOnPo.js";import"./card-EcjmryU9.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./actions-Bax0KeqM.js";import"./lodash-c4VUpsOs.js";import"./button-Cbv7WK6k.js";import"./spinner-AWUe4xwQ.js";import"./icon-BSFY3vDO.js";import"./tooltip-1V7clEnw.js";import"./types-BmbYqTX_.js";import"./types-Dx2TtIG9.js";import"./badge-CLQ59MDF.js";import"./loader-XHoVniao.js";import"./heading-CRNoBc7q.js";import"./help-icon-Buhx5nl6.js";const ta={title:"Basic/List",component:y,args:{list:cn,noHeader:!0},parameters:{layout:"fullscreen"}},o=d=>r.jsx(y,{...d}),q=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 R=o.bind({});R.args={list:kn};const j=o.bind({});j.args={list:fn};const T=o.bind({});T.args={list:xn};const N=o.bind({});N.args={list:Sn,noHeader:!1};const E=o.bind({});E.args={bordered:!0};const w=o.bind({});w.args={list:In};const _=o.bind({});_.args={list:Cn};const S=o.bind({});S.args={list:sn,noHeader:!1,stickyHeader:!0};S.parameters={docs:{story:{inline:!1,iframeHeight:200}}};const x=o.bind({});x.args={list:sn,scrollDetails:{scrollable:!0}};x.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`."}}};x.decorators=[d=>r.jsx("div",{style:{height:200,overflow:"hidden"},children:d()})];const $=()=>{const[d,b]=W.useState(0),k={name:"Animals",items:[...Array(50)].map((m,l)=>({id:l,name:`Aardvark #${l+1}`,active:l===d,onClick:()=>b(l)}))};return r.jsx("div",{style:{height:200,overflow:"auto"},children:r.jsx(y,{list:k,scrollDetails:{infiniteScroll:!0,scrollable:!0,limit:10}})})},B=()=>{const d=(e,a)=>{switch(a.type){case"headingClicked":{const{headingKey:t}=a.payload;return f(e,s=>{const i=s[t];i.expanded=!i.expanded})}case"itemClicked":{const{headingKey:t,itemIndex:s}=a.payload;return f(e,i=>{Object.keys(i).forEach(h=>{i[h].items.forEach((A,rn)=>{A.active=h===t&&rn===s})})})}case"addClicked":{const{headingKey:t}=a.payload;return f(e,s=>{const i=s[t];i.expanded=!0,i.items.push({name:`${i.label} #${i.items.length+1}`})})}case"deleteClicked":{const{headingKey:t,itemIndex:s}=a.payload;return f(e,i=>{let{items:h}=i[t];delete h[s],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]=W.useReducer(d,{},()=>b()),[l,u]=W.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:X}=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 r.jsxs(ln,{gap:!0,children:[r.jsx(y,{list:C(I),bordered:!0,height:n,scrollDetails:{scrollable:!0,hideScrollbar:!1,triggerScrollToActiveItem:l}}),r.jsx(y,{list:C(X),bordered:!0,stickyHeader:!0,height:n,scrollDetails:{scrollable:!0,hideScrollbar:!1,triggerScrollToActiveItem:l}})]})},F=()=>{const d=(n,e)=>{switch(e.type){case"headingClicked":{const{headingKey:a}=e.payload;return f(n,t=>{const s=t[a];s.expanded=!s.expanded})}case"itemClicked":{const{headingKey:a,itemIndex:t}=e.payload;return f(n,s=>{Object.keys(s).forEach(i=>{s[i].items.forEach((h,A)=>{h.active=i===a&&A===t})})})}case"addClicked":{const{headingKey:a}=e.payload;return f(n,t=>{const s=t[a];s.expanded=!0,s.items.push({name:`${s.label} #${s.items.length+1}`})})}case"deleteClicked":{const{headingKey:a,itemIndex:t}=e.payload;return f(n,s=>{let{items:i}=s[a];delete i[t],s[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]=W.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,X=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 r.jsxs(r.Fragment,{children:[r.jsx(mn,{name:"Animals"}),r.jsx(P,{item:X(g)}),g.expanded&&r.jsx(y,{noHeader:!0,list:C(g)}),r.jsx(P,{item:X(I)}),I.expanded&&r.jsx(y,{noHeader:!0,list:C(I)})]})},O=()=>{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]=W.useState(b.items),l=u=>{const{to:c,from:p}=u;m(d(k,p,c))};return r.jsx(y,{list:{...b,items:k},draggable:!0,onListReorder:l})},J=()=>{const d={items:[{id:1,name:"Dashboard",component:G,url:"/dashboard"},{id:2,name:"Settings",component:G,url:"/settings"}]};return r.jsxs(on,{children:[r.jsx(y,{list:d,noHeader:!0}),r.jsxs(dn,{children:[r.jsx(z,{path:"/dashboard",children:"Dashboard"}),r.jsx(z,{path:"/settings",children:"Settings"})]})]})};$.__docgenInfo={description:"",methods:[],displayName:"InfiniteScroll"};B.__docgenInfo={description:"",methods:[],displayName:"ScrollToActiveItem"};F.__docgenInfo={description:"",methods:[],displayName:"HeadingsManaged"};O.__docgenInfo={description:"",methods:[],displayName:"ManagedDragAndDrop"};J.__docgenInfo={description:"",methods:[],displayName:"AsRouterLink"};var Q,U,V;q.parameters={...q.parameters,docs:{...(Q=q.parameters)==null?void 0:Q.docs,source:{originalSource:`args => {
-  return <List {...args} />;
-}`,...(V=(U=q.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 se,re,ie;v.parameters={...v.parameters,docs:{...(se=v.parameters)==null?void 0:se.docs,source:{originalSource:`args => {
-  return <List {...args} />;
-}`,...(ie=(re=v.parameters)==null?void 0:re.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;R.parameters={...R.parameters,docs:{...(ye=R.parameters)==null?void 0:ye.docs,source:{originalSource:`args => {
-  return <List {...args} />;
-}`,...(ke=(be=R.parameters)==null?void 0:be.docs)==null?void 0:ke.source}}};var fe,xe,Se;j.parameters={...j.parameters,docs:{...(fe=j.parameters)==null?void 0:fe.docs,source:{originalSource:`args => {
-  return <List {...args} />;
-}`,...(Se=(xe=j.parameters)==null?void 0:xe.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;N.parameters={...N.parameters,docs:{...(Le=N.parameters)==null?void 0:Le.docs,source:{originalSource:`args => {
-  return <List {...args} />;
-}`,...(ve=(De=N.parameters)==null?void 0:De.docs)==null?void 0:ve.source}}};var Ke,He,Me;E.parameters={...E.parameters,docs:{...(Ke=E.parameters)==null?void 0:Ke.docs,source:{originalSource:`args => {
-  return <List {...args} />;
-}`,...(Me=(He=E.parameters)==null?void 0:He.docs)==null?void 0:Me.source}}};var Re,je,Te;w.parameters={...w.parameters,docs:{...(Re=w.parameters)==null?void 0:Re.docs,source:{originalSource:`args => {
-  return <List {...args} />;
-}`,...(Te=(je=w.parameters)==null?void 0:je.docs)==null?void 0:Te.source}}};var Ne,Ee,we;_.parameters={..._.parameters,docs:{...(Ne=_.parameters)==null?void 0:Ne.docs,source:{originalSource:`args => {
-  return <List {...args} />;
-}`,...(we=(Ee=_.parameters)==null?void 0:Ee.docs)==null?void 0:we.source}}};var _e,$e,Be;S.parameters={...S.parameters,docs:{...(_e=S.parameters)==null?void 0:_e.docs,source:{originalSource:`args => {
-  return <List {...args} />;
-}`,...(Be=($e=S.parameters)==null?void 0:$e.docs)==null?void 0:Be.source}}};var Fe,Oe,Je;x.parameters={...x.parameters,docs:{...(Fe=x.parameters)==null?void 0:Fe.docs,source:{originalSource:`args => {
-  return <List {...args} />;
-}`,...(Je=(Oe=x.parameters)==null?void 0:Oe.docs)==null?void 0:Je.source}}};var We,Xe,qe;$.parameters={...$.parameters,docs:{...(We=$.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=$.parameters)==null?void 0:Xe.docs)==null?void 0:qe.source}}};var ze,Ge,Pe;B.parameters={...B.parameters,docs:{...(ze=B.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=B.parameters)==null?void 0:Ge.docs)==null?void 0:Pe.source}}};var Qe,Ue,Ve;F.parameters={...F.parameters,docs:{...(Qe=F.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=F.parameters)==null?void 0:Ue.docs)==null?void 0:Ve.source}}};var Ye,Ze,en;O.parameters={...O.parameters,docs:{...(Ye=O.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=O.parameters)==null?void 0:Ze.docs)==null?void 0:en.source}}};var nn,an,tn;J.parameters={...J.parameters,docs:{...(nn=J.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=J.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,J as AsRouterLink,M as Badges,R as BadgesSmall,E as Bordered,q as Default,v as Details,K as Expanding,H as Header,F as HeadingsManaged,w as IconWithTooltip,$ as InfiniteScroll,T as InvalidItems,N as JSXTitles,O as ManagedDragAndDrop,D as Menus,_ as Metacount,j as Nested,B as ScrollToActiveItem,x as Scrollable,S as StickyHeader,sa as __namedExportsOrder,ta as default};

package/dist/storybook/assets/list.stories-data-Doo2Rqun.js

@@ -1 +0,0 @@
-import{j as t}from"./jsx-runtime-eps93zm2.js";import{I as i,T as c}from"./common-types-Sih75Sav.js";import{F as o}from"./flex-EllkLxgO.js";import{M as d}from"./actions-Bax0KeqM.js";import{I as n}from"./icon-BSFY3vDO.js";import{M as l}from"./types-BmbYqTX_.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/loader-B4-2F7c_.css

@@ -1 +0,0 @@
-._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-XHoVniao.js

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

package/dist/storybook/assets/loader.stories-Q0U2BqZX.js

@@ -1,83 +0,0 @@
-import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as G}from"./index-DhsZuJvc.js";import{a as l}from"./common-types-Sih75Sav.js";import{L as g}from"./loader-XHoVniao.js";import{P as M}from"./progress-bar-C_kV6r0Q.js";import{S as x}from"./spinner-AWUe4xwQ.js";import{S as m}from"./spacer-BWoNR27H.js";import{B as L}from"./button-Cbv7WK6k.js";import{C as q}from"./card-EcjmryU9.js";import"./index-Bk2sglWO.js";import"./disabled-context-rmpd7YJS.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./inheritsLoose-DP0QEDDI.js";import"./index-CEuq6vkz.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.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})})},o=S.bind({});o.args={testId:"story-default-spinner"};const u=h.bind({}),i=S.bind({});i.args={theme:l.LIGHT};const n=S.bind({});n.args={theme:l.DARK,fullViewPortSize:!0};const d=h.bind({});d.args={theme:l.DARK,fullViewPortSize:!0};const c=h.bind({});c.args={details:"Some extra info"};const p=h.bind({});p.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 a=()=>{const[r,t]=G.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)]})})]})};a.parameters={docs:{story:{inline:!1,iframeHeight:400}}};const s=()=>{const[r,t]=G.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)})})})]})};s.parameters={docs:{story:{inline:!1,iframeHeight:400}}};a.__docgenInfo={description:"",methods:[],displayName:"CoversCardContent"};s.__docgenInfo={description:"",methods:[],displayName:"ReplacesCardContent"};var v,j,C;o.parameters={...o.parameters,docs:{...(v=o.parameters)==null?void 0:v.docs,source:{originalSource:`(args: ILoaderProps) => {
-  const {
-    theme
-  } = args;
-  return <Loader {...args}>
-      <Spinner dark={theme !== 'dark'} />
-    </Loader>;
-}`,...(C=(j=o.parameters)==null?void 0:j.docs)==null?void 0:C.source}}};var k,f,P;u.parameters={...u.parameters,docs:{...(k=u.parameters)==null?void 0:k.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,y,B;i.parameters={...i.parameters,docs:{...(T=i.parameters)==null?void 0:T.docs,source:{originalSource:`(args: ILoaderProps) => {
-  const {
-    theme
-  } = args;
-  return <Loader {...args}>
-      <Spinner dark={theme !== 'dark'} />
-    </Loader>;
-}`,...(B=(y=i.parameters)==null?void 0:y.docs)==null?void 0:B.source}}};var w,I,b;n.parameters={...n.parameters,docs:{...(w=n.parameters)==null?void 0:w.docs,source:{originalSource:`(args: ILoaderProps) => {
-  const {
-    theme
-  } = args;
-  return <Loader {...args}>
-      <Spinner dark={theme !== 'dark'} />
-    </Loader>;
-}`,...(b=(I=n.parameters)==null?void 0:I.docs)==null?void 0:b.source}}};var E,W,D;d.parameters={...d.parameters,docs:{...(E=d.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=d.parameters)==null?void 0:W.docs)==null?void 0:D.source}}};var F,H,V;c.parameters={...c.parameters,docs:{...(F=c.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=c.parameters)==null?void 0:H.docs)==null?void 0:V.source}}};var _,R,z;p.parameters={...p.parameters,docs:{...(_=p.parameters)==null?void 0:_.docs,source:{originalSource:`(args: ILoaderProps) => {
-  const {
-    theme
-  } = args;
-  return <Loader {...args}>
-      <ProgressBar width="300px" inverted={theme === 'dark'} percentage={40} />
-    </Loader>;
-}`,...(z=(R=p.parameters)==null?void 0:R.docs)==null?void 0:z.source}}};var N,A,J;a.parameters={...a.parameters,docs:{...(N=a.parameters)==null?void 0:N.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>
-    </>;
-}`,...(J=(A=a.parameters)==null?void 0:A.docs)==null?void 0:J.source}}};var K,O,X;s.parameters={...s.parameters,docs:{...(K=s.parameters)==null?void 0:K.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>
-    </>;
-}`,...(X=(O=s.parameters)==null?void 0:O.docs)==null?void 0:X.source}}};const ge=["Default","WithProgressBar","TintedBackground","FullViewport","FullViewportWithProgressBar","WithExtraTextDetails","WithExtraJSXDetails","CoversCardContent","ReplacesCardContent"];export{a as CoversCardContent,o as Default,n as FullViewport,d as FullViewportWithProgressBar,s as ReplacesCardContent,i as TintedBackground,p as WithExtraJSXDetails,c as WithExtraTextDetails,u as WithProgressBar,ge as __namedExportsOrder,le as default};