@veeqo/transfigure 0.0.9 → 0.0.11

package/dist/index39.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),s=require("@veeqo/ui"),h=require("mobx-react"),n=require("./index82.cjs"),u=require("./index56.cjs"),g=s.theme.colors.secondary.blue.base,v=h.observer(({onDiscard:i,viewName:t,onSaveDraft:c})=>{const{saveChanges:o,isSubmitting:r}=u.usePersistUnsavedChanges(),[d,a]=l.useState(!1);return e.jsx(n.Notification,{children:e.jsx(n.Container,{className:"act-react-listing-custom-notification-unsaved-changes",children:e.jsxs(s.Stack,{direction:"horizontal",alignY:"center",children:[e.jsx(n.Glyph,{name:"attention",color:g}),e.jsxs(n.Wrap,{children:[e.jsx(n.Text,{variant:"body",margin:"0 4px 0 0",children:"You have unsaved changes to"}),e.jsx(n.Bold,{variant:"bodyBoldDark",children:`'${t}'`})]}),e.jsx(n.Button,{className:"act-react-listing-custom-notification-unsaved-changes-discard",onClick:i,size:"sm",children:"Discard changes"}),e.jsxs(s.AnimatedDropdown,{reversed:!0,shouldShowDropdown:d,onClickAway:()=>a(!1),cta:e.jsx(n.Button,{className:"act-react-listing-custom-notification-unsaved-changes-toggle-dropdown",variant:"primary",onClick:()=>a(!0),size:"sm",dropdown:!0,children:"Save changes"}),children:[e.jsx(n.Item,{onClick:c,className:"act-react-listing-custom-notification-unsaved-changes-create-new-view",children:e.jsx(n.Text,{variant:"body",children:"Create new view"})}),e.jsxs(n.Item,{onClick:o,disabled:r,className:"act-react-listing-custom-notification-unsaved-changes-save-to-existing-view",children:[e.jsx(n.Text,{variant:"body",margin:"0 4px 0 0",children:"Save changes to"}),e.jsx(n.Text,{variant:"bodyBoldDark",children:t})]})]})]})})})});exports.UnsavedChangesPill=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),s=require("@veeqo/ui"),h=require("mobx-react"),n=require("./index91.cjs"),u=require("./index56.cjs"),g=s.theme.colors.secondary.blue.base,v=h.observer(({onDiscard:i,viewName:t,onSaveDraft:c})=>{const{saveChanges:o,isSubmitting:r}=u.usePersistUnsavedChanges(),[d,a]=l.useState(!1);return e.jsx(n.Notification,{children:e.jsx(n.Container,{className:"act-react-listing-custom-notification-unsaved-changes",children:e.jsxs(s.Stack,{direction:"horizontal",alignY:"center",children:[e.jsx(n.Glyph,{name:"attention",color:g}),e.jsxs(n.Wrap,{children:[e.jsx(n.Text,{variant:"body",margin:"0 4px 0 0",children:"You have unsaved changes to"}),e.jsx(n.Bold,{variant:"bodyBoldDark",children:`'${t}'`})]}),e.jsx(n.Button,{className:"act-react-listing-custom-notification-unsaved-changes-discard",onClick:i,size:"sm",children:"Discard changes"}),e.jsxs(s.AnimatedDropdown,{reversed:!0,shouldShowDropdown:d,onClickAway:()=>a(!1),cta:e.jsx(n.Button,{className:"act-react-listing-custom-notification-unsaved-changes-toggle-dropdown",variant:"primary",onClick:()=>a(!0),size:"sm",dropdown:!0,children:"Save changes"}),children:[e.jsx(n.Item,{onClick:c,className:"act-react-listing-custom-notification-unsaved-changes-create-new-view",children:e.jsx(n.Text,{variant:"body",children:"Create new view"})}),e.jsxs(n.Item,{onClick:o,disabled:r,className:"act-react-listing-custom-notification-unsaved-changes-save-to-existing-view",children:[e.jsx(n.Text,{variant:"body",margin:"0 4px 0 0",children:"Save changes to"}),e.jsx(n.Text,{variant:"bodyBoldDark",children:t})]})]})]})})})});exports.UnsavedChangesPill=v;

package/dist/index39.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import { useState as m } from "react";
 import { Stack as g, theme as u, AnimatedDropdown as v } from "@veeqo/ui";
 import { observer as p } from "mobx-react";
-import { Notification as f, Container as w, Glyph as C, Wrap as b, Text as a, Bold as y, Button as o, Item as r } from "./index82.js";
+import { Notification as f, Container as w, Glyph as C, Wrap as b, Text as a, Bold as y, Button as o, Item as r } from "./index91.js";
 import { usePersistUnsavedChanges as k } from "./index56.js";
 const S = u.colors.secondary.blue.base, A = p(
   ({

package/dist/index41.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),m=require("mobx-react"),s=require("@veeqo/ui"),c=require("./index84.cjs"),q=require("./index38.cjs"),S=require("./index58.cjs"),f=require("./index59.cjs"),p=require("./index34.cjs"),l=require("./index33.cjs"),C=require("./index57.cjs"),a=require("./index10.cjs"),b=m.observer(({viewTabSlotValueMap:n,isLoadingTableData:o})=>{const{Views:{draftViewsList:d}}=C.useStores(),{viewsArray:w,fixedViews:x}=S.useViews(),[t,i]=u.useState(!1),[h,V]=u.useState(null),j=()=>i(!1);return f.useViewUrlChange(),e.jsxs(e.Fragment,{children:[e.jsxs(s.ViewsContainer,{onClickMenu:()=>i(!0),ariaMenuControls:"views-menu",ariaMenuExpanded:t,ref:V,children:[w.map(r=>e.jsx(a.ErrorBoundary,{children:e.jsx(l.ViewTab,{view:r,viewTabSlotValueMap:n,isLoadingTableData:o})},r.id)),d.map(r=>e.jsx(a.ErrorBoundary,{children:e.jsx(l.ViewTab,{view:r,viewTabSlotValueMap:n,isLoadingTableData:o})},r.id))]}),t&&e.jsx(s.Popover,{id:"views-menu",anchorElement:h,placement:"bottom",onShouldClose:()=>i(!1),children:e.jsxs(s.Card.Surface,{children:[e.jsx(c.FixedViews,{children:x.map(r=>e.jsx(s.Text,{variant:"placeholder",children:r.label},r.id||r.label))}),e.jsx(q.SortableViews,{}),e.jsx(c.Divider,{}),e.jsx(p.CreateView,{hideActionsPopover:j})]})})]})});exports.ViewList=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),m=require("mobx-react"),s=require("@veeqo/ui"),c=require("./index92.cjs"),q=require("./index38.cjs"),S=require("./index58.cjs"),f=require("./index59.cjs"),p=require("./index34.cjs"),l=require("./index33.cjs"),C=require("./index57.cjs"),a=require("./index10.cjs"),b=m.observer(({viewTabSlotValueMap:n,isLoadingTableData:o})=>{const{Views:{draftViewsList:d}}=C.useStores(),{viewsArray:w,fixedViews:x}=S.useViews(),[t,i]=u.useState(!1),[h,V]=u.useState(null),j=()=>i(!1);return f.useViewUrlChange(),e.jsxs(e.Fragment,{children:[e.jsxs(s.ViewsContainer,{onClickMenu:()=>i(!0),ariaMenuControls:"views-menu",ariaMenuExpanded:t,ref:V,children:[w.map(r=>e.jsx(a.ErrorBoundary,{children:e.jsx(l.ViewTab,{view:r,viewTabSlotValueMap:n,isLoadingTableData:o})},r.id)),d.map(r=>e.jsx(a.ErrorBoundary,{children:e.jsx(l.ViewTab,{view:r,viewTabSlotValueMap:n,isLoadingTableData:o})},r.id))]}),t&&e.jsx(s.Popover,{id:"views-menu",anchorElement:h,placement:"bottom",onShouldClose:()=>i(!1),children:e.jsxs(s.Card.Surface,{children:[e.jsx(c.FixedViews,{children:x.map(r=>e.jsx(s.Text,{variant:"placeholder",children:r.label},r.id||r.label))}),e.jsx(q.SortableViews,{}),e.jsx(c.Divider,{}),e.jsx(p.CreateView,{hideActionsPopover:j})]})})]})});exports.ViewList=b;

package/dist/index41.js

@@ -2,7 +2,7 @@ import { jsxs as i, Fragment as w, jsx as e } from "react/jsx-runtime";
 import { useState as m } from "react";
 import { observer as V } from "mobx-react";
 import { ViewsContainer as v, Popover as x, Card as C, Text as S } from "@veeqo/ui";
-import { FixedViews as A, Divider as E } from "./index84.js";
+import { FixedViews as A, Divider as E } from "./index92.js";
 import { SortableViews as L } from "./index38.js";
 import { useViews as M } from "./index58.js";
 import { useViewUrlChange as b } from "./index59.js";

package/dist/index43.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),S=require("./index77.cjs"),u=require("@veeqo/ui"),q=require("./index78.cjs"),A=require("mobx-react"),I=require("./index7.cjs"),L=require("./index48.cjs"),p=require("./index57.cjs"),x=require("./index58.cjs"),c=require("./index47.cjs"),C=A.observer(({columnDefinitions:r})=>{var i;const{DEFAULT_HIDDEN_COLUMNS:o,DEFAULT_VISIBLE_COLUMNS:n}=I.useBusinessLogic(),m=[...o,...n],{closeModal:d,isModalOpen:M,openModal:b}=L.useModal(),{Filters:{activeViewId:t}}=p.useStores(),{viewsMap:T}=x.useViews();if(!t)return null;const e=T.get(t),a=Array.isArray((i=e==null?void 0:e.columns)==null?void 0:i.columnIds),l=a?e.columns.columnIds:n,g=a?m.filter(E=>!l.includes(E)):o;return s.jsxs(s.Fragment,{children:[s.jsx(u.Tooltip,{text:e!=null&&e.editable?"Table management":"Go to a custom view to use Table management",children:s.jsx(u.Button,{"aria-label":"Open table management",onClick:()=>b(c.ModalId.ORDERS_TABLE_MANAGEMENT),size:"sm",iconSlot:s.jsx(q.TableManagementGlyph,{}),disabled:!(e!=null&&e.editable)})}),M(c.ModalId.ORDERS_TABLE_MANAGEMENT)&&s.jsx(S.TableManagementModal,{visibleColumns:l,hiddenColumns:g,columnDefintions:r,onClose:d})]})});exports.TableManagement=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),C=require("./index77.cjs"),m=require("@veeqo/ui"),D=require("./index78.cjs"),N=require("mobx-react"),_=require("./index7.cjs"),j=require("./index48.cjs"),p=require("./index57.cjs"),v=require("./index58.cjs"),M=require("./index47.cjs"),y=N.observer(({columnDefinitions:b,pinnedRightColumnIds:n=[],pinnedLeftColumnIds:t=[]})=>{var d;const{DEFAULT_HIDDEN_COLUMNS:T,DEFAULT_VISIBLE_COLUMNS:g}=_.useBusinessLogic(),l=[...t,...n],i=T.filter(o=>!l.includes(o)),a=g.filter(o=>!l.includes(o)),E=[...i,...a],{closeModal:S,isModalOpen:q,openModal:A}=j.useModal(),{Filters:{activeViewId:c}}=p.useStores(),{viewsMap:L,isLoading:h}=v.useViews();if(!c||h)return null;const e=L.get(c),u=Array.isArray((d=e==null?void 0:e.columns)==null?void 0:d.columnIds),r=u?e.columns.columnIds:a,x=u?E.filter(o=>!r.includes(o)):i;return s.jsxs(s.Fragment,{children:[s.jsx(m.Tooltip,{text:e!=null&&e.editable?"Table management":"Go to a custom view to use Table management",children:s.jsx(m.Button,{"aria-label":"Open table management",onClick:()=>A(M.ModalId.ORDERS_TABLE_MANAGEMENT),size:"sm",iconSlot:s.jsx(D.TableManagementGlyph,{}),disabled:!(e!=null&&e.editable)})}),q(M.ModalId.ORDERS_TABLE_MANAGEMENT)&&s.jsx(C.TableManagementModal,{pinnedRightColumnIds:n,pinnedLeftColumnIds:t,visibleColumns:r,hiddenColumns:x,columnDefintions:b,onClose:S})]})});exports.TableManagement=y;

package/dist/index43.js

@@ -1,48 +1,50 @@
-import { jsxs as E, Fragment as T, jsx as e } from "react/jsx-runtime";
-import { TableManagementModal as A } from "./index77.js";
-import { Tooltip as g, Button as C } from "@veeqo/ui";
-import { TableManagementGlyph as L } from "./index78.js";
-import { observer as S } from "mobx-react";
-import { useBusinessLogic as _ } from "./index7.js";
-import { useModal as D } from "./index48.js";
-import { useStores as I } from "./index57.js";
-import { useViews as N } from "./index58.js";
-import { ModalId as i } from "./index47.js";
-const j = S(({ columnDefinitions: r }) => {
-  var a;
-  const { DEFAULT_HIDDEN_COLUMNS: s, DEFAULT_VISIBLE_COLUMNS: n } = _(), c = [...s, ...n], { closeModal: d, isModalOpen: p, openModal: u } = D(), { Filters: { activeViewId: t } } = I(), { viewsMap: M } = N();
-  if (!t) return null;
-  const o = M.get(t), m = Array.isArray((a = o == null ? void 0 : o.columns) == null ? void 0 : a.columnIds), l = m ? o.columns.columnIds : n, b = m ? c.filter(
-    (f) => !l.includes(f)
-  ) : s;
-  return /* @__PURE__ */ E(T, { children: [
-    /* @__PURE__ */ e(
-      g,
+import { jsxs as L, Fragment as N, jsx as s } from "react/jsx-runtime";
+import { TableManagementModal as S } from "./index77.js";
+import { Tooltip as _, Button as h } from "@veeqo/ui";
+import { TableManagementGlyph as v } from "./index78.js";
+import { observer as O } from "mobx-react";
+import { useBusinessLogic as B } from "./index7.js";
+import { useModal as I } from "./index48.js";
+import { useStores as x } from "./index57.js";
+import { useViews as y } from "./index58.js";
+import { ModalId as u } from "./index47.js";
+const q = O(({ columnDefinitions: p, pinnedRightColumnIds: n = [], pinnedLeftColumnIds: t = [] }) => {
+  var d;
+  const { DEFAULT_HIDDEN_COLUMNS: M, DEFAULT_VISIBLE_COLUMNS: b } = B(), i = [...t, ...n], l = M.filter((e) => !i.includes(e)), m = b.filter((e) => !i.includes(e)), f = [...l, ...m], { closeModal: T, isModalOpen: E, openModal: A } = I(), { Filters: { activeViewId: a } } = x(), { viewsMap: g, isLoading: C } = y();
+  if (!a || C) return null;
+  const o = g.get(a), r = Array.isArray((d = o == null ? void 0 : o.columns) == null ? void 0 : d.columnIds), c = r ? o.columns.columnIds : m, D = r ? f.filter(
+    (e) => !c.includes(e)
+  ) : l;
+  return /* @__PURE__ */ L(N, { children: [
+    /* @__PURE__ */ s(
+      _,
       {
         text: o != null && o.editable ? "Table management" : "Go to a custom view to use Table management",
-        children: /* @__PURE__ */ e(
-          C,
+        children: /* @__PURE__ */ s(
+          h,
           {
             "aria-label": "Open table management",
-            onClick: () => u(i.ORDERS_TABLE_MANAGEMENT),
+            onClick: () => A(u.ORDERS_TABLE_MANAGEMENT),
             size: "sm",
-            iconSlot: /* @__PURE__ */ e(L, {}),
+            iconSlot: /* @__PURE__ */ s(v, {}),
             disabled: !(o != null && o.editable)
           }
         )
       }
     ),
-    p(i.ORDERS_TABLE_MANAGEMENT) && /* @__PURE__ */ e(
-      A,
+    E(u.ORDERS_TABLE_MANAGEMENT) && /* @__PURE__ */ s(
+      S,
       {
-        visibleColumns: l,
-        hiddenColumns: b,
-        columnDefintions: r,
-        onClose: d
+        pinnedRightColumnIds: n,
+        pinnedLeftColumnIds: t,
+        visibleColumns: c,
+        hiddenColumns: D,
+        columnDefintions: p,
+        onClose: T
       }
     )
   ] });
 });
 export {
-  j as TableManagement
+  q as TableManagement
 };

package/dist/index45.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var a=(e=>(e.TEXT="text",e.NUMBER="number",e.CHECKBOX="checkbox",e.RADIO="radio",e.DATE_RANGE="date_range",e.NUMBER_RANGE="number_range",e))(a||{});const n={revalidateOnFocus:!1,revalidateOnReconnect:!1,revalidateOnMount:!1,revalidateIfStale:!1};exports.FilterChoiceValue=a;exports.SWR_HOOK_OPTIONS=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var n=(e=>(e.TEXT="text",e.NUMBER="number",e.CHECKBOX="checkbox",e.RADIO="radio",e.DATE_RANGE="date_range",e.NUMBER_RANGE="number_range",e))(n||{});const O={revalidateOnFocus:!1,revalidateOnReconnect:!1,revalidateOnMount:!1};exports.FilterChoiceValue=n;exports.SWR_HOOK_OPTIONS=O;

package/dist/index45.js

@@ -1,11 +1,10 @@
-var n = /* @__PURE__ */ ((a) => (a.TEXT = "text", a.NUMBER = "number", a.CHECKBOX = "checkbox", a.RADIO = "radio", a.DATE_RANGE = "date_range", a.NUMBER_RANGE = "number_range", a))(n || {});
-const e = {
+var a = /* @__PURE__ */ ((n) => (n.TEXT = "text", n.NUMBER = "number", n.CHECKBOX = "checkbox", n.RADIO = "radio", n.DATE_RANGE = "date_range", n.NUMBER_RANGE = "number_range", n))(a || {});
+const O = {
   revalidateOnFocus: !1,
   revalidateOnReconnect: !1,
-  revalidateOnMount: !1,
-  revalidateIfStale: !1
+  revalidateOnMount: !1
 };
 export {
-  n as FilterChoiceValue,
-  e as SWR_HOOK_OPTIONS
+  a as FilterChoiceValue,
+  O as SWR_HOOK_OPTIONS
 };

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"),a=require("react"),q=require("@veeqo/components"),x=require("./index86.cjs"),o=require("./index87.cjs"),M=require("./index88.cjs"),k=require("./index89.cjs"),t=require("./index90.cjs"),I=require("./index78.cjs"),T=require("./index91.cjs"),j=require("./index92.cjs"),{Glyph:w}=q.VeeqoCommon,D=({onClose:i,columnDefintions:S,hiddenColumns:h,visibleColumns:m})=>{const[c,g]=a.useState(""),s=a.useMemo(()=>new Map(S.map(n=>[n.id,n])),[]),[u,C]=a.useState(()=>({[t.ColumnGroupIds.Hidden]:h,[t.ColumnGroupIds.Visible]:m})),b=a.useMemo(()=>{const n=u[t.ColumnGroupIds.Visible].map(l=>s.get(`${l}`));return j.filterColumnsBySearch(n,c)},[u,s,c]),y=a.useMemo(()=>{const n=u[t.ColumnGroupIds.Hidden].map(l=>s.get(`${l}`));return j.filterColumnsBySearch(n,c)},[u,s,c]),{isSavingColumns:d,saveColumns:v}=T.usePersistColumns(),G=()=>{g(""),C({[t.ColumnGroupIds.Hidden]:h,[t.ColumnGroupIds.Visible]:m})},p=a.useCallback(n=>{g(n)},[]),f=a.useCallback(n=>{const l=s.get(`${n}`);return l?e.jsx(k.ColumnItem,{column:l,isDragOverlay:!0}):null},[s]);return e.jsx(r.Modal,{variant:"lg",style:{overflowY:"hidden"},shouldShow:!0,onClose:()=>i==null?void 0:i(),headerSlot:e.jsxs(o.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(I.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:i,variant:"flat",iconSlot:e.jsx(w,{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(o.ColumnSearch,{name:"column-search-query",placeholder:"Search",value:c,onChange:p,onClearClick:()=>p(""),fill:"100%"})]}),leftActions:[{label:"Reset",onClick:G,variant:"default",disabled:d}],rightActions:[{label:"Cancel",onClick:i,variant:"default",disabled:d},{label:"Save",onClick:()=>v({visibleColumns:m}),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(M.DndContainer,{items:u,setItems:C,renderDragOverlay:f,children:e.jsx(o.Container,{children:e.jsxs(o.ColumnGroupsGrid,{columns:2,spacing:"xl",children:[e.jsx(x.ColumnGroup,{id:t.ColumnGroupIds.Visible,title:"Shown columns:",columns:b}),e.jsx(o.VerticalSeparator,{children:e.jsx(o.VerticalText,{children:"Drag & Drop columns"})}),e.jsx(x.ColumnGroup,{id:t.ColumnGroupIds.Hidden,title:"Hidden columns:",columns:y})]})})})})})})};exports.TableManagementModal=D;
+"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("./index79.cjs"),i=require("./index80.cjs"),I=require("./index81.cjs"),T=require("./index82.cjs"),t=require("./index83.cjs"),w=require("./index78.cjs"),D=require("./index84.cjs"),b=require("./index85.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

@@ -1,86 +1,88 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Modal as G, Stack as m, Text as h, Button as H, Anchor as T } from "@veeqo/ui";
-import { useState as b, useMemo as u, useCallback as S } from "react";
-import { VeeqoCommon as O } from "@veeqo/components";
-import { ColumnGroup as v } from "./index86.js";
-import { Container as X, ColumnGroupsGrid as A, VerticalSeparator as I, VerticalText as Y, HeaderContainer as $, ColumnSearch as j } from "./index87.js";
-import { DndContainer as q } from "./index88.js";
-import { ColumnItem as z } from "./index89.js";
-import { ColumnGroupIds as r } from "./index90.js";
-import { TableManagementGlyph as B } from "./index78.js";
-import { usePersistColumns as L } from "./index91.js";
-import { filterColumnsBySearch as y } from "./index92.js";
-const { Glyph: Q } = O, ne = ({
-  onClose: i,
+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 "./index79.js";
+import { Container as I, ColumnGroupsGrid as Y, VerticalSeparator as $, VerticalText as j, HeaderContainer as q, ColumnSearch as z } from "./index80.js";
+import { DndContainer as B } from "./index81.js";
+import { ColumnItem as L } from "./index82.js";
+import { ColumnGroupIds as r } from "./index83.js";
+import { TableManagementGlyph as Q } from "./index78.js";
+import { usePersistColumns as R } from "./index84.js";
+import { filterColumnsBySearch as y } from "./index85.js";
+const { Glyph: P } = A, ae = ({
+  onClose: l,
   columnDefintions: w,
-  hiddenColumns: g,
-  visibleColumns: d
+  hiddenColumns: u,
+  visibleColumns: g,
+  pinnedLeftColumnIds: k,
+  pinnedRightColumnIds: D
 }) => {
-  const [l, p] = b(""), a = u(
+  const [o, p] = b(""), a = h(
     () => new Map(w.map((n) => [n.id, n])),
     []
-  ), [o, f] = b(() => ({
-    [r.Hidden]: g,
-    [r.Visible]: d
-  })), k = u(() => {
-    const n = o[r.Visible].map((t) => a.get(`${t}`));
-    return y(n, l);
-  }, [o, a, l]), D = u(() => {
-    const n = o[r.Hidden].map((t) => a.get(`${t}`));
-    return y(n, l);
-  }, [o, a, l]), { isSavingColumns: s, saveColumns: M } = L(), V = () => {
+  ), [i, f] = b(() => ({
+    [r.Hidden]: u,
+    [r.Visible]: g
+  })), M = h(() => {
+    const n = i[r.Visible].map((t) => a.get(`${t}`));
+    return y(n, o);
+  }, [i, a, o]), V = h(() => {
+    const n = i[r.Hidden].map((t) => a.get(`${t}`));
+    return y(n, o);
+  }, [i, a, o]), { isSavingColumns: c, saveColumns: x } = R({ pinnedLeftColumnIds: k, pinnedRightColumnIds: D }), G = () => {
     p(""), f({
-      [r.Hidden]: g,
-      [r.Visible]: d
+      [r.Hidden]: u,
+      [r.Visible]: g
     });
-  }, C = S(
+  }, C = v(
     (n) => {
       p(n);
     },
     []
-  ), x = S(
+  ), H = v(
     (n) => {
       const t = a.get(`${n}`);
-      return t ? /* @__PURE__ */ e(z, { column: t, isDragOverlay: !0 }) : null;
+      return t ? /* @__PURE__ */ e(L, { column: t, isDragOverlay: !0 }) : null;
     },
     [a]
   );
   return /* @__PURE__ */ e(
-    G,
+    T,
     {
       variant: "lg",
       style: { overflowY: "hidden" },
       shouldShow: !0,
-      onClose: () => i == null ? void 0 : i(),
-      headerSlot: /* @__PURE__ */ c($, { children: [
-        /* @__PURE__ */ c(m, { direction: "horizontal", alignX: "between", alignY: "center", children: [
-          /* @__PURE__ */ c(m, { direction: "horizontal", alignX: "start", alignY: "center", spacing: "sm", children: [
-            /* @__PURE__ */ e(B, { height: 32, width: 32 }),
-            /* @__PURE__ */ e(h, { variant: "headingLarge", as: "h1", children: "Table management" })
+      onClose: () => l == null ? void 0 : l(),
+      headerSlot: /* @__PURE__ */ s(q, { children: [
+        /* @__PURE__ */ s(m, { direction: "horizontal", alignX: "between", alignY: "center", children: [
+          /* @__PURE__ */ s(m, { direction: "horizontal", alignX: "start", alignY: "center", spacing: "sm", children: [
+            /* @__PURE__ */ e(Q, { height: 32, width: 32 }),
+            /* @__PURE__ */ e(d, { variant: "headingLarge", as: "h1", children: "Table management" })
           ] }),
           /* @__PURE__ */ e(
-            H,
+            O,
             {
               "aria-label": "Close modal",
-              onClick: i,
+              onClick: l,
               variant: "flat",
-              iconSlot: /* @__PURE__ */ e(Q, { name: "close" })
+              iconSlot: /* @__PURE__ */ e(P, { name: "close" })
             }
           )
         ] }),
-        /* @__PURE__ */ c(h, { variant: "subheadingMedium", children: [
+        /* @__PURE__ */ s(d, { 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",
           " ",
-          /* @__PURE__ */ e(T, { href: "#", target: "_blank", children: "help guide (TODO)" }),
+          /* @__PURE__ */ e(X, { href: "#", target: "_blank", children: "help guide (TODO)" }),
           "."
         ] }),
-        /* @__PURE__ */ e(h, { variant: "headingSmall", children: "Column management" }),
+        /* @__PURE__ */ e(d, { variant: "headingSmall", children: "Column management" }),
         /* @__PURE__ */ e(
-          j,
+          z,
           {
             name: "column-search-query",
             placeholder: "Search",
-            value: l,
+            value: o,
             onChange: C,
             onClearClick: () => C(""),
             fill: "100%"
@@ -90,42 +92,42 @@ const { Glyph: Q } = O, ne = ({
       leftActions: [
         {
           label: "Reset",
-          onClick: V,
+          onClick: G,
           variant: "default",
-          disabled: s
+          disabled: c
         }
       ],
       rightActions: [
         {
           label: "Cancel",
-          onClick: i,
+          onClick: l,
           variant: "default",
-          disabled: s
+          disabled: c
         },
         {
           label: "Save",
-          onClick: () => M({ visibleColumns: d }),
+          onClick: () => x({ visibleColumns: i[r.Visible] }),
           variant: "primary",
-          disabled: s,
-          loading: s
+          disabled: c,
+          loading: c
         }
       ],
-      children: /* @__PURE__ */ e(m, { spacing: "md", alignX: "stretch", children: /* @__PURE__ */ e(m, { spacing: 4, alignX: "stretch", children: /* @__PURE__ */ e(q, { items: o, setItems: f, renderDragOverlay: x, children: /* @__PURE__ */ e(X, { children: /* @__PURE__ */ c(A, { columns: 2, spacing: "xl", children: [
+      children: /* @__PURE__ */ e(m, { spacing: "md", alignX: "stretch", children: /* @__PURE__ */ e(m, { spacing: 4, alignX: "stretch", children: /* @__PURE__ */ e(B, { items: i, setItems: f, renderDragOverlay: H, children: /* @__PURE__ */ e(I, { children: /* @__PURE__ */ s(Y, { columns: 2, spacing: "xl", children: [
         /* @__PURE__ */ e(
-          v,
+          S,
           {
             id: r.Visible,
             title: "Shown columns:",
-            columns: k
+            columns: M
           }
         ),
-        /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(Y, { children: "Drag & Drop columns" }) }),
+        /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(j, { children: "Drag & Drop columns" }) }),
         /* @__PURE__ */ e(
-          v,
+          S,
           {
             id: r.Hidden,
             title: "Hidden columns:",
-            columns: D
+            columns: V
           }
         )
       ] }) }) }) }) })
@@ -133,5 +135,5 @@ const { Glyph: Q } = O, ne = ({
   );
 };
 export {
-  ne as TableManagementModal
+  ae as TableManagementModal
 };

package/dist/index79.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("./index95.cjs"),l=require("./index96.cjs"),c=require("./index82.cjs"),u=require("./index83.cjs"),d=require("./index80.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/index79.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 "./index95.js";
+import { DroppableArea as d } from "./index96.js";
+import { ColumnItem as l } from "./index82.js";
+import { ColumnGroupIds as c } from "./index83.js";
+import { StickyText as f } from "./index80.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/index80.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;