@veeqo/transfigure 0.0.4 → 0.0.6

package/dist/index77.js

@@ -1,17 +1,157 @@
-import { jsx as o } from "react/jsx-runtime";
-import { StyledSortableViews as i } from "./index83.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 e, jsxs as s } from "react/jsx-runtime";
+import { Modal as O, Stack as m, Text as d, Button as X, Anchor as Y } from "@veeqo/ui";
+import { useState as h, useMemo as u, useCallback as C } from "react";
+import { VeeqoCommon as A } from "@veeqo/components";
+import { ColumnGroup as w } from "./index80.js";
+import { Container as $, ColumnGroupsGrid as j, VerticalSeparator as q, VerticalText as z, HeaderContainer as B, ColumnSearch as L } from "./index81.js";
+import { DndContainer as Q } from "./index82.js";
+import { ColumnItem as R } from "./index83.js";
+import { ColumnGroupIds as n } from "./index84.js";
+import { TableManagementGlyph as F } from "./index78.js";
+import { usePersistColumns as N } from "./index85.js";
+import { filterColumnsBySearch as V } from "./index86.js";
+import { useStores as P } from "./index57.js";
+import { useViews as _ } from "./index58.js";
+const { Glyph: E } = A, ce = ({
+  onClose: a,
+  columnDefintions: k,
+  hiddenColumns: p,
+  visibleColumns: g
+}) => {
+  const [o, f] = h(""), i = u(
+    () => new Map(k.map((t) => [t.id, t])),
+    []
+  ), [r, b] = h(() => ({
+    [n.Hidden]: p,
+    [n.Visible]: g
+  })), x = u(() => {
+    const t = r[n.Visible].map((l) => i.get(`${l}`));
+    return V(t, o);
+  }, [r, i, o]), D = u(() => {
+    const t = r[n.Hidden].map((l) => i.get(`${l}`));
+    return V(t, o);
+  }, [r, i, o]), {
+    Notifications: { notify: v }
+  } = P(), { saveColumns: M } = N(), { mutate: G } = _(), [c, y] = h(!1), H = () => {
+    f(""), b({
+      [n.Hidden]: p,
+      [n.Visible]: g
+    });
+  }, T = async () => {
+    try {
+      y(!0);
+      const t = r[n.Visible];
+      if (t.length < 1) {
+        v({ type: "error", text: "You must have at least one visible column." });
+        return;
+      }
+      await M({
+        visibleColumns: t
+      }), await G(), a == null || a();
+    } catch {
+      v({ type: "error", text: "Failed to save columns" });
+    } finally {
+      y(!1);
     }
-  }
-);
+  }, S = C(
+    (t) => {
+      f(t);
+    },
+    []
+  ), I = C(
+    (t) => {
+      const l = i.get(`${t}`);
+      return l ? /* @__PURE__ */ e(R, { column: l, isDragOverlay: !0 }) : null;
+    },
+    [i]
+  );
+  return /* @__PURE__ */ e(
+    O,
+    {
+      variant: "lg",
+      style: { overflowY: "hidden" },
+      shouldShow: !0,
+      onClose: () => a == null ? void 0 : a(),
+      headerSlot: /* @__PURE__ */ s(B, { 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(F, { height: 32, width: 32 }),
+            /* @__PURE__ */ e(d, { variant: "headingLarge", as: "h1", children: "Table management" })
+          ] }),
+          /* @__PURE__ */ e(
+            X,
+            {
+              "aria-label": "Close modal",
+              onClick: a,
+              variant: "flat",
+              iconSlot: /* @__PURE__ */ e(E, { name: "close" })
+            }
+          )
+        ] }),
+        /* @__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(Y, { href: "#", target: "_blank", children: "help guide (TODO)" }),
+          "."
+        ] }),
+        /* @__PURE__ */ e(d, { variant: "headingSmall", children: "Column management" }),
+        /* @__PURE__ */ e(
+          L,
+          {
+            name: "column-search-query",
+            placeholder: "Search",
+            value: o,
+            onChange: S,
+            onClearClick: () => S(""),
+            fill: "100%"
+          }
+        )
+      ] }),
+      leftActions: [
+        {
+          label: "Reset",
+          onClick: H,
+          variant: "default",
+          disabled: c
+        }
+      ],
+      rightActions: [
+        {
+          label: "Cancel",
+          onClick: a,
+          variant: "default",
+          disabled: c
+        },
+        {
+          label: "Save",
+          onClick: T,
+          variant: "primary",
+          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: r, setItems: b, renderDragOverlay: I, children: /* @__PURE__ */ e($, { children: /* @__PURE__ */ s(j, { columns: 2, spacing: "xl", children: [
+        /* @__PURE__ */ e(
+          w,
+          {
+            id: n.Visible,
+            title: "Shown columns:",
+            columns: x
+          }
+        ),
+        /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(z, { children: "Drag & Drop columns" }) }),
+        /* @__PURE__ */ e(
+          w,
+          {
+            id: n.Hidden,
+            title: "Hidden columns:",
+            columns: D
+          }
+        )
+      ] }) }) }) }) })
+    }
+  );
+};
 export {
-  h as LegacySortableViews
+  ce as TableManagementModal
 };

package/dist/index78.cjs

@@ -1,12 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("@veeqo/ui"),o=e=>e&&e.__esModule?e:{default:e},r=o(i),d=r.default(t.BaseContainer)`
-  display: flex;
-  flex-direction: column;
-  padding: 8px;
-  padding-left: 35px;
-  margin: 8px;
-  background-color: ${t.theme.colors.neutral.grey.lightest};
-`,l=r.default.hr`
-  width: 100%;
-  border-top: 1px solid ${t.theme.colors.neutral.grey.dark};
-  margin: 0 0 4px 0;
-`;exports.Divider=l;exports.FixedViews=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=({height:H=16,width:V=16})=>e.jsx("svg",{width:V,height:H,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M12.6667 3.33333V12.6667H3.33333V3.33333H12.6667ZM13.4 2H2.6C2.26667 2 2 2.26667 2 2.6V13.4C2 13.6667 2.26667 14 2.6 14H13.4C13.6667 14 14 13.6667 14 13.4V2.6C14 2.26667 13.6667 2 13.4 2ZM7.33333 4.66667H11.3333V6H7.33333V4.66667ZM7.33333 7.33333H11.3333V8.66667H7.33333V7.33333ZM7.33333 10H11.3333V11.3333H7.33333V10ZM4.66667 4.66667H6V6H4.66667V4.66667ZM4.66667 7.33333H6V8.66667H4.66667V7.33333ZM4.66667 10H6V11.3333H4.66667V10Z",fill:"#37424D"})});exports.TableManagementGlyph=t;

package/dist/index78.js

@@ -1,18 +1,21 @@
-import r from "styled-components";
-import { theme as o, BaseContainer as e } from "@veeqo/ui";
-const d = r(e)`
-  display: flex;
-  flex-direction: column;
-  padding: 8px;
-  padding-left: 35px;
-  margin: 8px;
-  background-color: ${o.colors.neutral.grey.lightest};
-`, l = r.hr`
-  width: 100%;
-  border-top: 1px solid ${o.colors.neutral.grey.dark};
-  margin: 0 0 4px 0;
-`;
+import { jsx as H } from "react/jsx-runtime";
+const Z = ({ height: V = 16, width: M = 16 }) => /* @__PURE__ */ H(
+  "svg",
+  {
+    width: M,
+    height: V,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ H(
+      "path",
+      {
+        d: "M12.6667 3.33333V12.6667H3.33333V3.33333H12.6667ZM13.4 2H2.6C2.26667 2 2 2.26667 2 2.6V13.4C2 13.6667 2.26667 14 2.6 14H13.4C13.6667 14 14 13.6667 14 13.4V2.6C14 2.26667 13.6667 2 13.4 2ZM7.33333 4.66667H11.3333V6H7.33333V4.66667ZM7.33333 7.33333H11.3333V8.66667H7.33333V7.33333ZM7.33333 10H11.3333V11.3333H7.33333V10ZM4.66667 4.66667H6V6H4.66667V4.66667ZM4.66667 7.33333H6V8.66667H4.66667V7.33333ZM4.66667 10H6V11.3333H4.66667V10Z",
+        fill: "#37424D"
+      }
+    )
+  }
+);
 export {
-  l as Divider,
-  d as FixedViews
+  Z as TableManagementGlyph
 };

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"),t=require("./index84.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"),o=require("@veeqo/ui"),s=require("@dnd-kit/sortable"),a=require("./index94.cjs"),l=require("./index95.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,24 +1,15 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import { Stack as e, theme as o } from "@veeqo/ui";
-import { Notification as n, Pill as c, Glyph as l, Wrap as s, Text as d, Bold as m, Hint as f, Button as h } from "./index84.js";
-const p = o.colors.secondary.blue.base, x = ({ mainEntityLabelPlural: r = "", onClick: a }) => /* @__PURE__ */ t(n, { className: "act-react-listing-custom-notification-new-draft", children: /* @__PURE__ */ t(c, { children: /* @__PURE__ */ i(e, { direction: "horizontal", alignY: "center", children: [
-  /* @__PURE__ */ t(l, { name: "info", color: p }),
-  /* @__PURE__ */ i(s, { children: [
-    /* @__PURE__ */ t(d, { variant: "body", margin: "0 4px 0 0", children: "You are currently in a" }),
-    /* @__PURE__ */ t(m, { variant: "bodyBoldDark", children: "draft view" }),
-    /* @__PURE__ */ t(f, { variant: "hintText", children: `Apply filters and create a custom view of your ${r.toLowerCase()}` })
-  ] }),
-  /* @__PURE__ */ t(
-    h,
-    {
-      className: "act-react-listing-custom-notification-save-draft-btn",
-      variant: "primary",
-      onClick: a,
-      size: "sm",
-      children: "Create view"
-    }
-  )
-] }) }) });
+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 "./index94.js";
+import { DroppableArea as d } from "./index95.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 {
-  x as InfoPill
+  I as ColumnGroup
 };

package/dist/index81.cjs

@@ -1 +1,104 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),n=require("react"),l=require("./index87.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 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 {
+    color: ${e.theme.colors.secondary.blue.base};
+    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;
+  }
+`,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 { jsx as p } from "react/jsx-runtime";
-import { useRef as a, useState as d, useEffect as m } from "react";
-import { AdaptiveStyledContainer as v } from "./index87.js";
-const R = ({
-  children: o,
-  style: s,
-  className: f
-}) => {
-  const r = a(null), [i, c] = d(0);
-  return m(() => {
-    const e = r.current, n = () => {
-      if (e) {
-        const { top: u } = e.getBoundingClientRect();
-        c(u);
+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};
       }
-    };
-    n();
-    const t = new ResizeObserver(n);
-    return e && t.observe(e), () => {
-      e && t.unobserve(e), t.disconnect();
-    };
-  }, []), /* @__PURE__ */ p(v, { style: s, className: f, offset: i, ref: r, children: o });
-};
+    `}
+
+  &:hover {
+    color: ${o.colors.secondary.blue.base};
+    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;
+  }
+`, 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 {
-  R as AdaptiveHeightContainer
+  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 e=r=>r instanceof Error;exports.isError=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("@dnd-kit/core"),D=require("@dnd-kit/sortable"),y=require("./index81.cjs"),S=require("./index96.cjs"),h=require("./index97.cjs"),C=require("./index10.cjs"),b={droppable:{strategy:e.MeasuringStrategy.Always}},p={sideEffects:e.defaultDropAnimationSideEffects({styles:{active:{opacity:"0.5"}}})},q=({items:n,setItems:s,children:a,renderDragOverlay:o})=>{const i=e.useSensors(e.useSensor(e.PointerSensor),e.useSensor(e.KeyboardSensor,{coordinateGetter:D.sortableKeyboardCoordinates})),{activeId:t,handleDragCancel:c,handleDragEnd:l,handleDragOver:d,handleDragStart:u}=S.useDragHandlers({items:n,setItems:s}),{collisionDetectionStrategy:g}=h.useCollisionDetectionStrategy({items:n});return r.jsx(C.ErrorBoundary,{children:r.jsxs(e.DndContext,{sensors:i,measuring:b,collisionDetection:g,onDragStart:u,onDragOver:d,onDragEnd:l,onDragCancel:c,children:[a,r.jsx(y.DndDragOverlayDialog,{open:!0,children:r.jsx(e.DragOverlay,{dropAnimation:p,zIndex:2001,children:t&&o?o(t):null})})]})})};exports.DndContainer=q;

package/dist/index82.js

@@ -1,4 +1,60 @@
-const o = (r) => r instanceof Error;
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { useSensors as p, useSensor as t, PointerSensor as f, KeyboardSensor as u, DndContext as y, MeasuringStrategy as S, DragOverlay as h, defaultDropAnimationSideEffects as C } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as v } from "@dnd-kit/sortable";
+import { DndDragOverlayDialog as x } from "./index81.js";
+import { useDragHandlers as E } from "./index96.js";
+import { useCollisionDetectionStrategy as b } from "./index97.js";
+import { ErrorBoundary as A } from "./index10.js";
+const O = {
+  droppable: {
+    strategy: S.Always
+  }
+}, j = {
+  sideEffects: C({
+    styles: {
+      active: {
+        opacity: "0.5"
+      }
+    }
+  })
+}, M = ({
+  items: o,
+  setItems: a,
+  children: i,
+  renderDragOverlay: e
+}) => {
+  const s = p(
+    t(f),
+    t(u, {
+      coordinateGetter: v
+    })
+  ), { activeId: n, handleDragCancel: l, handleDragEnd: d, handleDragOver: c, handleDragStart: D } = E({ items: o, setItems: a }), { collisionDetectionStrategy: g } = b({
+    items: o
+  });
+  return /* @__PURE__ */ r(A, { children: /* @__PURE__ */ m(
+    y,
+    {
+      sensors: s,
+      measuring: O,
+      collisionDetection: g,
+      onDragStart: D,
+      onDragOver: c,
+      onDragEnd: d,
+      onDragCancel: l,
+      children: [
+        i,
+        /* @__PURE__ */ r(x, { open: !0, children: /* @__PURE__ */ r(
+          h,
+          {
+            dropAnimation: j,
+            zIndex: 2001,
+            children: n && e ? e(n) : null
+          }
+        ) })
+      ]
+    }
+  ) });
+};
 export {
-  o as isError
+  M as DndContainer
 };

package/dist/index83.cjs

@@ -1,13 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@veeqo/components"),o=require("@veeqo/ui"),s=require("styled-components"),l=e=>e&&e.__esModule?e:{default:e},r=l(s),{SortableViews:i}=t.VeeqoUI,n=r.default(i)`
-  .rst__rowTitle {
-    span {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .rst__rowTitle > div:first-child {
-    gap: ${o.theme.sizes.sm};
-  }
-`;exports.StyledSortableViews=n;
+"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;

package/dist/index83.js

@@ -1,19 +1,31 @@
-import { VeeqoUI as e } from "@veeqo/components";
-import { theme as o } from "@veeqo/ui";
-import t from "styled-components";
-const { SortableViews: r } = e, p = t(r)`
-  .rst__rowTitle {
-    span {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { Stack as d, Text as a } from "@veeqo/ui";
+import { VeeqoCommon as l } from "@veeqo/components";
+import { ColumnItemWrapper as m, DetailedText as c, VisibilityOffIcon as p } from "./index81.js";
+const { Glyph: s } = l, g = ({ column: t, isHidden: r, isDragOverlay: o }) => {
+  const n = t.title || t.tooltip;
+  return /* @__PURE__ */ e(
+    m,
+    {
+      direction: "horizontal",
+      spacing: "sm",
+      alignY: "center",
+      isHidden: r,
+      isDragOverlay: o,
+      children: [
+        /* @__PURE__ */ i(s, { name: "drag-indicator", size: 4 }),
+        t.detailed ? /* @__PURE__ */ e(d, { spacing: "xs", children: [
+          /* @__PURE__ */ e(a, { variant: "body", children: [
+            n,
+            " (detailed)"
+          ] }),
+          /* @__PURE__ */ i(c, { variant: "hintText", children: t.detailed })
+        ] }) : /* @__PURE__ */ i(a, { variant: "body", children: n }),
+        !o && r && /* @__PURE__ */ i(p, { size: 4 })
+      ]
     }
-  }
-
-  .rst__rowTitle > div:first-child {
-    gap: ${o.sizes.sm};
-  }
-`;
+  );
+};
 export {
-  p as StyledSortableViews
+  g as ColumnItem
 };