@veeqo/transfigure 1.2.1 → 1.2.3

package/dist/index89.cjs

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

package/dist/index89.js

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

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"),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/index90.js

@@ -1,7 +1,21 @@
-const e = "_actionsHeaderContainer_fgqms_1", a = {
-  actionsHeaderContainer: e
-};
+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 {
-  e as actionsHeaderContainer,
-  a as default
+  Z as TableManagementGlyph
 };

package/dist/index98.cjs

@@ -1,19 +1 @@
-"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};
-
-  &:hover {
-    background-color: ${e.theme.colors.neutral.grey.lightest};
-    color: ${e.theme.colors.secondary.blue.base};
-    cursor: pointer;
-  }
-`,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;
+"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/index98.js

@@ -1,26 +1,9 @@
-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};
-
-  &:hover {
-    background-color: ${o.colors.neutral.grey.lightest};
-    color: ${o.colors.secondary.blue.base};
-    cursor: pointer;
-  }
-`, 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;
-`;
+import { createAllView as i } from "./index79.js";
+const e = i(), s = {
+  fixedViews: [e],
+  customViews: [],
+  viewsMap: /* @__PURE__ */ new Map([[e.id, e]])
+};
 export {
-  l as Divider,
-  n as Item,
-  a as MenuItems
+  s as INITIAL_VIEWS_STATE
 };

package/dist/index99.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@veeqo/ui"),i=require("./index106.cjs"),n=r.theme.colors.secondary.blue.base,a=({onClick:t})=>e.jsx(i.Notification,{children:e.jsx(i.Pill,{children:e.jsxs(r.Stack,{direction:"horizontal",alignY:"center",children:[e.jsx(i.Glyph,{ariaLabel:"info",name:"info",color:n}),e.jsxs(i.Wrap,{children:[e.jsx(i.Text,{variant:"body",margin:"0 4px 0 0",children:"You are currently in a"}),e.jsx(i.Bold,{variant:"bodyBoldDark",children:"draft view"}),e.jsx(i.Hint,{variant:"hintText",children:"Apply filters and save these by creating a custom view"})]}),e.jsx(i.Button,{variant:"primary",onClick:t,size:"sm",children:"Create view"})]})})});exports.DraftPill=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),n=require("react"),l=require("./index116.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/index99.js

@@ -1,23 +1,26 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Stack as a, theme as n } from "@veeqo/ui";
-import { Notification as t, Pill as o, Glyph as l, Wrap as c, Text as d, Bold as s, Hint as h, Button as m } from "./index106.js";
-const p = n.colors.secondary.blue.base, b = ({ onClick: e }) => /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(o, { children: /* @__PURE__ */ i(a, { direction: "horizontal", alignY: "center", children: [
-  /* @__PURE__ */ r(l, { ariaLabel: "info", name: "info", color: p }),
-  /* @__PURE__ */ i(c, { children: [
-    /* @__PURE__ */ r(d, { variant: "body", margin: "0 4px 0 0", children: "You are currently in a" }),
-    /* @__PURE__ */ r(s, { variant: "bodyBoldDark", children: "draft view" }),
-    /* @__PURE__ */ r(h, { variant: "hintText", children: "Apply filters and save these by creating a custom view" })
-  ] }),
-  /* @__PURE__ */ r(
-    m,
-    {
-      variant: "primary",
-      onClick: e,
-      size: "sm",
-      children: "Create view"
-    }
-  )
-] }) }) });
+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 "./index116.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);
+      }
+    };
+    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 });
+};
 export {
-  b as DraftPill
+  R as AdaptiveHeightContainer
 };

package/dist/storybookHelpers/Code.d.ts

@@ -0,0 +1,3 @@
+export declare const Code: ({ text }: {
+    text: string;
+}) => JSX.Element;

package/package.json

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