@veeqo/transfigure 2.1.0 → 2.1.1

package/dist/index90.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="_actionsHeaderContainer_fgqms_1",t={actionsHeaderContainer:e};exports.actionsHeaderContainer=e;exports.default=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("@veeqo/ui"),t=require("react"),j=require("./index93.cjs"),i=require("./index94.cjs"),q=require("./index95.cjs"),D=require("./index96.cjs"),s=require("./index97.cjs"),T=require("./index98.cjs"),b=require("./index99.cjs"),V=({onClose:u,columnDefinitions:G,hiddenColumns:d,visibleColumns:m,pinnedLeftColumnIds:I,pinnedRightColumnIds:f})=>{const[c,p]=t.useState(""),a=t.useMemo(()=>new Map(G.map(r=>[r.id,r])),[]),[o,g]=t.useState(()=>({[s.ColumnGroupIds.Hidden]:d,[s.ColumnGroupIds.Visible]:m})),y=t.useMemo(()=>{const r=o[s.ColumnGroupIds.Visible].map(l=>a.get(`${l}`));return b.filterColumnsBySearch(r,c)},[o,a,c]),v=t.useMemo(()=>{const r=o[s.ColumnGroupIds.Hidden].map(l=>a.get(`${l}`));return b.filterColumnsBySearch(r,c)},[o,a,c]),{isSavingColumns:h,saveColumns:k}=T.usePersistColumns({pinnedLeftColumnIds:I,pinnedRightColumnIds:f}),M=()=>{p(""),g({[s.ColumnGroupIds.Hidden]:d,[s.ColumnGroupIds.Visible]:m})},x=t.useCallback(r=>{if(p(r),!r){const l=new Set([...d,...m]);g(S=>({[s.ColumnGroupIds.Hidden]:S[s.ColumnGroupIds.Hidden].filter(C=>l.has(`${C}`)),[s.ColumnGroupIds.Visible]:S[s.ColumnGroupIds.Visible].filter(C=>l.has(`${C}`))}))}},[d,m]),w=t.useCallback(r=>{const l=a.get(`${r}`);return l?e.jsx(D.ColumnItem,{column:l,isDragOverlay:!0}):null},[a]);return e.jsx(n.Modal,{variant:"lg",style:{overflowY:"hidden"},shouldShow:!0,onClose:()=>u==null?void 0:u(),headerSlot:e.jsxs(i.HeaderContainer,{children:[e.jsxs(n.Stack,{direction:"horizontal",alignX:"between",alignY:"center",children:[e.jsxs(n.Stack,{direction:"horizontal",alignX:"start",alignY:"center",spacing:"sm",children:[e.jsx(n.ListBoardIcon,{height:n.theme.sizes.lg,width:n.theme.sizes.lg}),e.jsx(n.Text,{variant:"headingLarge",as:"h1",children:"Table management"})]}),e.jsx(n.Button,{"aria-label":"Close modal",onClick:u,variant:"flat",iconSlot:e.jsx(n.CloseIcon,{})})]}),e.jsxs(n.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(n.Anchor,{href:"#",target:"_blank",children:"help guide (TODO)"}),"."]}),e.jsx(n.Text,{variant:"headingSmall",children:"Column management"}),e.jsx(i.ColumnSearch,{name:"column-search-query",placeholder:"Search",value:c,onChange:x,onClearClick:()=>x(""),fill:"100%"})]}),leftActions:[{label:"Reset",onClick:M,variant:"default",disabled:h}],rightActions:[{label:"Cancel",onClick:u,variant:"default",disabled:h},{label:"Save",onClick:()=>k({visibleColumns:o[s.ColumnGroupIds.Visible]}),variant:"primary",disabled:h,loading:h}],children:e.jsx(n.Stack,{spacing:"md",alignX:"stretch",children:e.jsx(n.Stack,{spacing:4,alignX:"stretch",children:e.jsx(q.DndContainer,{items:o,setItems:g,renderDragOverlay:w,children:e.jsx(i.Container,{children:e.jsxs(i.ColumnGroupsGrid,{columns:2,spacing:"xl",children:[e.jsx(j.ColumnGroup,{id:s.ColumnGroupIds.Visible,title:"Shown columns:",columns:y}),e.jsx(i.VerticalSeparator,{children:e.jsx(i.VerticalText,{children:"Drag & Drop columns"})}),e.jsx(j.ColumnGroup,{id:s.ColumnGroupIds.Hidden,title:"Hidden columns:",columns:v})]})})})})})})};exports.TableManagementModal=V;

package/dist/index90.js

@@ -1,7 +1,118 @@
-const e = "_actionsHeaderContainer_fgqms_1", a = {
-  actionsHeaderContainer: e
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { Modal as G, Stack as h, ListBoardIcon as O, theme as v, Text as p, Button as X, CloseIcon as A, Anchor as B } from "@veeqo/ui";
+import { useState as w, useMemo as f, useCallback as y } from "react";
+import { ColumnGroup as V } from "./index93.js";
+import { Container as L, ColumnGroupsGrid as Y, VerticalSeparator as j, VerticalText as Q, HeaderContainer as R, ColumnSearch as P } from "./index94.js";
+import { DndContainer as _ } from "./index95.js";
+import { ColumnItem as q } from "./index96.js";
+import { ColumnGroupIds as n } from "./index97.js";
+import { usePersistColumns as E } from "./index98.js";
+import { filterColumnsBySearch as k } from "./index99.js";
+const ae = ({
+  onClose: l,
+  columnDefinitions: D,
+  hiddenColumns: c,
+  visibleColumns: d,
+  pinnedLeftColumnIds: H,
+  pinnedRightColumnIds: M
+}) => {
+  const [o, b] = w(""), r = f(() => new Map(D.map((i) => [i.id, i])), []), [t, u] = w(() => ({
+    [n.Hidden]: c,
+    [n.Visible]: d
+  })), x = f(() => {
+    const i = t[n.Visible].map((a) => r.get(`${a}`));
+    return k(i, o);
+  }, [t, r, o]), I = f(() => {
+    const i = t[n.Hidden].map((a) => r.get(`${a}`));
+    return k(i, o);
+  }, [t, r, o]), { isSavingColumns: m, saveColumns: T } = E({ pinnedLeftColumnIds: H, pinnedRightColumnIds: M }), $ = () => {
+    b(""), u({
+      [n.Hidden]: c,
+      [n.Visible]: d
+    });
+  }, C = y(
+    (i) => {
+      if (b(i), !i) {
+        const a = /* @__PURE__ */ new Set([...c, ...d]);
+        u((S) => ({
+          [n.Hidden]: S[n.Hidden].filter((g) => a.has(`${g}`)),
+          [n.Visible]: S[n.Visible].filter((g) => a.has(`${g}`))
+        }));
+      }
+    },
+    [c, d]
+  ), z = y(
+    (i) => {
+      const a = r.get(`${i}`);
+      return a ? /* @__PURE__ */ e(q, { column: a, isDragOverlay: !0 }) : null;
+    },
+    [r]
+  );
+  return /* @__PURE__ */ e(
+    G,
+    {
+      variant: "lg",
+      style: { overflowY: "hidden" },
+      shouldShow: !0,
+      onClose: () => l == null ? void 0 : l(),
+      headerSlot: /* @__PURE__ */ s(R, { children: [
+        /* @__PURE__ */ s(h, { direction: "horizontal", alignX: "between", alignY: "center", children: [
+          /* @__PURE__ */ s(h, { direction: "horizontal", alignX: "start", alignY: "center", spacing: "sm", children: [
+            /* @__PURE__ */ e(O, { height: v.sizes.lg, width: v.sizes.lg }),
+            /* @__PURE__ */ e(p, { variant: "headingLarge", as: "h1", children: "Table management" })
+          ] }),
+          /* @__PURE__ */ e(X, { "aria-label": "Close modal", onClick: l, variant: "flat", iconSlot: /* @__PURE__ */ e(A, {}) })
+        ] }),
+        /* @__PURE__ */ s(p, { 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(B, { href: "#", target: "_blank", children: "help guide (TODO)" }),
+          "."
+        ] }),
+        /* @__PURE__ */ e(p, { variant: "headingSmall", children: "Column management" }),
+        /* @__PURE__ */ e(
+          P,
+          {
+            name: "column-search-query",
+            placeholder: "Search",
+            value: o,
+            onChange: C,
+            onClearClick: () => C(""),
+            fill: "100%"
+          }
+        )
+      ] }),
+      leftActions: [
+        {
+          label: "Reset",
+          onClick: $,
+          variant: "default",
+          disabled: m
+        }
+      ],
+      rightActions: [
+        {
+          label: "Cancel",
+          onClick: l,
+          variant: "default",
+          disabled: m
+        },
+        {
+          label: "Save",
+          onClick: () => T({ visibleColumns: t[n.Visible] }),
+          variant: "primary",
+          disabled: m,
+          loading: m
+        }
+      ],
+      children: /* @__PURE__ */ e(h, { spacing: "md", alignX: "stretch", children: /* @__PURE__ */ e(h, { spacing: 4, alignX: "stretch", children: /* @__PURE__ */ e(_, { items: t, setItems: u, renderDragOverlay: z, children: /* @__PURE__ */ e(L, { children: /* @__PURE__ */ s(Y, { columns: 2, spacing: "xl", children: [
+        /* @__PURE__ */ e(V, { id: n.Visible, title: "Shown columns:", columns: x }),
+        /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(Q, { children: "Drag & Drop columns" }) }),
+        /* @__PURE__ */ e(V, { id: n.Hidden, title: "Hidden columns:", columns: I })
+      ] }) }) }) }) })
+    }
+  );
 };
 export {
-  e as actionsHeaderContainer,
-  a as default
+  ae as TableManagementModal
 };

package/dist/index91.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@veeqo/ui"),r=require("./index2.cjs"),s=o=>{let e={colourPalette:t.theme.colors.secondary.blue,customTextColour:void 0};switch(o){case r.ViewStatusTypes.ERROR:e={colourPalette:t.theme.colors.secondary.red,customTextColour:void 0};break}return e};exports.getViewTheme=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index79.cjs"),e=i.createAllView(),t={fixedViews:[e],customViews:[],viewsMap:new Map([[e.id,e]])};exports.INITIAL_VIEWS_STATE=t;

package/dist/index91.js

@@ -1,20 +1,9 @@
-import { theme as o } from "@veeqo/ui";
-import { ViewStatusTypes as r } from "./index2.js";
-const l = (t) => {
-  let e = {
-    colourPalette: o.colors.secondary.blue,
-    customTextColour: void 0
-  };
-  switch (t) {
-    case r.ERROR:
-      e = {
-        colourPalette: o.colors.secondary.red,
-        customTextColour: void 0
-      };
-      break;
-  }
-  return e;
+import { createAllView as i } from "./index79.js";
+const e = i(), s = {
+  fixedViews: [e],
+  customViews: [],
+  viewsMap: /* @__PURE__ */ new Map([[e.id, e]])
 };
 export {
-  l as getViewTheme
+  s as INITIAL_VIEWS_STATE
 };

package/dist/index92.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index79.cjs"),e=i.createAllView(),t={fixedViews:[e],customViews:[],viewsMap:new Map([[e.id,e]])};exports.INITIAL_VIEWS_STATE=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@veeqo/ui"),r=require("./index2.cjs"),s=o=>{let e={colourPalette:t.theme.colors.secondary.blue,customTextColour:void 0};switch(o){case r.ViewStatusTypes.ERROR:e={colourPalette:t.theme.colors.secondary.red,customTextColour:void 0};break}return e};exports.getViewTheme=s;

package/dist/index92.js

@@ -1,9 +1,20 @@
-import { createAllView as i } from "./index79.js";
-const e = i(), s = {
-  fixedViews: [e],
-  customViews: [],
-  viewsMap: /* @__PURE__ */ new Map([[e.id, e]])
+import { theme as o } from "@veeqo/ui";
+import { ViewStatusTypes as r } from "./index2.js";
+const l = (t) => {
+  let e = {
+    colourPalette: o.colors.secondary.blue,
+    customTextColour: void 0
+  };
+  switch (t) {
+    case r.ERROR:
+      e = {
+        colourPalette: o.colors.secondary.red,
+        customTextColour: void 0
+      };
+      break;
+  }
+  return e;
 };
 export {
-  s as INITIAL_VIEWS_STATE
+  l as getViewTheme
 };

package/dist/index93.cjs

@@ -1 +1 @@
-"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("./index108.cjs"),l=require("./index109.cjs"),c=require("./index96.cjs"),u=require("./index97.cjs"),d=require("./index94.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;
+"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("./index109.cjs"),l=require("./index110.cjs"),c=require("./index96.cjs"),u=require("./index97.cjs"),d=require("./index94.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/index93.js

@@ -1,8 +1,8 @@
 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 "./index108.js";
-import { DroppableArea as d } from "./index109.js";
+import { SortableItem as s } from "./index109.js";
+import { DroppableArea as d } from "./index110.js";
 import { ColumnItem as l } from "./index96.js";
 import { ColumnGroupIds as c } from "./index97.js";
 import { StickyText as f } from "./index94.js";

package/dist/index95.cjs

@@ -1 +1 @@
-"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("./index94.cjs"),q=require("@veeqo/ui"),C=require("./index52.cjs"),E=require("./index110.cjs"),p=require("./index111.cjs"),A=require("./index12.cjs"),b=require("./index51.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;
+"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("./index94.cjs"),q=require("@veeqo/ui"),C=require("./index52.cjs"),E=require("./index111.cjs"),p=require("./index112.cjs"),A=require("./index12.cjs"),b=require("./index51.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/index95.js

@@ -4,8 +4,8 @@ import { sortableKeyboardCoordinates as M } from "@dnd-kit/sortable";
 import { DndDragOverlayDialog as v } from "./index94.js";
 import { Alert as b } from "@veeqo/ui";
 import { useModal as x } from "./index52.js";
-import { useDragHandlers as O } from "./index110.js";
-import { useCollisionDetectionStrategy as I } from "./index111.js";
+import { useDragHandlers as O } from "./index111.js";
+import { useCollisionDetectionStrategy as I } from "./index112.js";
 import { ErrorBoundary as R } from "./index12.js";
 import { ModalId as j } from "./index51.js";
 const B = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/transfigure",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "type": "module",
   "sideEffects": false,
   "main": "dist/index.cjs",