@oliasoft-open-source/react-ui-library 3.12.0-beta-21 → 3.12.0-beta-23

package/dist/assets/list.stories.7ac2d704.js

@@ -0,0 +1,455 @@
+import{j as s}from"./jsx-runtime.bc0b5389.js";import{r as $}from"./index.8c7046c4.js";import{p as k}from"./immer.esm.e53d4108.js";import{L as x,a as X}from"./list.c0b606e4.js";import{L as Ue}from"./list-heading.647cd461.js";import{F as Ve}from"./flex.f0bedd04.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.adf90caf.js";import"./index.55214191.js";import"./index.es.5a055fee.js";import"./inheritsLoose.5387fada.js";import"./extends.946277fc.js";import"./redux.afc48bf2.js";import"./objectSpread2.62d3bde3.js";import"./hoist-non-react-statics.cjs.10bac274.js";import"./index.cb615f32.js";import"./memoize-one.esm.7a54f149.js";import"./icon.86155bc3.js";import"./index.73b4811b.js";import"./disabled-context.47d44ea4.js";import"./card.edc0d859.js";import"./actions.310c4239.js";import"./lodash.96de7017.js";import"./button.4d73be0d.js";import"./spinner.f0fdc45e.js";import"./tooltip.47b8435e.js";import"./common-enum.04de2059.js";import"./enum.9003e5cc.js";import"./badge.c60b26e4.js";import"./types.f0417c6d.js";import"./loader.c35b8c59.js";import"./heading.d8accca2.js";import"./help-icon.8deae1d5.js";const Wn={title:"Basic/List",component:x,args:{list:Ye,noHeader:!0},parameters:{layout:"fullscreen"}},o=d=>s.exports.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 N=o.bind({});N.args={bordered:!0};const E=o.bind({});E.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.exports.jsx("div",{style:{height:200,overflow:"hidden"},children:d()})];const O=()=>{const[d,y]=$.exports.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.exports.jsx("div",{style:{height:200,overflow:"auto"},children:s.exports.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,r=>{const i=r[t];i.expanded=!i.expanded})}case"itemClicked":{const{headingKey:t,itemIndex:r}=a.payload;return k(e,i=>{Object.keys(i).forEach(h=>{i[h].items.forEach((A,Qe)=>{A.active=h===t&&Qe===r})})})}case"addClicked":{const{headingKey:t}=a.payload;return k(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 k(e,i=>{let{items:h}=i[t];delete h[r],i[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]=$.exports.useReducer(d,{},()=>y()),[l,u]=$.exports.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.exports.jsxs(Ve,{gap:!0,children:[s.exports.jsx(x,{list:C(S),bordered:!0,height:n,scrollDetails:{scrollable:!0,hideScrollbar:!1,triggerScrollToActiveItem:l}}),s.exports.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 r=t[a];r.expanded=!r.expanded})}case"itemClicked":{const{headingKey:a,itemIndex:t}=e.payload;return k(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 k(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 k(n,r=>{let{items:i}=r[a];delete i[t],r[a].items=i.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]=$.exports.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.exports.jsxs(s.exports.Fragment,{children:[s.exports.jsx(Ue,{name:"Animals"}),s.exports.jsx(X,{item:F(g)}),g.expanded&&s.exports.jsx(x,{noHeader:!0,list:C(g)}),s.exports.jsx(X,{item:F(S)}),S.expanded&&s.exports.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]=$.exports.useState(y.items),l=u=>{const{to:c,from:p}=u;m(d(b,p,c))};return s.exports.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,re,ie;K.parameters={...K.parameters,docs:{...(te=K.parameters)==null?void 0:te.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(ie=(re=K.parameters)==null?void 0:re.docs)==null?void 0:ie.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;N.parameters={...N.parameters,docs:{...(Ie=N.parameters)==null?void 0:Ie.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(Ce=(Se=N.parameters)==null?void 0:Se.docs)==null?void 0:Ce.source}}};var Ae,Le,De;E.parameters={...E.parameters,docs:{...(Ae=E.parameters)==null?void 0:Ae.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(De=(Le=E.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,Ne,Ee;f.parameters={...f.parameters,docs:{...(Re=f.parameters)==null?void 0:Re.docs,source:{originalSource:`args => {
+  return <List {...args} />;
+}`,...(Ee=(Ne=f.parameters)==null?void 0:Ne.docs)==null?void 0:Ee.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 Xn=["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,N as Bordered,B as Default,v as Details,K as Expanding,H as Header,_ as HeadingsManaged,E 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,Xn as __namedExportsOrder,Wn as default};

package/dist/assets/loader.a3325b3b.css

@@ -0,0 +1 @@
+:root{--color-primary-0: hsl(0, 0%, 100%);--color-primary-50: hsl(18.24742268, 82.90598291%, 97.5%);--color-primary-100: hsl(18.24742268, 82.90598291%, 92.5%);--color-primary-150: hsl(18.24742268, 82.90598291%, 87.5%);--color-primary-200: hsl(18.24742268, 82.90598291%, 82.5%);--color-primary-250: hsl(18.24742268, 82.90598291%, 77.5%);--color-primary-300: hsl(18.24742268, 82.90598291%, 72.5%);--color-primary-350: hsl(18.24742268, 82.90598291%, 67.5%);--color-primary-400: hsl(18.24742268, 82.90598291%, 62.5%);--color-primary-450: hsl(18.24742268, 82.90598291%, 57.5%);--color-primary-500: hsl(18.24742268, 82.90598291%, 52.5%);--color-primary-550: hsl(18.24742268, 82.90598291%, 47.5%);--color-primary-600: hsl(18.24742268, 82.90598291%, 42.5%);--color-primary-650: hsl(18.24742268, 82.90598291%, 37.5%);--color-primary-700: hsl(18.24742268, 82.90598291%, 32.5%);--color-primary-750: hsl(18.24742268, 82.90598291%, 27.5%);--color-primary-800: hsl(18.24742268, 82.90598291%, 22.5%);--color-primary-850: hsl(18.24742268, 82.90598291%, 17.5%);--color-primary-900: hsl(18.24742268, 82.90598291%, 12.5%);--color-primary-950: hsl(18.24742268, 82.90598291%, 7.5%);--color-primary-1000: hsl(18.24742268, 82.90598291%, 2.5%);--color-error-0: hsl(180, 100%, 100%);--color-error-50: hsl(0, 71.29186603%, 97.5%);--color-error-100: hsl(0, 71.29186603%, 92.5%);--color-error-150: hsl(0, 71.29186603%, 87.5%);--color-error-200: hsl(0, 71.29186603%, 82.5%);--color-error-250: hsl(0, 71.29186603%, 77.5%);--color-error-300: hsl(0, 71.29186603%, 72.5%);--color-error-350: hsl(0, 71.29186603%, 67.5%);--color-error-400: hsl(0, 71.29186603%, 62.5%);--color-error-450: hsl(0, 71.29186603%, 57.5%);--color-error-500: hsl(0, 71.29186603%, 52.5%);--color-error-550: hsl(0, 71.29186603%, 47.5%);--color-error-600: hsl(0, 71.29186603%, 42.5%);--color-error-650: hsl(0, 71.29186603%, 37.5%);--color-error-700: hsl(0, 71.29186603%, 32.5%);--color-error-750: hsl(0, 71.29186603%, 27.5%);--color-error-800: hsl(0, 71.29186603%, 22.5%);--color-error-850: hsl(0, 71.29186603%, 17.5%);--color-error-900: hsl(0, 71.29186603%, 12.5%);--color-error-950: hsl(0, 71.29186603%, 7.5%);--color-error-1000: hsl(0, 71.29186603%, 2.5%);--color-success-0: hsl(0, 0%, 100%);--color-success-50: hsl(120, 52.03252033%, 97.5%);--color-success-100: hsl(120, 52.03252033%, 92.5%);--color-success-150: hsl(120, 52.03252033%, 87.5%);--color-success-200: hsl(120, 52.03252033%, 82.5%);--color-success-250: hsl(120, 52.03252033%, 77.5%);--color-success-300: hsl(120, 52.03252033%, 72.5%);--color-success-350: hsl(120, 52.03252033%, 67.5%);--color-success-400: hsl(120, 52.03252033%, 62.5%);--color-success-450: hsl(120, 52.03252033%, 57.5%);--color-success-500: hsl(120, 52.03252033%, 52.5%);--color-success-550: hsl(120, 52.03252033%, 47.5%);--color-success-600: hsl(120, 52.03252033%, 42.5%);--color-success-650: hsl(120, 52.03252033%, 37.5%);--color-success-700: hsl(120, 52.03252033%, 32.5%);--color-success-750: hsl(120, 52.03252033%, 27.5%);--color-success-800: hsl(120, 52.03252033%, 22.5%);--color-success-850: hsl(120, 52.03252033%, 17.5%);--color-success-900: hsl(120, 52.03252033%, 12.5%);--color-success-950: hsl(120, 52.03252033%, 7.5%);--color-success-1000: hsl(120, 52.03252033%, 2.5%);--color-warning-0: hsl(240, 100%, 100%);--color-warning-50: hsl(44.9197861, 76.32653061%, 97.5%);--color-warning-100: hsl(44.9197861, 76.32653061%, 92.5%);--color-warning-150: hsl(44.9197861, 76.32653061%, 87.5%);--color-warning-200: hsl(44.9197861, 76.32653061%, 82.5%);--color-warning-250: hsl(44.9197861, 76.32653061%, 77.5%);--color-warning-300: hsl(44.9197861, 76.32653061%, 72.5%);--color-warning-350: hsl(44.9197861, 76.32653061%, 67.5%);--color-warning-400: hsl(44.9197861, 76.32653061%, 62.5%);--color-warning-450: hsl(44.9197861, 76.32653061%, 57.5%);--color-warning-500: hsl(44.9197861, 76.32653061%, 52.5%);--color-warning-550: hsl(44.9197861, 76.32653061%, 47.5%);--color-warning-600: hsl(44.9197861, 76.32653061%, 42.5%);--color-warning-650: hsl(44.9197861, 76.32653061%, 37.5%);--color-warning-700: hsl(44.9197861, 76.32653061%, 32.5%);--color-warning-750: hsl(44.9197861, 76.32653061%, 27.5%);--color-warning-800: hsl(44.9197861, 76.32653061%, 22.5%);--color-warning-850: hsl(44.9197861, 76.32653061%, 17.5%);--color-warning-900: hsl(44.9197861, 76.32653061%, 12.5%);--color-warning-950: hsl(44.9197861, 76.32653061%, 7.5%);--color-warning-1000: hsl(44.9197861, 76.32653061%, 2.5%);--color-info-0: hsl(0, 0%, 100%);--color-info-50: hsl(201.03092784, 82.90598291%, 97.5%);--color-info-100: hsl(201.03092784, 82.90598291%, 92.5%);--color-info-150: hsl(201.03092784, 82.90598291%, 87.5%);--color-info-200: hsl(201.03092784, 82.90598291%, 82.5%);--color-info-250: hsl(201.03092784, 82.90598291%, 77.5%);--color-info-300: hsl(201.03092784, 82.90598291%, 72.5%);--color-info-350: hsl(201.03092784, 82.90598291%, 67.5%);--color-info-400: hsl(201.03092784, 82.90598291%, 62.5%);--color-info-450: hsl(201.03092784, 82.90598291%, 57.5%);--color-info-500: hsl(201.03092784, 82.90598291%, 52.5%);--color-info-550: hsl(201.03092784, 82.90598291%, 47.5%);--color-info-600: hsl(201.03092784, 82.90598291%, 42.5%);--color-info-650: hsl(201.03092784, 82.90598291%, 37.5%);--color-info-700: hsl(201.03092784, 82.90598291%, 32.5%);--color-info-750: hsl(201.03092784, 82.90598291%, 27.5%);--color-info-800: hsl(201.03092784, 82.90598291%, 22.5%);--color-info-850: hsl(201.03092784, 82.90598291%, 17.5%);--color-info-900: hsl(201.03092784, 82.90598291%, 12.5%);--color-info-950: hsl(201.03092784, 82.90598291%, 7.5%);--color-info-1000: hsl(201.03092784, 82.90598291%, 2.5%);--color-neutral-0: hsl(0, 0%, 100%);--color-neutral-50: hsl(210, 10%, 97.5%);--color-neutral-100: hsl(210, 10%, 92.5%);--color-neutral-150: hsl(210, 10%, 87.5%);--color-neutral-200: hsl(210, 10%, 82.5%);--color-neutral-250: hsl(210, 10%, 77.5%);--color-neutral-300: hsl(210, 10%, 72.5%);--color-neutral-350: hsl(210, 10%, 67.5%);--color-neutral-400: hsl(210, 10%, 62.5%);--color-neutral-450: hsl(210, 10%, 57.5%);--color-neutral-500: hsl(210, 10%, 52.5%);--color-neutral-550: hsl(210, 10%, 47.5%);--color-neutral-600: hsl(210, 10%, 42.5%);--color-neutral-650: hsl(210, 10%, 37.5%);--color-neutral-700: hsl(210, 10%, 32.5%);--color-neutral-750: hsl(210, 10%, 27.5%);--color-neutral-800: hsl(210, 10%, 22.5%);--color-neutral-850: hsl(210, 10%, 17.5%);--color-neutral-900: hsl(210, 10%, 12.5%);--color-neutral-950: hsl(210, 10%, 7.5%);--color-neutral-1000: hsl(210, 10%, 2.5%);--color-primary-muted-0: hsl(0, 0%, 100%);--color-primary-muted-50: hsl(18.24742268, 57.90598291%, 97.5%);--color-primary-muted-100: hsl(18.24742268, 57.90598291%, 92.5%);--color-primary-muted-150: hsl(18.24742268, 57.90598291%, 87.5%);--color-primary-muted-200: hsl(18.24742268, 57.90598291%, 82.5%);--color-primary-muted-250: hsl(18.24742268, 57.90598291%, 77.5%);--color-primary-muted-300: hsl(18.24742268, 57.90598291%, 72.5%);--color-primary-muted-350: hsl(18.24742268, 57.90598291%, 67.5%);--color-primary-muted-400: hsl(18.24742268, 57.90598291%, 62.5%);--color-primary-muted-450: hsl(18.24742268, 57.90598291%, 57.5%);--color-primary-muted-500: hsl(18.24742268, 57.90598291%, 52.5%);--color-primary-muted-550: hsl(18.24742268, 57.90598291%, 47.5%);--color-primary-muted-600: hsl(18.24742268, 57.90598291%, 42.5%);--color-primary-muted-650: hsl(18.24742268, 57.90598291%, 37.5%);--color-primary-muted-700: hsl(18.24742268, 57.90598291%, 32.5%);--color-primary-muted-750: hsl(18.24742268, 57.90598291%, 27.5%);--color-primary-muted-800: hsl(18.24742268, 57.90598291%, 22.5%);--color-primary-muted-850: hsl(18.24742268, 57.90598291%, 17.5%);--color-primary-muted-900: hsl(18.24742268, 57.90598291%, 12.5%);--color-primary-muted-950: hsl(18.24742268, 57.90598291%, 7.5%);--color-primary-muted-1000: hsl(18.24742268, 57.90598291%, 2.5%);--color-error-muted-0: hsl(180, 100%, 100%);--color-error-muted-50: hsl(0, 46.29186603%, 97.5%);--color-error-muted-100: hsl(0, 46.29186603%, 92.5%);--color-error-muted-150: hsl(0, 46.29186603%, 87.5%);--color-error-muted-200: hsl(0, 46.29186603%, 82.5%);--color-error-muted-250: hsl(0, 46.29186603%, 77.5%);--color-error-muted-300: hsl(0, 46.29186603%, 72.5%);--color-error-muted-350: hsl(0, 46.29186603%, 67.5%);--color-error-muted-400: hsl(0, 46.29186603%, 62.5%);--color-error-muted-450: hsl(0, 46.29186603%, 57.5%);--color-error-muted-500: hsl(0, 46.29186603%, 52.5%);--color-error-muted-550: hsl(0, 46.29186603%, 47.5%);--color-error-muted-600: hsl(0, 46.29186603%, 42.5%);--color-error-muted-650: hsl(0, 46.29186603%, 37.5%);--color-error-muted-700: hsl(0, 46.29186603%, 32.5%);--color-error-muted-750: hsl(0, 46.29186603%, 27.5%);--color-error-muted-800: hsl(0, 46.29186603%, 22.5%);--color-error-muted-850: hsl(0, 46.29186603%, 17.5%);--color-error-muted-900: hsl(0, 46.29186603%, 12.5%);--color-error-muted-950: hsl(0, 46.29186603%, 7.5%);--color-error-muted-1000: hsl(0, 46.29186603%, 2.5%);--color-success-muted-0: hsl(0, 0%, 100%);--color-success-muted-50: hsl(120, 27.03252033%, 97.5%);--color-success-muted-100: hsl(120, 27.03252033%, 92.5%);--color-success-muted-150: hsl(120, 27.03252033%, 87.5%);--color-success-muted-200: hsl(120, 27.03252033%, 82.5%);--color-success-muted-250: hsl(120, 27.03252033%, 77.5%);--color-success-muted-300: hsl(120, 27.03252033%, 72.5%);--color-success-muted-350: hsl(120, 27.03252033%, 67.5%);--color-success-muted-400: hsl(120, 27.03252033%, 62.5%);--color-success-muted-450: hsl(120, 27.03252033%, 57.5%);--color-success-muted-500: hsl(120, 27.03252033%, 52.5%);--color-success-muted-550: hsl(120, 27.03252033%, 47.5%);--color-success-muted-600: hsl(120, 27.03252033%, 42.5%);--color-success-muted-650: hsl(120, 27.03252033%, 37.5%);--color-success-muted-700: hsl(120, 27.03252033%, 32.5%);--color-success-muted-750: hsl(120, 27.03252033%, 27.5%);--color-success-muted-800: hsl(120, 27.03252033%, 22.5%);--color-success-muted-850: hsl(120, 27.03252033%, 17.5%);--color-success-muted-900: hsl(120, 27.03252033%, 12.5%);--color-success-muted-950: hsl(120, 27.03252033%, 7.5%);--color-success-muted-1000: hsl(120, 27.03252033%, 2.5%);--color-warning-muted-0: hsl(240, 100%, 100%);--color-warning-muted-50: hsl(44.9197861, 51.32653061%, 97.5%);--color-warning-muted-100: hsl(44.9197861, 51.32653061%, 92.5%);--color-warning-muted-150: hsl(44.9197861, 51.32653061%, 87.5%);--color-warning-muted-200: hsl(44.9197861, 51.32653061%, 82.5%);--color-warning-muted-250: hsl(44.9197861, 51.32653061%, 77.5%);--color-warning-muted-300: hsl(44.9197861, 51.32653061%, 72.5%);--color-warning-muted-350: hsl(44.9197861, 51.32653061%, 67.5%);--color-warning-muted-400: hsl(44.9197861, 51.32653061%, 62.5%);--color-warning-muted-450: hsl(44.9197861, 51.32653061%, 57.5%);--color-warning-muted-500: hsl(44.9197861, 51.32653061%, 52.5%);--color-warning-muted-550: hsl(44.9197861, 51.32653061%, 47.5%);--color-warning-muted-600: hsl(44.9197861, 51.32653061%, 42.5%);--color-warning-muted-650: hsl(44.9197861, 51.32653061%, 37.5%);--color-warning-muted-700: hsl(44.9197861, 51.32653061%, 32.5%);--color-warning-muted-750: hsl(44.9197861, 51.32653061%, 27.5%);--color-warning-muted-800: hsl(44.9197861, 51.32653061%, 22.5%);--color-warning-muted-850: hsl(44.9197861, 51.32653061%, 17.5%);--color-warning-muted-900: hsl(44.9197861, 51.32653061%, 12.5%);--color-warning-muted-950: hsl(44.9197861, 51.32653061%, 7.5%);--color-warning-muted-1000: hsl(44.9197861, 51.32653061%, 2.5%);--color-info-muted-0: hsl(0, 0%, 100%);--color-info-muted-50: hsl(201.03092784, 57.90598291%, 97.5%);--color-info-muted-100: hsl(201.03092784, 57.90598291%, 92.5%);--color-info-muted-150: hsl(201.03092784, 57.90598291%, 87.5%);--color-info-muted-200: hsl(201.03092784, 57.90598291%, 82.5%);--color-info-muted-250: hsl(201.03092784, 57.90598291%, 77.5%);--color-info-muted-300: hsl(201.03092784, 57.90598291%, 72.5%);--color-info-muted-350: hsl(201.03092784, 57.90598291%, 67.5%);--color-info-muted-400: hsl(201.03092784, 57.90598291%, 62.5%);--color-info-muted-450: hsl(201.03092784, 57.90598291%, 57.5%);--color-info-muted-500: hsl(201.03092784, 57.90598291%, 52.5%);--color-info-muted-550: hsl(201.03092784, 57.90598291%, 47.5%);--color-info-muted-600: hsl(201.03092784, 57.90598291%, 42.5%);--color-info-muted-650: hsl(201.03092784, 57.90598291%, 37.5%);--color-info-muted-700: hsl(201.03092784, 57.90598291%, 32.5%);--color-info-muted-750: hsl(201.03092784, 57.90598291%, 27.5%);--color-info-muted-800: hsl(201.03092784, 57.90598291%, 22.5%);--color-info-muted-850: hsl(201.03092784, 57.90598291%, 17.5%);--color-info-muted-900: hsl(201.03092784, 57.90598291%, 12.5%);--color-info-muted-950: hsl(201.03092784, 57.90598291%, 7.5%);--color-info-muted-1000: hsl(201.03092784, 57.90598291%, 2.5%)}:root{color-scheme:initial;--size: 32px;--size-sm: 24px;--size-xs: 16px;--spacing-3xl: 36px;--spacing-2xl: 32px;--spacing-xl: 28px;--spacing-lg: 24px;--spacing: 20px;--spacing-sm: 16px;--spacing-xs: 12px;--spacing-2xs: 8px;--spacing-3xs: 4px;--padding-input-x: 12px;--padding-input-y: 6.5px;--padding-input: var(--padding-input-y) var(--padding-input-x);--padding-input-small-x: 7px;--padding-input-small-y: 3.5px;--padding-input-small: var(--padding-input-small-y) var(--padding-input-small-x);--border-radius: 4px;--color-text: rgba(0, 0, 0, .87);--color-text-muted: #7d7b7a;--color-text-faint: #acabab;--color-text-error: hsl(0, 40%, 50%);--color-text-warning: var(--color-warning-700);--color-text-success: hsl(120, 40%, 50%);--color-text-info: hsl(201.03092784, 40%, 50%);--color-text-primary: #eb6429;--color-text-primary-hover: #ce4c13;--color-text-primary-active: #9f3b0f;--color-text-placeholder: rgba(0, 0, 0, .3);--color-background: #f5f7f9;--color-background-raised: white;--color-background-disabled: rgba(0, 0, 0, .025);--color-background-info: hsl(201.03092784, 40%, 90%);--color-background-error: hsl(0, 40%, 90%);--color-background-success: hsl(120, 40%, 90%);--color-background-warning: var(--color-warning-100);--color-background-primary: #eb6429;--color-background-input: white;--color-background-listitem-active: #fff0e4;--color-background-listitem-hover: #f5f7f9;--color-background-menuitem-active: #edf1f4;--color-background-menuitem-hover: #f5f7f9;--color-background-menuitem-activehover: #e5eaef;--color-border: #ddd;--color-border-checkbox: var(--color-neutral-300);--color-border-hover: var(--color-neutral-400);--color-border-focus: var(--color-info-muted-500);--color-border-error: var(--color-error-muted-300);--color-border-error-hover: var(--color-error-muted-400);--color-border-warning: var(--color-warning-muted-300);--color-border-warning-hover: var(--color-warning-muted-400);--shadow-focus: 0 0 0 2px rgba(41, 167, 235, .25)}html[data-theme=dark]{color-scheme:dark;--color-text: var(--color-neutral-200);--color-text-muted: var(--color-neutral-400);--color-text-faint: var(--color-neutral-600);--color-text-primary: var(--color-primary-muted-450);--color-text-primary-active: var(--color-primary-muted-350);--color-text-primary-hover: var(--color-primary-muted-400);--color-text-error: var(--color-error-muted-300);--color-text-info: var(--color-info-muted-300);--color-text-success: var(--color-success-muted-300);--color-text-warning: var(--color-warning-muted-300);--color-text-placeholder: rgba(255, 255, 255, .3);--color-background: var(--color-neutral-900);--color-background-raised: var(--color-neutral-800);--color-background-disabled: rgba(0, 0, 0, .2);--color-background-error: var(--color-error-muted-700);--color-background-info: var(--color-info-muted-700);--color-background-success: var(--color-success-muted-700);--color-background-warning: var(--color-warning-muted-700);--color-background-primary: var(--color-primary-muted-500);--color-background-input: var(--color-neutral-750);--color-background-listitem-active: var(--color-primary-muted-750);--color-background-listitem-hover: var(--color-neutral-750);--color-background-menuitem-active: var(--color-neutral-650);--color-background-menuitem-hover: var(--color-neutral-700);--color-background-menuitem-activehover: var(--color-neutral-600);--color-border: var(--color-neutral-1000);--color-border-checkbox: var(--color-neutral-1000);--color-border-hover: var(--color-neutral-500);--color-border-focus: var(--color-info-500);--color-border-error: var(--color-neutral-1000);--color-border-warning: var(--color-neutral-1000);--shadow-focus: 0 0 0 2px rgba(41, 167, 235, .5)}._loader_cq0vb_341{width:100%;height:100%;position:relative;border-radius:inherit}._loader_cq0vb_341._fullViewPortSize_cq0vb_347{position:absolute;top:0;left:0;width:100vw;height:100vh}._loader_cq0vb_341._cover_cq0vb_354{position:absolute;top:0;left:0;bottom:0;right:0}._dimmer_cq0vb_361{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;vertical-align:middle;padding:1em;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;user-select:none;will-change:opacity;z-index:1000;display:flex;opacity:.95}._content_cq0vb_384{display:flex;flex-direction:column;align-items:center}._text_cq0vb_389{margin-top:12px;opacity:.6}._details_cq0vb_393{margin-top:8px}

package/dist/assets/loader.c35b8c59.js

@@ -0,0 +1 @@
+import{j as t}from"./jsx-runtime.bc0b5389.js";import{c as f}from"./index.55214191.js";import{b as l}from"./common-enum.04de2059.js";const _="_loader_cq0vb_341",h="_fullViewPortSize_cq0vb_347",x="_cover_cq0vb_354",b="_dimmer_cq0vb_361",q="_content_cq0vb_384",y="_text_cq0vb_389",V="_details_cq0vb_393",a={loader:_,fullViewPortSize:h,cover:x,dimmer:b,content:q,text:y,details:V},n=({width:i,height:d,text:s="",details:o="",fullViewPortSize:c=!1,cover:u=!1,children:m=null,theme:r=l.DARK,testId:e=null})=>{const p=r===l.DARK?l.WHITE:l.INHERIT,v=r==="white"?"var(--color-background-raised)":r==="light"?"var(--color-background)":"black";return t.exports.jsx("div",{className:f(a.loader,u?a.cover:"",{[a.fullViewPortSize]:c}),style:{width:i,height:d},"data-testid":e,children:t.exports.jsx("div",{className:a.dimmer,style:{background:v,color:p},children:t.exports.jsxs("div",{className:a.content,"data-testid":e&&`${e}-content`,children:[m,s&&t.exports.jsx("div",{className:a.text,"data-testid":e&&`${e}-text`,children:s}),o&&t.exports.jsx("div",{className:a.details,"data-testid":e&&`${e}-details`,children:o})]})})})};try{n.displayName="Loader",n.__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:"string | number"}},height:{defaultValue:null,description:"",name:"height",required:!1,type:{name:"string | number"}},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:"enum",value:[{value:'"dark"'},{value:'"white"'},{value:'"light"'},{value:'"inherit"'}]}}}}}catch{}export{n as L};

package/dist/assets/loader.stories.7b04d56f.js

@@ -0,0 +1,83 @@
+import{j as e}from"./jsx-runtime.bc0b5389.js";import{r as N}from"./index.8c7046c4.js";import{L as m}from"./loader.c35b8c59.js";import{P as M}from"./progress-bar.52d10897.js";import{S as h}from"./spinner.f0fdc45e.js";import{S as l}from"./spacer.17f9f9e6.js";import{B as L}from"./button.4d73be0d.js";import{C as q}from"./card.edc0d859.js";import{b as g}from"./common-enum.04de2059.js";import"./index.55214191.js";import"./disabled-context.47d44ea4.js";import"./icon.86155bc3.js";import"./inheritsLoose.5387fada.js";import"./index.73b4811b.js";import"./tooltip.47b8435e.js";import"./index.cb615f32.js";const le={title:"Progress/Loader",component:m,argTypes:{theme:{control:{type:"inline-radio"},options:["white","light","dark"]}},args:{theme:"white",text:"Loading...",width:"100%",height:"100%",fullViewPortSize:!1},decorators:[r=>e.exports.jsx("div",{style:{height:"200px",position:"relative"},children:r()})],parameters:{docs:{source:{excludeDecorators:!0}}}},S=r=>{const{theme:t}=r;return e.exports.jsx(m,{...r,children:e.exports.jsx(h,{dark:t!=="dark"})})},u=r=>{const{theme:t}=r;return e.exports.jsx(m,{...r,children:e.exports.jsx(M,{width:"300px",inverted:t==="dark",percentage:40})})},s=S.bind({});s.args={testId:"story-default-spinner"};const x=u.bind({}),o=S.bind({});o.args={theme:g.LIGHT};const a=S.bind({});a.args={theme:g.DARK,fullViewPortSize:!0};const i=u.bind({});i.args={theme:g.DARK,fullViewPortSize:!0};const n=u.bind({});n.args={details:"Some extra info"};const d=u.bind({});d.args={text:"",details:e.exports.jsxs(e.exports.Fragment,{children:[e.exports.jsx("div",{style:{opacity:.5},children:"Step 1: Lorem ipsum...DONE"}),e.exports.jsx(l,{height:"8px"}),e.exports.jsx("div",{children:"Step 2: Dolor est"}),e.exports.jsx(l,{height:"8px"}),e.exports.jsx("div",{style:{opacity:.5},children:"Step 3: Compendum"}),e.exports.jsx(l,{height:"16px"}),e.exports.jsx(L,{label:"Cancel",onClick:()=>{}})]})};const p=()=>{const[r,t]=N.exports.useState(!0);return e.exports.jsxs(e.exports.Fragment,{children:[e.exports.jsx(L,{label:"Toggle loading",onClick:()=>t(!r)}),e.exports.jsx(l,{}),e.exports.jsx(q,{children:e.exports.jsxs("div",{style:{position:"relative"},children:[r&&e.exports.jsx(m,{cover:!0,theme:g.WHITE,children:e.exports.jsx(h,{dark:!0})}),"Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(20)]})})]})};p.parameters={docs:{story:{inline:!1,iframeHeight:400}}};const c=()=>{const[r,t]=N.exports.useState(!0);return e.exports.jsxs(e.exports.Fragment,{children:[e.exports.jsx(L,{label:"Toggle loading",onClick:()=>t(!r)}),e.exports.jsx(l,{}),e.exports.jsx(q,{children:e.exports.jsx("div",{style:{position:"relative"},children:r?e.exports.jsx(m,{theme:g.WHITE,height:"200px",children:e.exports.jsx(h,{dark:!0})}):e.exports.jsx("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(20)})})})]})};c.parameters={docs:{story:{inline:!1,iframeHeight:400}}};var j,v,k;s.parameters={...s.parameters,docs:{...(j=s.parameters)==null?void 0:j.docs,source:{originalSource:`(args: ILoaderProps) => {
+  const {
+    theme
+  } = args;
+  return <Loader {...args}>
+      <Spinner dark={theme !== 'dark'} />
+    </Loader>;
+}`,...(k=(v=s.parameters)==null?void 0:v.docs)==null?void 0:k.source}}};var C,f,P;x.parameters={...x.parameters,docs:{...(C=x.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=x.parameters)==null?void 0:f.docs)==null?void 0:P.source}}};var T,B,b;o.parameters={...o.parameters,docs:{...(T=o.parameters)==null?void 0:T.docs,source:{originalSource:`(args: ILoaderProps) => {
+  const {
+    theme
+  } = args;
+  return <Loader {...args}>
+      <Spinner dark={theme !== 'dark'} />
+    </Loader>;
+}`,...(b=(B=o.parameters)==null?void 0:B.docs)==null?void 0:b.source}}};var w,y,I;a.parameters={...a.parameters,docs:{...(w=a.parameters)==null?void 0:w.docs,source:{originalSource:`(args: ILoaderProps) => {
+  const {
+    theme
+  } = args;
+  return <Loader {...args}>
+      <Spinner dark={theme !== 'dark'} />
+    </Loader>;
+}`,...(I=(y=a.parameters)==null?void 0:y.docs)==null?void 0:I.source}}};var W,D,E;i.parameters={...i.parameters,docs:{...(W=i.parameters)==null?void 0:W.docs,source:{originalSource:`(args: ILoaderProps) => {
+  const {
+    theme
+  } = args;
+  return <Loader {...args}>
+      <ProgressBar width="300px" inverted={theme === 'dark'} percentage={40} />
+    </Loader>;
+}`,...(E=(D=i.parameters)==null?void 0:D.docs)==null?void 0:E.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;p.parameters={...p.parameters,docs:{...(A=p.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=p.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};var O,X,G;c.parameters={...c.parameters,docs:{...(O=c.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=c.parameters)==null?void 0:X.docs)==null?void 0:G.source}}};const me=["Default","WithProgressBar","TintedBackground","FullViewport","FullViewportWithProgressBar","WithExtraTextDetails","WithExtraJSXDetails","CoversCardContent","ReplacesCardContent"];export{p as CoversCardContent,s as Default,a as FullViewport,i as FullViewportWithProgressBar,c as ReplacesCardContent,o as TintedBackground,d as WithExtraJSXDetails,n as WithExtraTextDetails,x as WithProgressBar,me as __namedExportsOrder,le as default};