@oliasoft-open-source/react-ui-library 4.0.0-beta-65 → 4.0.0-beta-67

package/dist/storybook/assets/list.stories-5241b862.js

@@ -1,455 +0,0 @@
-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-cfb04cf7.js";import{L as Ue}from"./list-heading-5f9bef91.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-bd7a4bde.js";import"./index-a80ed1cf.js";import"./index.es-648fc14e.js";import"./inheritsLoose-d4851ab8.js";import"./redux-10ee6be7.js";import"./objectSpread2-fdee9b6d.js";import"./index-3d476d02.js";import"./memoize-one.esm-52518564.js";import"./icon-ba53aa84.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./disabled-context-d654f6ff.js";import"./card-3847c251.js";import"./common-types-2c81813f.js";import"./actions-6df5b8ae.js";import"./lodash-75c70a11.js";import"./button-2f702fe9.js";import"./spinner-cb92a546.js";import"./tooltip-23e84186.js";import"./types-cc224262.js";import"./types-332ceaf3.js";import"./badge-3abf067b.js";import"./loader-87ec8334.js";import"./heading-18a1d4cf.js";import"./help-icon-3265d994.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-bd7a4bde.js

@@ -1 +0,0 @@
-import{j as s}from"./jsx-runtime-f961835c.js";import{I as i,T as r}from"./common-types-2c81813f.js";import{F as o}from"./flex-47732c42.js";import{M as d}from"./actions-6df5b8ae.js";import{I as n}from"./icon-ba53aa84.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/preview-12b53456.js

@@ -1 +0,0 @@
-import{_ as e}from"./iframe-d6ac09a5.js";import"../sb-preview/runtime.js";var a={docs:{renderer:async()=>{let{DocsRenderer:r}=await e(()=>import("./DocsRenderer-NNNQARDV-6a805525.js"),["./DocsRenderer-NNNQARDV-6a805525.js","./chunk-HLWAVYOI-b07d2cc3.js","./iframe-d6ac09a5.js","./index-f80c8c95.js","./react-16-147b12fd.js","./index-3d476d02.js","./index-070b1dda.js","./inheritsLoose-d4851ab8.js","./assertThisInitialized-081f9914.js","./index-97a99495.js"],import.meta.url);return new r}}};export{a as parameters};

package/dist/storybook/assets/side-bar-752d1016.js

@@ -1 +0,0 @@
-import{j as e}from"./jsx-runtime-f961835c.js";import{r as u,R as h}from"./index-f80c8c95.js";import{c as b}from"./index-a80ed1cf.js";import{i as f}from"./index-c7f280f6.js";import{B as y,I as E}from"./common-types-2c81813f.js";import{D as j}from"./drawer-8bee1ea4.js";import{T as I}from"./tooltip-23e84186.js";import{I as T}from"./icon-ba53aa84.js";import{B as M}from"./badge-3abf067b.js";import{B as N}from"./button-2f702fe9.js";const S="_inputInTable_9gmrd_1",C="_inputHover_9gmrd_13",O="_inputFocus_9gmrd_18",q="_inputError_9gmrd_25",k="_inputWarning_9gmrd_26",B="_inputDisabled_9gmrd_61",V="_hideScrollbars_9gmrd_67",L="_sidebar_9gmrd_82",A="_inner_9gmrd_93",H="_title_9gmrd_103",F="_subtitle_9gmrd_104",D="_label_9gmrd_105",R="_collapsed_9gmrd_109",W="_list_9gmrd_134",P="_item_9gmrd_138",z="_experimental_9gmrd_153",U="_active_9gmrd_157",$="_icon_9gmrd_161",s={inputInTable:S,inputHover:C,inputFocus:O,inputError:q,inputWarning:k,inputDisabled:B,hideScrollbars:V,sidebar:L,inner:A,title:H,subtitle:F,label:D,collapsed:R,list:W,item:P,experimental:z,active:U,icon:$},w=u.memo(({isOpen:t,label:i,icon:l,invalid:a})=>{const r=()=>e.jsx(I,{text:i,enabled:!t,placement:"right-center",possiblePlacements:["right-center"],triggerOffset:24,fontSize:16,padding:"var(--padding-sm)",display:"block",children:e.jsx(T,{icon:l})}),n=()=>e.jsx(M,{small:!0,title:"!",margin:4,children:e.jsx(r,{})});return e.jsxs(e.Fragment,{children:[e.jsx("span",{className:s.icon,children:a?e.jsx(n,{}):e.jsx(r,{})}),e.jsx("span",{className:s.label,children:i})]})},(t,i)=>f(t,i)),p=({isOpen:t,items:i,sectionIndex:l,onClick:a,testId:r})=>e.jsx("div",{className:s.list,children:i.map((n,d)=>{const c=`${l}_${d}`;return e.jsx("a",{href:n.value,className:b(s.item,n.isActive?s.active:"",n.isExperimental?s.experimental:""),onClick:o=>a(o,n.value,n.label,n.onClick),"data-testid":r,children:e.jsx(w,{label:n.label,icon:n.icon,invalid:n.invalid,isOpen:t},c)},c)})});try{p.displayName="Link",p.__docgenInfo={description:"",displayName:"Link",props:{isOpen:{defaultValue:null,description:"",name:"isOpen",required:!0,type:{name:"boolean"}},items:{defaultValue:null,description:"",name:"items",required:!0,type:{name:"{ value: string; isActive?: boolean | undefined; isExperimental?: boolean | undefined; label: ReactNode; icon: any; invalid?: boolean | undefined; onClick?: ((evt: MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined; }[]"}},sectionIndex:{defaultValue:null,description:"",name:"sectionIndex",required:!0,type:{name:"number"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"(evt: MouseEvent<HTMLAnchorElement, MouseEvent>, value: string, label: ReactNode, onClickCallback?: ((evt: MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined) => void"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const m=({isOpen:t,sections:i,onClick:l})=>e.jsx(e.Fragment,{children:i.map((a,r)=>e.jsxs(h.Fragment,{children:[e.jsx("h5",{className:s.subtitle,children:a.heading.toUpperCase()}),e.jsx(p,{isOpen:t,items:a.items,sectionIndex:r,onClick:l,testId:a.testId})]},r))});try{m.displayName="Sections",m.__docgenInfo={description:"",displayName:"Sections",props:{isOpen:{defaultValue:null,description:"",name:"isOpen",required:!0,type:{name:"boolean"}},sections:{defaultValue:null,description:"",name:"sections",required:!0,type:{name:"ISection[]"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"(evt: MouseEvent<HTMLAnchorElement, MouseEvent>, value: string, label: ReactNode, onClickCallback?: ((evt: MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined) => void"}}}}}catch{}const g=u.memo(({options:t,startOpen:i=!1,onShiftClickToggleOpen:l=()=>{},top:a})=>{const[r,n]=u.useState(i),d=(o,v,x,_)=>{o.preventDefault(),typeof _=="function"&&(o.currentTarget.value=v,o.currentTarget.label=x,_(o)),n(!1)},c=t.sections.length>0;return e.jsx(j,{fixed:!0,open:r,top:a,background:"var(--color-background-sidebar)",closedWidth:"var(--size-sidebar)",buttonPosition:y.BOTTOM,buttonAnimate:!0,button:c&&e.jsx(N,{onClick:o=>{o.shiftKey&&l&&l(o),n(!r)},colored:!0,round:!0,icon:E.LEFT}),children:e.jsx("div",{className:b(s.sidebar,r?"":s.collapsed),children:c&&e.jsxs("div",{className:s.inner,children:[e.jsx("h4",{className:s.title,children:t.title}),e.jsx(m,{isOpen:r,sections:t.sections,onClick:d})]})})})},(t,i)=>f(t,i));try{g.displayName="SideBar",g.__docgenInfo={description:"",displayName:"SideBar",props:{options:{defaultValue:null,description:"",name:"options",required:!0,type:{name:"{ title: string; sections: IOptionSection[]; }"}},startOpen:{defaultValue:null,description:"",name:"startOpen",required:!1,type:{name:"boolean"}},onShiftClickToggleOpen:{defaultValue:null,description:"",name:"onShiftClickToggleOpen",required:!1,type:{name:"((evt: MouseEvent<HTMLButtonElement, MouseEvent>) => void)"}},top:{defaultValue:null,description:"",name:"top",required:!1,type:{name:"TStringOrNumber"}}}}}catch{}export{g as S};

package/dist/storybook/assets/side-bar-eab946eb.css

@@ -1 +0,0 @@
-._inputInTable_9gmrd_1{background-color:transparent;border-radius:inherit!important;height:var(--size);min-height:100%}._inputInTable_9gmrd_1:not(:hover){border-color:transparent}._inputInTable_9gmrd_1:not(:focus){box-shadow:none}._inputHover_9gmrd_13{position:relative;border-color:var(--color-border-hover);z-index:2}._inputFocus_9gmrd_18{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputError_9gmrd_25,._inputWarning_9gmrd_26{position:relative}._inputError_9gmrd_25{z-index:2;border-color:var(--color-border-error);color:var(--color-text-error)!important;background-color:var(--color-background-error-muted)}._inputError_9gmrd_25:hover{border-color:var(--color-border-error-hover)!important}._inputError_9gmrd_25:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputWarning_9gmrd_26{z-index:1;border-color:var(--color-border-warning);color:var(--color-text-warning)!important;background-color:var(--color-background-warning-muted)}._inputWarning_9gmrd_26:hover{border-color:var(--color-border-warning-hover)!important}._inputWarning_9gmrd_26:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputDisabled_9gmrd_61{pointer-events:none;background-color:var(--color-background-disabled);color:var(--color-text-muted);box-shadow:none}._hideScrollbars_9gmrd_67{scrollbar-width:none;-ms-overflow-style:none}._hideScrollbars_9gmrd_67::-webkit-scrollbar{display:none}:root{--size-sidebar: var(--size-xl);--size-sidebar-icon: var(--size);--color-background-sidebar: var(--color-neutral-1000)}._sidebar_9gmrd_82{background-color:var(--color-background-sidebar);color:#fff;position:relative;padding:var(--padding) 0}@media print{._sidebar_9gmrd_82{display:none}}._inner_9gmrd_93{scrollbar-width:none;-ms-overflow-style:none}._inner_9gmrd_93::-webkit-scrollbar{display:none}._title_9gmrd_103,._subtitle_9gmrd_104,._label_9gmrd_105{transition:opacity .2s,max-height .2s,margin .2s,color .2s;max-height:50px}._collapsed_9gmrd_109 ._title_9gmrd_103,._collapsed_9gmrd_109 ._subtitle_9gmrd_104,._collapsed_9gmrd_109 ._label_9gmrd_105{opacity:0;max-height:0;margin-bottom:0;margin-top:0}._title_9gmrd_103{overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;margin-top:0;font-size:var(--font-size-xl);padding:0 var(--padding)}._subtitle_9gmrd_104{margin-bottom:var(--padding-xs);white-space:nowrap;font-size:var(--font-size);letter-spacing:var(--letter-spacing-wide);color:var(--color-neutral-500);padding:0 var(--padding)}._list_9gmrd_134{margin-bottom:var(--padding-xl);margin-top:0}._item_9gmrd_138{transition:padding .2s,color .2s;font-size:var(--font-size-lg);font-weight:400;display:flex;padding:var(--padding-xxs) var(--padding);align-items:center;color:var(--color-neutral-400)}._collapsed_9gmrd_109 ._item_9gmrd_138{padding:var(--padding-xxs) calc((var(--size-sidebar) - var(--size-sidebar-icon)) / 2)}._item_9gmrd_138:hover{color:var(--color-neutral-200)}._item_9gmrd_138._experimental_9gmrd_153{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.1) 8px,rgba(255,255,255,.1) 16px,transparent 16px,transparent 24px)}._item_9gmrd_138:active,._item_9gmrd_138._active_9gmrd_157{color:var(--color-neutral-0);background-color:var(--color-primary-700)}._icon_9gmrd_161{margin-right:var(--padding-sm);line-height:0;flex-shrink:0;display:block;font-size:var(--size-sidebar-icon)}._icon_9gmrd_161>span{display:block}._icon_9gmrd_161 svg{stroke-width:1}._label_9gmrd_105{white-space:nowrap;overflow:hidden}