@veeqo/transfigure 0.0.12 → 0.0.13

package/dist/index58.js

@@ -1,22 +1,21 @@
-import O from "swr";
+import g from "swr";
 import { useMemo as d } from "react";
-import { createAllView as v } from "./index72.js";
-import { viewsAdapter as I } from "./index71.js";
-import { useCustomViews as y } from "./index60.js";
-import { SWR_HOOK_OPTIONS as S } from "./index45.js";
-import { useBusinessLogic as P } from "./index7.js";
-import { fetcherV2 as T } from "./index51.js";
-const s = v(), F = () => {
-  const { DEFAULT_PAGE_NUMBER: V, DEFAULT_PAGE_SIZE: c, VIEW_TYPE: m } = P(), {
+import { createAllView as O } from "./index72.js";
+import { viewsAdapter as v } from "./index71.js";
+import { useCustomViews as C } from "./index60.js";
+import { SWR_HOOK_OPTIONS as I } from "./index45.js";
+import { useBusinessLogic as y } from "./index7.js";
+import { fetcherV2 as S } from "./index51.js";
+const s = O(), B = () => {
+  const { DEFAULT_PAGE_NUMBER: V, DEFAULT_PAGE_SIZE: c, VIEW_TYPE: a } = y(), {
     canUpdateCustomViews: w,
     orderedListOfCustomViews: o,
     defaultCustomViewId: l,
-    isLoading: g,
-    isValidating: x
-  } = y({ type: m }), { data: n, isLoading: A, isValidating: L, error: E, mutate: M } = O(
-    `/api/v2/custom_views?filter[type]=${m}&page[number]=${V}&page[size]=${c}`,
-    T,
-    S
+    isLoading: x
+  } = C({ type: a }), { data: n, isLoading: A, error: L, mutate: E } = g(
+    `/api/v2/custom_views?filter[type]=${a}&page[number]=${V}&page[size]=${c}`,
+    S,
+    I
   ), f = d(
     () => ({
       fixedViews: [s],
@@ -24,9 +23,9 @@ const s = v(), F = () => {
       viewsMap: /* @__PURE__ */ new Map([[s.id, s]])
     }),
     []
-  ), { viewsMap: _, customViews: r, fixedViews: p } = d(() => n ? n.reduce(
+  ), { viewsMap: M, customViews: r, fixedViews: p } = d(() => n ? n.reduce(
     (e, t) => {
-      const i = I({ view: t, canUpdateCustomViews: w });
+      const i = v({ view: t, canUpdateCustomViews: w });
       return e.viewsMap.set(t.id, i), t.editable ? e.customViews.push(i) : e.fixedViews.push(i), e;
     },
     {
@@ -34,22 +33,22 @@ const s = v(), F = () => {
       customViews: [],
       viewsMap: /* @__PURE__ */ new Map([[s.id, s]])
     }
-  ) : f, [n, f, w]), C = d(() => r.sort((e, t) => {
-    const i = Array.isArray(o) ? o : [], a = i.indexOf(e.id), u = i.indexOf(t.id);
-    return a === -1 && u === -1 ? 0 : a === -1 ? 1 : u === -1 ? -1 : a - u;
+  ) : f, [n, f, w]), _ = d(() => r.sort((e, t) => {
+    const i = Array.isArray(o) ? o : [], u = i.indexOf(e.id), m = i.indexOf(t.id);
+    return u === -1 && m === -1 ? 0 : u === -1 ? 1 : m === -1 ? -1 : u - m;
   }), [r, o]);
   return {
     defaultCustomViewId: l,
     viewsArray: [...p, ...r],
     fixedViews: p,
     customViews: r,
-    sortedCustomViews: C,
-    viewsMap: _,
-    isLoading: A || L || g || x,
-    error: E,
-    mutate: M
+    sortedCustomViews: _,
+    viewsMap: M,
+    isLoading: A || x,
+    error: L,
+    mutate: E
   };
 };
 export {
-  F as useViews
+  B as useViews
 };

package/dist/index59.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("react"),E=require("./index72.cjs"),I=require("./index60.cjs"),C=require("./index58.cjs"),S=require("./index7.cjs"),F=require("./index57.cjs"),q=()=>{const{VIEW_TYPE:m,SEARCH_FILTER_ID:c}=S.useBusinessLogic(),{Filters:{activeViewId:d,initFiltersFromView:e,initFromUrl:t,discardChanges:u,updateUrl:L,setFilter:f}}=F.useStores(),{isLoading:v,isValidating:p}=I.useCustomViews({type:m}),{viewsMap:s,defaultCustomViewId:w,isLoading:h}=C.useViews(),g=p||h||v;V.useEffect(()=>{if(g)return;const i=new URLSearchParams(window.location.search),l=i.get("view"),a=i.get(c),n=i.size>0;if(!d){if(l){const o=s.get(l);if(o)e(o),n&&t();else{const r=s.get(w);r&&(e(r),n&&t(!1))}}else{const o=s.get(w);if(o)e(o),u(!0),n&&t();else{const r=s.get(E.ALL_VIEW_ID);r&&e(r)}}a&&f(c,a)}},[c,d,w,u,e,t,g,f,L,s]),V.useEffect(()=>{const i=()=>{const a=new URLSearchParams(window.location.search).get("view");if(!a)return;const n=s.get(a);n&&(e(n),t())};return window.addEventListener("popstate",i),()=>window.removeEventListener("popstate",i)},[u,e,t,s])};exports.useViewUrlChange=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("react"),h=require("./index72.cjs"),E=require("./index60.cjs"),I=require("./index58.cjs"),C=require("./index7.cjs"),S=require("./index57.cjs"),F=()=>{const{VIEW_TYPE:m,SEARCH_FILTER_ID:c}=C.useBusinessLogic(),{Filters:{activeViewId:d,initFiltersFromView:e,initFromUrl:t,discardChanges:u,updateUrl:L,setFilter:f}}=S.useStores(),{isLoading:v}=E.useCustomViews({type:m}),{viewsMap:s,defaultCustomViewId:w,isLoading:p}=I.useViews(),g=p||v;V.useEffect(()=>{if(g)return;const i=new URLSearchParams(window.location.search),l=i.get("view"),o=i.get(c),n=i.size>0;if(!d){if(l){const r=s.get(l);if(r)e(r),n&&t();else{const a=s.get(w);a&&(e(a),n&&t(!1))}}else{const r=s.get(w);if(r)e(r),u(!0),n&&t();else{const a=s.get(h.ALL_VIEW_ID);a&&e(a)}}o&&f(c,o)}},[c,d,w,u,e,t,g,f,L,s]),V.useEffect(()=>{const i=()=>{const o=new URLSearchParams(window.location.search).get("view");if(!o)return;const n=s.get(o);n&&(e(n),t())};return window.addEventListener("popstate",i),()=>window.removeEventListener("popstate",i)},[u,e,t,s])};exports.useViewUrlChange=F;

package/dist/index59.js

@@ -1,11 +1,11 @@
 import { useEffect as u } from "react";
-import { ALL_VIEW_ID as I } from "./index72.js";
-import { useCustomViews as E } from "./index60.js";
-import { useViews as F } from "./index58.js";
-import { useBusinessLogic as C } from "./index7.js";
-import { useStores as D } from "./index57.js";
-const T = () => {
-  const { VIEW_TYPE: g, SEARCH_FILTER_ID: c } = C(), {
+import { ALL_VIEW_ID as h } from "./index72.js";
+import { useCustomViews as I } from "./index60.js";
+import { useViews as E } from "./index58.js";
+import { useBusinessLogic as F } from "./index7.js";
+import { useStores as C } from "./index57.js";
+const A = () => {
+  const { VIEW_TYPE: g, SEARCH_FILTER_ID: c } = F(), {
     Filters: {
       activeViewId: d,
       initFiltersFromView: e,
@@ -14,7 +14,7 @@ const T = () => {
       updateUrl: L,
       setFilter: l
     }
-  } = D(), { isLoading: V, isValidating: v } = E({ type: g }), { viewsMap: t, defaultCustomViewId: f, isLoading: h } = F(), p = v || h || V;
+  } = C(), { isLoading: v } = I({ type: g }), { viewsMap: t, defaultCustomViewId: f, isLoading: V } = E(), p = V || v;
   u(() => {
     if (p) return;
     const s = new URLSearchParams(window.location.search), m = s.get("view"), a = s.get(c), o = s.size > 0;
@@ -32,7 +32,7 @@ const T = () => {
         if (r)
           e(r), w(!0), o && i();
         else {
-          const n = t.get(I);
+          const n = t.get(h);
           n && e(n);
         }
       }
@@ -60,5 +60,5 @@ const T = () => {
   }, [w, e, i, t]);
 };
 export {
-  T as useViewUrlChange
+  A as useViewUrlChange
 };

package/dist/index77.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@veeqo/ui"),s=require("react"),k=require("@veeqo/components"),x=require("./index84.cjs"),i=require("./index85.cjs"),I=require("./index86.cjs"),T=require("./index87.cjs"),t=require("./index88.cjs"),w=require("./index78.cjs"),D=require("./index89.cjs"),b=require("./index90.cjs"),{Glyph:V}=k.VeeqoCommon,H=({onClose:c,columnDefintions:j,hiddenColumns:m,visibleColumns:h,pinnedLeftColumnIds:S,pinnedRightColumnIds:y})=>{const[u,g]=s.useState(""),a=s.useMemo(()=>new Map(j.map(n=>[n.id,n])),[]),[l,C]=s.useState(()=>({[t.ColumnGroupIds.Hidden]:m,[t.ColumnGroupIds.Visible]:h})),v=s.useMemo(()=>{const n=l[t.ColumnGroupIds.Visible].map(o=>a.get(`${o}`));return b.filterColumnsBySearch(n,u)},[l,a,u]),G=s.useMemo(()=>{const n=l[t.ColumnGroupIds.Hidden].map(o=>a.get(`${o}`));return b.filterColumnsBySearch(n,u)},[l,a,u]),{isSavingColumns:d,saveColumns:f}=D.usePersistColumns({pinnedLeftColumnIds:S,pinnedRightColumnIds:y}),q=()=>{g(""),C({[t.ColumnGroupIds.Hidden]:m,[t.ColumnGroupIds.Visible]:h})},p=s.useCallback(n=>{g(n)},[]),M=s.useCallback(n=>{const o=a.get(`${n}`);return o?e.jsx(T.ColumnItem,{column:o,isDragOverlay:!0}):null},[a]);return e.jsx(r.Modal,{variant:"lg",style:{overflowY:"hidden"},shouldShow:!0,onClose:()=>c==null?void 0:c(),headerSlot:e.jsxs(i.HeaderContainer,{children:[e.jsxs(r.Stack,{direction:"horizontal",alignX:"between",alignY:"center",children:[e.jsxs(r.Stack,{direction:"horizontal",alignX:"start",alignY:"center",spacing:"sm",children:[e.jsx(w.TableManagementGlyph,{height:32,width:32}),e.jsx(r.Text,{variant:"headingLarge",as:"h1",children:"Table management"})]}),e.jsx(r.Button,{"aria-label":"Close modal",onClick:c,variant:"flat",iconSlot:e.jsx(V,{name:"close"})})]}),e.jsxs(r.Text,{variant:"subheadingMedium",children:["Show, hide, or change the order of the columns in the view, so you always see the data that's most important to you. Learn more with our"," ",e.jsx(r.Anchor,{href:"#",target:"_blank",children:"help guide (TODO)"}),"."]}),e.jsx(r.Text,{variant:"headingSmall",children:"Column management"}),e.jsx(i.ColumnSearch,{name:"column-search-query",placeholder:"Search",value:u,onChange:p,onClearClick:()=>p(""),fill:"100%"})]}),leftActions:[{label:"Reset",onClick:q,variant:"default",disabled:d}],rightActions:[{label:"Cancel",onClick:c,variant:"default",disabled:d},{label:"Save",onClick:()=>f({visibleColumns:l[t.ColumnGroupIds.Visible]}),variant:"primary",disabled:d,loading:d}],children:e.jsx(r.Stack,{spacing:"md",alignX:"stretch",children:e.jsx(r.Stack,{spacing:4,alignX:"stretch",children:e.jsx(I.DndContainer,{items:l,setItems:C,renderDragOverlay:M,children:e.jsx(i.Container,{children:e.jsxs(i.ColumnGroupsGrid,{columns:2,spacing:"xl",children:[e.jsx(x.ColumnGroup,{id:t.ColumnGroupIds.Visible,title:"Shown columns:",columns:v}),e.jsx(i.VerticalSeparator,{children:e.jsx(i.VerticalText,{children:"Drag & Drop columns"})}),e.jsx(x.ColumnGroup,{id:t.ColumnGroupIds.Hidden,title:"Hidden columns:",columns:G})]})})})})})})};exports.TableManagementModal=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@veeqo/ui"),s=require("react"),k=require("@veeqo/components"),x=require("./index80.cjs"),i=require("./index81.cjs"),I=require("./index82.cjs"),T=require("./index83.cjs"),t=require("./index84.cjs"),w=require("./index78.cjs"),D=require("./index85.cjs"),b=require("./index86.cjs"),{Glyph:V}=k.VeeqoCommon,H=({onClose:c,columnDefintions:j,hiddenColumns:m,visibleColumns:h,pinnedLeftColumnIds:S,pinnedRightColumnIds:y})=>{const[u,g]=s.useState(""),a=s.useMemo(()=>new Map(j.map(n=>[n.id,n])),[]),[l,C]=s.useState(()=>({[t.ColumnGroupIds.Hidden]:m,[t.ColumnGroupIds.Visible]:h})),v=s.useMemo(()=>{const n=l[t.ColumnGroupIds.Visible].map(o=>a.get(`${o}`));return b.filterColumnsBySearch(n,u)},[l,a,u]),G=s.useMemo(()=>{const n=l[t.ColumnGroupIds.Hidden].map(o=>a.get(`${o}`));return b.filterColumnsBySearch(n,u)},[l,a,u]),{isSavingColumns:d,saveColumns:f}=D.usePersistColumns({pinnedLeftColumnIds:S,pinnedRightColumnIds:y}),q=()=>{g(""),C({[t.ColumnGroupIds.Hidden]:m,[t.ColumnGroupIds.Visible]:h})},p=s.useCallback(n=>{g(n)},[]),M=s.useCallback(n=>{const o=a.get(`${n}`);return o?e.jsx(T.ColumnItem,{column:o,isDragOverlay:!0}):null},[a]);return e.jsx(r.Modal,{variant:"lg",style:{overflowY:"hidden"},shouldShow:!0,onClose:()=>c==null?void 0:c(),headerSlot:e.jsxs(i.HeaderContainer,{children:[e.jsxs(r.Stack,{direction:"horizontal",alignX:"between",alignY:"center",children:[e.jsxs(r.Stack,{direction:"horizontal",alignX:"start",alignY:"center",spacing:"sm",children:[e.jsx(w.TableManagementGlyph,{height:32,width:32}),e.jsx(r.Text,{variant:"headingLarge",as:"h1",children:"Table management"})]}),e.jsx(r.Button,{"aria-label":"Close modal",onClick:c,variant:"flat",iconSlot:e.jsx(V,{name:"close"})})]}),e.jsxs(r.Text,{variant:"subheadingMedium",children:["Show, hide, or change the order of the columns in the view, so you always see the data that's most important to you. Learn more with our"," ",e.jsx(r.Anchor,{href:"#",target:"_blank",children:"help guide (TODO)"}),"."]}),e.jsx(r.Text,{variant:"headingSmall",children:"Column management"}),e.jsx(i.ColumnSearch,{name:"column-search-query",placeholder:"Search",value:u,onChange:p,onClearClick:()=>p(""),fill:"100%"})]}),leftActions:[{label:"Reset",onClick:q,variant:"default",disabled:d}],rightActions:[{label:"Cancel",onClick:c,variant:"default",disabled:d},{label:"Save",onClick:()=>f({visibleColumns:l[t.ColumnGroupIds.Visible]}),variant:"primary",disabled:d,loading:d}],children:e.jsx(r.Stack,{spacing:"md",alignX:"stretch",children:e.jsx(r.Stack,{spacing:4,alignX:"stretch",children:e.jsx(I.DndContainer,{items:l,setItems:C,renderDragOverlay:M,children:e.jsx(i.Container,{children:e.jsxs(i.ColumnGroupsGrid,{columns:2,spacing:"xl",children:[e.jsx(x.ColumnGroup,{id:t.ColumnGroupIds.Visible,title:"Shown columns:",columns:v}),e.jsx(i.VerticalSeparator,{children:e.jsx(i.VerticalText,{children:"Drag & Drop columns"})}),e.jsx(x.ColumnGroup,{id:t.ColumnGroupIds.Hidden,title:"Hidden columns:",columns:G})]})})})})})})};exports.TableManagementModal=H;

package/dist/index77.js

@@ -2,14 +2,14 @@ import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import { Modal as T, Stack as m, Text as d, Button as O, Anchor as X } from "@veeqo/ui";
 import { useState as b, useMemo as h, useCallback as v } from "react";
 import { VeeqoCommon as A } from "@veeqo/components";
-import { ColumnGroup as S } from "./index84.js";
-import { Container as I, ColumnGroupsGrid as Y, VerticalSeparator as $, VerticalText as j, HeaderContainer as q, ColumnSearch as z } from "./index85.js";
-import { DndContainer as B } from "./index86.js";
-import { ColumnItem as L } from "./index87.js";
-import { ColumnGroupIds as r } from "./index88.js";
+import { ColumnGroup as S } from "./index80.js";
+import { Container as I, ColumnGroupsGrid as Y, VerticalSeparator as $, VerticalText as j, HeaderContainer as q, ColumnSearch as z } from "./index81.js";
+import { DndContainer as B } from "./index82.js";
+import { ColumnItem as L } from "./index83.js";
+import { ColumnGroupIds as r } from "./index84.js";
 import { TableManagementGlyph as Q } from "./index78.js";
-import { usePersistColumns as R } from "./index89.js";
-import { filterColumnsBySearch as y } from "./index90.js";
+import { usePersistColumns as R } from "./index85.js";
+import { filterColumnsBySearch as y } from "./index86.js";
 const { Glyph: P } = A, ae = ({
   onClose: l,
   columnDefintions: w,

package/dist/index79.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),n=require("react"),l=require("./index102.cjs"),v=({children:i,style:o,className:c})=>{const r=n.useRef(null),[u,f]=n.useState(0);return n.useEffect(()=>{const e=r.current,s=()=>{if(e){const{top:a}=e.getBoundingClientRect();f(a)}};s();const t=new ResizeObserver(s);return e&&t.observe(e),()=>{e&&t.unobserve(e),t.disconnect()}},[]),d.jsx(l.AdaptiveStyledContainer,{style:o,className:c,offset:u,ref:r,children:i})};exports.AdaptiveHeightContainer=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),n=require("react"),l=require("./index101.cjs"),v=({children:i,style:o,className:c})=>{const r=n.useRef(null),[u,f]=n.useState(0);return n.useEffect(()=>{const e=r.current,s=()=>{if(e){const{top:a}=e.getBoundingClientRect();f(a)}};s();const t=new ResizeObserver(s);return e&&t.observe(e),()=>{e&&t.unobserve(e),t.disconnect()}},[]),d.jsx(l.AdaptiveStyledContainer,{style:o,className:c,offset:u,ref:r,children:i})};exports.AdaptiveHeightContainer=v;

package/dist/index79.js

@@ -1,6 +1,6 @@
 import { jsx as p } from "react/jsx-runtime";
 import { useRef as a, useState as d, useEffect as m } from "react";
-import { AdaptiveStyledContainer as v } from "./index102.js";
+import { AdaptiveStyledContainer as v } from "./index101.js";
 const R = ({
   children: o,
   style: s,

package/dist/index80.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@veeqo/ui"),r=({shouldShow:a,viewName:n,onCancel:t,onDelete:o})=>e.jsx(i.Modal,{headerTitle:`Delete '${n}' view?`,"data-testid":"act-react-listing-custom-confirmation-popup",variant:"sm",shouldShow:a,onClose:t,rightActions:[{className:"act-react-listing-custom-confirmation-popup-cancel",label:"Cancel",onClick:t,variant:"default"},{className:"act-react-listing-custom-confirmation-popup-delete",label:"Delete",onClick:o,variant:"primaryDestructive"}],showHeaderCloseButton:!0,children:e.jsx(i.Text,{variant:"body",children:"This cannot be undone."})});exports.Confirmation=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@veeqo/ui"),s=require("@dnd-kit/sortable"),a=require("./index96.cjs"),l=require("./index97.cjs"),c=require("./index83.cjs"),u=require("./index84.cjs"),d=require("./index81.cjs"),m=({id:r,title:n,columns:i})=>e.jsxs(o.Stack,{spacing:"sm",alignX:"stretch",children:[e.jsx(d.StickyText,{variant:"bodyBold",children:n}),e.jsx(s.SortableContext,{id:r,items:i,strategy:s.verticalListSortingStrategy,children:e.jsx(l.DroppableArea,{id:r,spacing:"sm",alignX:"stretch",children:i.map(t=>e.jsx(a.SortableItem,{id:t.id,children:e.jsx(c.ColumnItem,{column:t,isHidden:r===u.ColumnGroupIds.Hidden})},t.id))})})]});exports.ColumnGroup=m;

package/dist/index80.js

@@ -1,31 +1,15 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Modal as n, Text as r } from "@veeqo/ui";
-const s = ({ shouldShow: a, viewName: i, onCancel: t, onDelete: o }) => /* @__PURE__ */ e(
-  n,
-  {
-    headerTitle: `Delete '${i}' view?`,
-    "data-testid": "act-react-listing-custom-confirmation-popup",
-    variant: "sm",
-    shouldShow: a,
-    onClose: t,
-    rightActions: [
-      {
-        className: "act-react-listing-custom-confirmation-popup-cancel",
-        label: "Cancel",
-        onClick: t,
-        variant: "default"
-      },
-      {
-        className: "act-react-listing-custom-confirmation-popup-delete",
-        label: "Delete",
-        onClick: o,
-        variant: "primaryDestructive"
-      }
-    ],
-    showHeaderCloseButton: !0,
-    children: /* @__PURE__ */ e(r, { variant: "body", children: "This cannot be undone." })
-  }
-);
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { Stack as n } from "@veeqo/ui";
+import { SortableContext as p, verticalListSortingStrategy as a } from "@dnd-kit/sortable";
+import { SortableItem as s } from "./index96.js";
+import { DroppableArea as d } from "./index97.js";
+import { ColumnItem as l } from "./index83.js";
+import { ColumnGroupIds as c } from "./index84.js";
+import { StickyText as f } from "./index81.js";
+const I = ({ id: t, title: e, columns: o }) => /* @__PURE__ */ m(n, { spacing: "sm", alignX: "stretch", children: [
+  /* @__PURE__ */ r(f, { variant: "bodyBold", children: e }),
+  /* @__PURE__ */ r(p, { id: t, items: o, strategy: a, children: /* @__PURE__ */ r(d, { id: t, spacing: "sm", alignX: "stretch", children: o.map((i) => /* @__PURE__ */ r(s, { id: i.id, children: /* @__PURE__ */ r(l, { column: i, isHidden: t === c.Hidden }) }, i.id)) }) })
+] });
 export {
-  s as Confirmation
+  I as ColumnGroup
 };

package/dist/index81.cjs

@@ -1,19 +1,104 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),e=require("@veeqo/ui"),s=t=>t&&t.__esModule?t:{default:t},o=s(r),i=o.default(e.Button).attrs(()=>({role:"option",variant:"flat"}))`
-  margin: ${e.theme.sizes.xs};
-  min-width: 180px;
-  justify-content: flex-start;
-  font-size: ${e.theme.text.body.fontSize};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("styled-components"),e=require("@veeqo/ui"),a=require("@veeqo/components"),i=o=>o&&o.__esModule?o:{default:o},t=i(l),{Glyph:n}=a.VeeqoCommon,s=t.default.div`
+  width: 1px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 1px solid ${e.theme.colors.neutral.grey.dark};
+  height: 100%;
+  margin-top: 40px;
+`,c=t.default(e.Text)`
+  writing-mode: vertical-rl;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  padding: 30px 0;
+  text-align: center;
+  font-size: 10px;
+  color: ${e.theme.colors.neutral.ink.lightest};
+  height: max-content;
+`,d=t.default(e.Text)`
+  position: sticky;
+  top: 0;
+  background: #ffffff;
+  padding-bottom: ${e.theme.sizes[2]};
+  z-index: 1;
+`,u=t.default(e.Text)`
+  color: ${e.theme.colors.neutral.ink.light};
+`,g=t.default(e.Grid)`
+  // overflow-y: auto;
+  position: unset;
+`,r=t.default(n).attrs(()=>({name:"visibility-off"}))`
+  margin-left: auto;
+`,p=t.default(e.Stack)`
+  border-radius: 4px;
+  padding: 8px 12px;
+  background: #ffffff;
+  border: 1px solid ${e.theme.colors.neutral.ink.lightest};
+  transition: all ease 200ms;
+
+  ${({isHidden:o})=>o&&`
+      ${e.Text} {
+        color: ${e.theme.colors.neutral.ink.light};
+      }
+    `}
 
   &:hover {
-    background-color: ${e.theme.colors.neutral.grey.lightest};
     color: ${e.theme.colors.secondary.blue.base};
-    cursor: pointer;
+    background: ${e.theme.colors.neutral.grey.lightest};
+    border: 1px solid ${e.theme.colors.neutral.grey.light};
+
+    ${e.Text} {
+      color: ${e.theme.colors.secondary.blue.base};
+    }
+
+    ${r} {
+      color: ${e.theme.colors.neutral.ink.light};
+    }
+  }
+
+  ${({isDragOverlay:o})=>o&&`
+      color: ${e.theme.colors.secondary.blue.base};
+      background: ${e.theme.colors.neutral.grey.lightest};
+      border: 1px solid ${e.theme.colors.neutral.grey.light};
+      cursor: grabbing;
+
+      ${e.Text} {
+        color: ${e.theme.colors.secondary.blue.base};
+      }
+    `}
+`,h=t.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: calc(100% - 2px);
+  border-radius: 4px;
+  border: 1px dashed ${e.theme.colors.neutral.grey.dark};
+  background: ${e.theme.colors.neutral.grey.lightest};
+`,f=t.default(e.Stack)`
+  flex: 1;
+  padding: 0;
+`,m=t.default(e.Search)`
+  input {
+    height: 40px;
+    box-sizing: border-box;
+  }
+
+  svg {
+    width: 16px;
   }
-`,n=o.default(e.Card.Surface).attrs(()=>({role:"listbox",elevation:4}))`
-  margin-top: ${e.theme.sizes.xs};
-  background-color: white;
-`,l=o.default.hr`
-  width: 100%;
-  border-top: 1px solid ${e.theme.colors.neutral.grey.dark};
-  margin: 0;
-`;exports.Divider=l;exports.Item=i;exports.MenuItems=n;
+`,b=t.default.div`
+  position: relative;
+  min-height: 500px;
+`,x=t.default(e.BaseContainer)`
+  display: flex;
+  flex-direction: column;
+  gap: ${e.theme.sizes.base};
+  padding: ${e.theme.sizes.md};
+`,y=t.default.dialog`
+  display: contents;
+`;exports.ColumnGroupsGrid=g;exports.ColumnItemWrapper=p;exports.ColumnSearch=m;exports.Container=b;exports.DetailedText=u;exports.DndDragOverlayDialog=y;exports.DraggingOverlay=h;exports.DroppableAreaStack=f;exports.HeaderContainer=x;exports.StickyText=d;exports.VerticalSeparator=s;exports.VerticalText=c;exports.VisibilityOffIcon=r;

package/dist/index81.js

@@ -1,26 +1,122 @@
-import t from "styled-components";
-import { theme as o, Card as r, Button as e } from "@veeqo/ui";
-const n = t(e).attrs(() => ({ role: "option", variant: "flat" }))`
-  margin: ${o.sizes.xs};
-  min-width: 180px;
-  justify-content: flex-start;
-  font-size: ${o.text.body.fontSize};
+import r from "styled-components";
+import { Grid as l, theme as o, Text as t, BaseContainer as n, Search as s, Stack as i } from "@veeqo/ui";
+import { VeeqoCommon as a } from "@veeqo/components";
+const { Glyph: c } = a, b = r.div`
+  width: 1px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 1px solid ${o.colors.neutral.grey.dark};
+  height: 100%;
+  margin-top: 40px;
+`, f = r(t)`
+  writing-mode: vertical-rl;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  padding: 30px 0;
+  text-align: center;
+  font-size: 10px;
+  color: ${o.colors.neutral.ink.lightest};
+  height: max-content;
+`, h = r(t)`
+  position: sticky;
+  top: 0;
+  background: #ffffff;
+  padding-bottom: ${o.sizes[2]};
+  z-index: 1;
+`, x = r(t)`
+  color: ${o.colors.neutral.ink.light};
+`, m = r(l)`
+  // overflow-y: auto;
+  position: unset;
+`, d = r(c).attrs(() => ({ name: "visibility-off" }))`
+  margin-left: auto;
+`, $ = r(i)`
+  border-radius: 4px;
+  padding: 8px 12px;
+  background: #ffffff;
+  border: 1px solid ${o.colors.neutral.ink.lightest};
+  transition: all ease 200ms;
+
+  ${({ isHidden: e }) => e && `
+      ${t} {
+        color: ${o.colors.neutral.ink.light};
+      }
+    `}
 
   &:hover {
-    background-color: ${o.colors.neutral.grey.lightest};
     color: ${o.colors.secondary.blue.base};
-    cursor: pointer;
+    background: ${o.colors.neutral.grey.lightest};
+    border: 1px solid ${o.colors.neutral.grey.light};
+
+    ${t} {
+      color: ${o.colors.secondary.blue.base};
+    }
+
+    ${d} {
+      color: ${o.colors.neutral.ink.light};
+    }
+  }
+
+  ${({ isDragOverlay: e }) => e && `
+      color: ${o.colors.secondary.blue.base};
+      background: ${o.colors.neutral.grey.lightest};
+      border: 1px solid ${o.colors.neutral.grey.light};
+      cursor: grabbing;
+
+      ${t} {
+        color: ${o.colors.secondary.blue.base};
+      }
+    `}
+`, y = r.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: calc(100% - 2px);
+  border-radius: 4px;
+  border: 1px dashed ${o.colors.neutral.grey.dark};
+  background: ${o.colors.neutral.grey.lightest};
+`, k = r(i)`
+  flex: 1;
+  padding: 0;
+`, v = r(s)`
+  input {
+    height: 40px;
+    box-sizing: border-box;
+  }
+
+  svg {
+    width: 16px;
   }
-`, a = t(r.Surface).attrs(() => ({ role: "listbox", elevation: 4 }))`
-  margin-top: ${o.sizes.xs};
-  background-color: white;
-`, l = t.hr`
-  width: 100%;
-  border-top: 1px solid ${o.colors.neutral.grey.dark};
-  margin: 0;
+`, C = r.div`
+  position: relative;
+  min-height: 500px;
+`, w = r(n)`
+  display: flex;
+  flex-direction: column;
+  gap: ${o.sizes.base};
+  padding: ${o.sizes.md};
+`, z = r.dialog`
+  display: contents;
 `;
 export {
-  l as Divider,
-  n as Item,
-  a as MenuItems
+  m as ColumnGroupsGrid,
+  $ as ColumnItemWrapper,
+  v as ColumnSearch,
+  C as Container,
+  x as DetailedText,
+  z as DndDragOverlayDialog,
+  y as DraggingOverlay,
+  k as DroppableAreaStack,
+  w as HeaderContainer,
+  h as StickyText,
+  b as VerticalSeparator,
+  f as VerticalText,
+  d as VisibilityOffIcon
 };

package/dist/index82.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),l=require("./index96.cjs"),o=e=>i.jsx(l.StyledSortableViews,{...e,onChange:t=>{t.filter(r=>{var n;return(n=r.children)==null?void 0:n.length}).length||e.onChange(t)}});exports.LegacySortableViews=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("@dnd-kit/core"),S=require("@dnd-kit/sortable"),h=require("./index81.cjs"),q=require("@veeqo/ui"),C=require("./index48.cjs"),E=require("./index98.cjs"),p=require("./index99.cjs"),A=require("./index10.cjs"),b=require("./index47.cjs"),x={droppable:{strategy:e.MeasuringStrategy.Always}},M={sideEffects:e.defaultDropAnimationSideEffects({styles:{active:{opacity:"0.5"}}})},j=({items:o,setItems:s,children:a,renderDragOverlay:n})=>{const{closeModal:i,openModal:l}=C.useModal(),c=e.useSensors(e.useSensor(e.PointerSensor),e.useSensor(e.KeyboardSensor,{coordinateGetter:S.sortableKeyboardCoordinates})),{activeId:t,handleDragCancel:d,handleDragEnd:u,handleDragOver:g,handleDragStart:D}=E.useDragHandlers({items:o,setItems:s}),{collisionDetectionStrategy:y}=p.useCollisionDetectionStrategy({items:o});return r.jsx(A.ErrorBoundary,{errorComponent:r.jsx(q.Alert,{variant:"error",title:"An error occurred",rightActions:[{label:"Reload",onClick:()=>{i(),l(b.ModalId.ORDERS_TABLE_MANAGEMENT)}}]}),children:r.jsxs(e.DndContext,{sensors:c,measuring:x,collisionDetection:y,onDragStart:D,onDragOver:g,onDragEnd:u,onDragCancel:d,children:[a,r.jsx(h.DndDragOverlayDialog,{open:!0,children:r.jsx(e.DragOverlay,{dropAnimation:M,zIndex:2001,children:t&&n?n(t):null})})]})})};exports.DndContainer=j;

package/dist/index82.js

@@ -1,17 +1,70 @@
-import { jsx as o } from "react/jsx-runtime";
-import { StyledSortableViews as i } from "./index96.js";
-const h = (e) => /* @__PURE__ */ o(
-  i,
-  {
-    ...e,
-    onChange: (t) => {
-      t.filter((n) => {
-        var r;
-        return (r = n.children) == null ? void 0 : r.length;
-      }).length || e.onChange(t);
-    }
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { useSensors as u, useSensor as n, PointerSensor as y, KeyboardSensor as S, DndContext as h, MeasuringStrategy as A, DragOverlay as E, defaultDropAnimationSideEffects as C } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as M } from "@dnd-kit/sortable";
+import { DndDragOverlayDialog as v } from "./index81.js";
+import { Alert as b } from "@veeqo/ui";
+import { useModal as x } from "./index48.js";
+import { useDragHandlers as O } from "./index98.js";
+import { useCollisionDetectionStrategy as I } from "./index99.js";
+import { ErrorBoundary as R } from "./index10.js";
+import { ModalId as j } from "./index47.js";
+const B = {
+  droppable: {
+    strategy: A.Always
   }
-);
+}, G = {
+  sideEffects: C({
+    styles: {
+      active: {
+        opacity: "0.5"
+      }
+    }
+  })
+}, q = ({
+  items: o,
+  setItems: a,
+  children: i,
+  renderDragOverlay: e
+}) => {
+  const { closeModal: s, openModal: l } = x(), d = u(
+    n(y),
+    n(S, {
+      coordinateGetter: M
+    })
+  ), { activeId: t, handleDragCancel: c, handleDragEnd: m, handleDragOver: p, handleDragStart: D } = O({ items: o, setItems: a }), { collisionDetectionStrategy: g } = I({
+    items: o
+  });
+  return /* @__PURE__ */ r(R, { errorComponent: /* @__PURE__ */ r(b, { variant: "error", title: "An error occurred", rightActions: [
+    {
+      label: "Reload",
+      onClick: () => {
+        s(), l(j.ORDERS_TABLE_MANAGEMENT);
+      }
+    }
+  ] }), children: /* @__PURE__ */ f(
+    h,
+    {
+      sensors: d,
+      measuring: B,
+      collisionDetection: g,
+      onDragStart: D,
+      onDragOver: p,
+      onDragEnd: m,
+      onDragCancel: c,
+      children: [
+        i,
+        /* @__PURE__ */ r(v, { open: !0, children: /* @__PURE__ */ r(
+          E,
+          {
+            dropAnimation: G,
+            zIndex: 2001,
+            children: t && e ? e(t) : null
+          }
+        ) })
+      ]
+    }
+  ) });
+};
 export {
-  h as LegacySortableViews
+  q as DndContainer
 };

package/dist/index83.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@veeqo/ui"),t=require("./index97.cjs"),a=i.theme.colors.secondary.blue.base,o=({mainEntityLabelPlural:r="",onClick:n})=>e.jsx(t.Notification,{className:"act-react-listing-custom-notification-new-draft",children:e.jsx(t.Pill,{children:e.jsxs(i.Stack,{direction:"horizontal",alignY:"center",children:[e.jsx(t.Glyph,{name:"info",color:a}),e.jsxs(t.Wrap,{children:[e.jsx(t.Text,{variant:"body",margin:"0 4px 0 0",children:"You are currently in a"}),e.jsx(t.Bold,{variant:"bodyBoldDark",children:"draft view"}),e.jsx(t.Hint,{variant:"hintText",children:`Apply filters and create a custom view of your ${r.toLowerCase()}`})]}),e.jsx(t.Button,{className:"act-react-listing-custom-notification-save-draft-btn",variant:"primary",onClick:n,size:"sm",children:"Create view"})]})})});exports.InfoPill=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@veeqo/ui"),a=require("@veeqo/components"),n=require("./index81.cjs"),{Glyph:c}=a.VeeqoCommon,l=({column:t,isHidden:r,isDragOverlay:s})=>{const o=t.title||t.tooltip;return e.jsxs(n.ColumnItemWrapper,{direction:"horizontal",spacing:"sm",alignY:"center",isHidden:r,isDragOverlay:s,children:[e.jsx(c,{name:"drag-indicator",size:4}),t.detailed?e.jsxs(i.Stack,{spacing:"xs",children:[e.jsxs(i.Text,{variant:"body",children:[o," (detailed)"]}),e.jsx(n.DetailedText,{variant:"hintText",children:t.detailed})]}):e.jsx(i.Text,{variant:"body",children:o}),!s&&r&&e.jsx(n.VisibilityOffIcon,{size:4})]})};exports.ColumnItem=l;