@veeqo/transfigure 0.0.5 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/dist/hooks/useHiddenColumns/useHiddenColumns.d.ts +5 -1
  2. package/dist/index100.cjs +13 -1
  3. package/dist/index100.js +16 -63
  4. package/dist/index101.cjs +1 -1
  5. package/dist/index101.js +36 -30
  6. package/dist/index102.cjs +1 -7
  7. package/dist/index102.js +42 -10
  8. package/dist/index103.cjs +7 -1
  9. package/dist/index103.js +10 -42
  10. package/dist/index20.cjs +1 -1
  11. package/dist/index20.js +1 -1
  12. package/dist/index28.cjs +1 -1
  13. package/dist/index28.js +1 -1
  14. package/dist/index31.cjs +1 -1
  15. package/dist/index31.js +1 -1
  16. package/dist/index33.cjs +1 -1
  17. package/dist/index33.js +1 -1
  18. package/dist/index36.cjs +1 -1
  19. package/dist/index36.js +1 -1
  20. package/dist/index37.cjs +1 -1
  21. package/dist/index37.js +1 -1
  22. package/dist/index38.cjs +1 -1
  23. package/dist/index38.js +1 -1
  24. package/dist/index39.cjs +1 -1
  25. package/dist/index39.js +1 -1
  26. package/dist/index41.cjs +1 -1
  27. package/dist/index41.js +1 -1
  28. package/dist/index61.cjs +1 -1
  29. package/dist/index61.js +24 -13
  30. package/dist/index77.cjs +1 -1
  31. package/dist/index77.js +7 -7
  32. package/dist/index79.cjs +80 -1
  33. package/dist/index79.js +95 -24
  34. package/dist/index80.cjs +1 -1
  35. package/dist/index80.js +13 -29
  36. package/dist/index81.cjs +100 -15
  37. package/dist/index81.js +115 -19
  38. package/dist/index82.cjs +1 -1
  39. package/dist/index82.js +56 -20
  40. package/dist/index83.cjs +1 -1
  41. package/dist/index83.js +28 -14
  42. package/dist/index84.cjs +1 -80
  43. package/dist/index84.js +2 -95
  44. package/dist/index85.cjs +1 -1
  45. package/dist/index85.js +34 -13
  46. package/dist/index86.cjs +1 -104
  47. package/dist/index86.js +8 -120
  48. package/dist/index87.cjs +1 -1
  49. package/dist/index87.js +28 -57
  50. package/dist/index88.cjs +1 -1
  51. package/dist/index88.js +20 -27
  52. package/dist/index89.cjs +19 -1
  53. package/dist/index89.js +24 -2
  54. package/dist/index90.cjs +12 -1
  55. package/dist/index90.js +16 -34
  56. package/dist/index91.cjs +1 -1
  57. package/dist/index91.js +15 -8
  58. package/dist/index92.cjs +1 -12
  59. package/dist/index92.js +24 -16
  60. package/dist/index94.cjs +1 -1
  61. package/dist/index94.js +19 -63
  62. package/dist/index95.cjs +1 -1
  63. package/dist/index95.js +8 -36
  64. package/dist/index96.cjs +1 -80
  65. package/dist/index96.js +64 -95
  66. package/dist/index97.cjs +1 -13
  67. package/dist/index97.js +30 -17
  68. package/dist/index98.cjs +1 -1
  69. package/dist/index98.js +63 -19
  70. package/dist/index99.cjs +80 -1
  71. package/dist/index99.js +95 -8
  72. package/package.json +1 -1
package/dist/index79.cjs CHANGED
@@ -1 +1,80 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),n=require("react"),l=require("./index102.cjs"),v=({children:i,style:o,className:c})=>{const r=n.useRef(null),[u,f]=n.useState(0);return n.useEffect(()=>{const e=r.current,s=()=>{if(e){const{top:a}=e.getBoundingClientRect();f(a)}};s();const t=new ResizeObserver(s);return e&&t.observe(e),()=>{e&&t.unobserve(e),t.disconnect()}},[]),d.jsx(l.AdaptiveStyledContainer,{style:o,className:c,offset:u,ref:r,children:i})};exports.AdaptiveHeightContainer=v;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),e=require("@veeqo/ui"),a=require("@veeqo/components"),r=t=>t&&t.__esModule?t:{default:t},o=r(i),{Glyph:l}=a.VeeqoCommon,s=o.default(e.BaseContainer)`
2
+ display: flex;
3
+ position: fixed;
4
+ width: 100vw;
5
+ left: 0;
6
+ bottom: 24px;
7
+ z-index: 18;
8
+
9
+ &.notification-enter {
10
+ opacity: 0;
11
+ transform: translateY(-16px);
12
+ }
13
+
14
+ &.notification-enter-active {
15
+ opacity: 1;
16
+ transform: translateY(0);
17
+ transition: 350ms ease;
18
+ }
19
+
20
+ &.notification-exit {
21
+ opacity: 0;
22
+ transform: translateY(16px);
23
+ transition: 350ms ease;
24
+ }
25
+ pointer-events: none;
26
+ `,c=o.default(e.BaseContainer)`
27
+ display: inline-flex;
28
+ flex-direction: row;
29
+ align-items: center;
30
+ padding: 20px 24px 24px 24px;
31
+ border-radius: 4px;
32
+ margin: 0 auto;
33
+ background-color: #fff;
34
+ box-shadow: ${e.theme.shadows.lg};
35
+ pointer-events: all;
36
+ `;o.default(e.Banner)`
37
+ display: inline-flex;
38
+ flex-direction: row;
39
+ align-items: center;
40
+ margin: 0 auto;
41
+ background-color: #fff;
42
+ box-shadow: ${e.theme.shadows.lg};
43
+ pointer-events: all;
44
+ `;const d=o.default(e.Button)`
45
+ margin-right: 16px;
46
+ `;o.default(e.Text)`
47
+ line-height: 20px;
48
+ `;const n=o.default(e.Text)`
49
+ margin: ${t=>t.margin?t.margin:""};
50
+ color: ${t=>t.color};
51
+ `,f=o.default(e.Text)`
52
+ margin-right: 8px;
53
+ color: ${t=>t.color};
54
+ `,p=o.default(l)``,x=o.default(e.BaseContainer)`
55
+ display: flex;
56
+ flex-direction: row;
57
+ align-items: flex-end;
58
+ flex-grow: 2;
59
+ margin-left: 24px;
60
+ margin-right: 24px;
61
+ `,u=o.default.button`
62
+ display: flex;
63
+ flex-direction: row;
64
+ width: 100%;
65
+ padding: 12px 16px;
66
+ cursor: pointer;
67
+
68
+ & > ${n} {
69
+ white-space: nowrap;
70
+ user-select: none;
71
+ }
72
+
73
+ &:hover {
74
+ background-color: ${e.theme.colors.neutral.grey.lightest};
75
+ }
76
+
77
+ &:hover > ${n} {
78
+ color: ${e.theme.colors.secondary.blue.base};
79
+ }
80
+ `;exports.Bold=f;exports.Button=d;exports.Container=c;exports.Glyph=p;exports.Item=u;exports.Notification=s;exports.Text=n;exports.Wrap=x;
package/dist/index79.js CHANGED
@@ -1,26 +1,97 @@
1
- import { jsx as p } from "react/jsx-runtime";
2
- import { useRef as a, useState as d, useEffect as m } from "react";
3
- import { AdaptiveStyledContainer as v } from "./index102.js";
4
- const R = ({
5
- children: o,
6
- style: s,
7
- className: f
8
- }) => {
9
- const r = a(null), [i, c] = d(0);
10
- return m(() => {
11
- const e = r.current, n = () => {
12
- if (e) {
13
- const { top: u } = e.getBoundingClientRect();
14
- c(u);
15
- }
16
- };
17
- n();
18
- const t = new ResizeObserver(n);
19
- return e && t.observe(e), () => {
20
- e && t.unobserve(e), t.disconnect();
21
- };
22
- }, []), /* @__PURE__ */ p(v, { style: s, className: f, offset: i, ref: r, children: o });
23
- };
1
+ import o from "styled-components";
2
+ import { BaseContainer as n, theme as e, Text as i, Button as a, Banner as l } from "@veeqo/ui";
3
+ import { VeeqoCommon as s } from "@veeqo/components";
4
+ const { Glyph: c } = s, f = o(n)`
5
+ display: flex;
6
+ position: fixed;
7
+ width: 100vw;
8
+ left: 0;
9
+ bottom: 24px;
10
+ z-index: 18;
11
+
12
+ &.notification-enter {
13
+ opacity: 0;
14
+ transform: translateY(-16px);
15
+ }
16
+
17
+ &.notification-enter-active {
18
+ opacity: 1;
19
+ transform: translateY(0);
20
+ transition: 350ms ease;
21
+ }
22
+
23
+ &.notification-exit {
24
+ opacity: 0;
25
+ transform: translateY(16px);
26
+ transition: 350ms ease;
27
+ }
28
+ pointer-events: none;
29
+ `, m = o(n)`
30
+ display: inline-flex;
31
+ flex-direction: row;
32
+ align-items: center;
33
+ padding: 20px 24px 24px 24px;
34
+ border-radius: 4px;
35
+ margin: 0 auto;
36
+ background-color: #fff;
37
+ box-shadow: ${e.shadows.lg};
38
+ pointer-events: all;
39
+ `;
40
+ o(l)`
41
+ display: inline-flex;
42
+ flex-direction: row;
43
+ align-items: center;
44
+ margin: 0 auto;
45
+ background-color: #fff;
46
+ box-shadow: ${e.shadows.lg};
47
+ pointer-events: all;
48
+ `;
49
+ const g = o(a)`
50
+ margin-right: 16px;
51
+ `;
52
+ o(i)`
53
+ line-height: 20px;
54
+ `;
55
+ const r = o(i)`
56
+ margin: ${(t) => t.margin ? t.margin : ""};
57
+ color: ${(t) => t.color};
58
+ `, h = o(i)`
59
+ margin-right: 8px;
60
+ color: ${(t) => t.color};
61
+ `, u = o(c)``, w = o(n)`
62
+ display: flex;
63
+ flex-direction: row;
64
+ align-items: flex-end;
65
+ flex-grow: 2;
66
+ margin-left: 24px;
67
+ margin-right: 24px;
68
+ `, y = o.button`
69
+ display: flex;
70
+ flex-direction: row;
71
+ width: 100%;
72
+ padding: 12px 16px;
73
+ cursor: pointer;
74
+
75
+ & > ${r} {
76
+ white-space: nowrap;
77
+ user-select: none;
78
+ }
79
+
80
+ &:hover {
81
+ background-color: ${e.colors.neutral.grey.lightest};
82
+ }
83
+
84
+ &:hover > ${r} {
85
+ color: ${e.colors.secondary.blue.base};
86
+ }
87
+ `;
24
88
  export {
25
- R as AdaptiveHeightContainer
89
+ h as Bold,
90
+ g as Button,
91
+ m as Container,
92
+ u as Glyph,
93
+ y as Item,
94
+ f as Notification,
95
+ r as Text,
96
+ w as Wrap
26
97
  };
package/dist/index80.cjs CHANGED
@@ -1 +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;
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("./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 CHANGED
@@ -1,31 +1,15 @@
1
- import { jsx as e } from "react/jsx-runtime";
2
- import { Modal as n, Text as r } from "@veeqo/ui";
3
- const s = ({ shouldShow: a, viewName: i, onCancel: t, onDelete: o }) => /* @__PURE__ */ e(
4
- n,
5
- {
6
- headerTitle: `Delete '${i}' view?`,
7
- "data-testid": "act-react-listing-custom-confirmation-popup",
8
- variant: "sm",
9
- shouldShow: a,
10
- onClose: t,
11
- rightActions: [
12
- {
13
- className: "act-react-listing-custom-confirmation-popup-cancel",
14
- label: "Cancel",
15
- onClick: t,
16
- variant: "default"
17
- },
18
- {
19
- className: "act-react-listing-custom-confirmation-popup-delete",
20
- label: "Delete",
21
- onClick: o,
22
- variant: "primaryDestructive"
23
- }
24
- ],
25
- showHeaderCloseButton: !0,
26
- children: /* @__PURE__ */ e(r, { variant: "body", children: "This cannot be undone." })
27
- }
28
- );
1
+ import { jsxs as m, jsx as r } from "react/jsx-runtime";
2
+ import { Stack as n } from "@veeqo/ui";
3
+ import { SortableContext as p, verticalListSortingStrategy as a } from "@dnd-kit/sortable";
4
+ import { SortableItem as s } from "./index94.js";
5
+ import { DroppableArea as d } from "./index95.js";
6
+ import { ColumnItem as l } from "./index83.js";
7
+ import { ColumnGroupIds as c } from "./index84.js";
8
+ import { StickyText as f } from "./index81.js";
9
+ const I = ({ id: t, title: e, columns: o }) => /* @__PURE__ */ m(n, { spacing: "sm", alignX: "stretch", children: [
10
+ /* @__PURE__ */ r(f, { variant: "bodyBold", children: e }),
11
+ /* @__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)) }) })
12
+ ] });
29
13
  export {
30
- s as Confirmation
14
+ I as ColumnGroup
31
15
  };
package/dist/index81.cjs CHANGED
@@ -1,19 +1,104 @@
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"}))`
2
- margin: ${e.theme.sizes.xs};
3
- min-width: 180px;
4
- justify-content: flex-start;
5
- font-size: ${e.theme.text.body.fontSize};
1
+ "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`
2
+ width: 1px;
3
+ position: absolute;
4
+ left: 50%;
5
+ transform: translateX(-50%);
6
+ border-left: 1px solid ${e.theme.colors.neutral.grey.dark};
7
+ height: 100%;
8
+ margin-top: 40px;
9
+ `,c=t.default(e.Text)`
10
+ writing-mode: vertical-rl;
11
+ position: absolute;
12
+ top: 50%;
13
+ left: 50%;
14
+ transform: translate(-50%, -50%);
15
+ background: white;
16
+ padding: 30px 0;
17
+ text-align: center;
18
+ font-size: 10px;
19
+ color: ${e.theme.colors.neutral.ink.lightest};
20
+ height: max-content;
21
+ `,d=t.default(e.Text)`
22
+ position: sticky;
23
+ top: 0;
24
+ background: #ffffff;
25
+ padding-bottom: ${e.theme.sizes[2]};
26
+ z-index: 1;
27
+ `,u=t.default(e.Text)`
28
+ color: ${e.theme.colors.neutral.ink.light};
29
+ `,g=t.default(e.Grid)`
30
+ // overflow-y: auto;
31
+ position: unset;
32
+ `,r=t.default(n).attrs(()=>({name:"visibility-off"}))`
33
+ margin-left: auto;
34
+ `,p=t.default(e.Stack)`
35
+ border-radius: 4px;
36
+ padding: 8px 12px;
37
+ background: #ffffff;
38
+ border: 1px solid ${e.theme.colors.neutral.ink.lightest};
39
+ transition: all ease 200ms;
40
+
41
+ ${({isHidden:o})=>o&&`
42
+ ${e.Text} {
43
+ color: ${e.theme.colors.neutral.ink.light};
44
+ }
45
+ `}
6
46
 
7
47
  &:hover {
8
- background-color: ${e.theme.colors.neutral.grey.lightest};
9
48
  color: ${e.theme.colors.secondary.blue.base};
10
- cursor: pointer;
49
+ background: ${e.theme.colors.neutral.grey.lightest};
50
+ border: 1px solid ${e.theme.colors.neutral.grey.light};
51
+
52
+ ${e.Text} {
53
+ color: ${e.theme.colors.secondary.blue.base};
54
+ }
55
+
56
+ ${r} {
57
+ color: ${e.theme.colors.neutral.ink.light};
58
+ }
59
+ }
60
+
61
+ ${({isDragOverlay:o})=>o&&`
62
+ color: ${e.theme.colors.secondary.blue.base};
63
+ background: ${e.theme.colors.neutral.grey.lightest};
64
+ border: 1px solid ${e.theme.colors.neutral.grey.light};
65
+ cursor: grabbing;
66
+
67
+ ${e.Text} {
68
+ color: ${e.theme.colors.secondary.blue.base};
69
+ }
70
+ `}
71
+ `,h=t.default.div`
72
+ position: absolute;
73
+ top: 0;
74
+ left: 0;
75
+ right: 0;
76
+ bottom: 0;
77
+ height: 100%;
78
+ width: calc(100% - 2px);
79
+ border-radius: 4px;
80
+ border: 1px dashed ${e.theme.colors.neutral.grey.dark};
81
+ background: ${e.theme.colors.neutral.grey.lightest};
82
+ `,f=t.default(e.Stack)`
83
+ flex: 1;
84
+ padding: 0;
85
+ `,m=t.default(e.Search)`
86
+ input {
87
+ height: 40px;
88
+ box-sizing: border-box;
89
+ }
90
+
91
+ svg {
92
+ width: 16px;
11
93
  }
12
- `,n=o.default(e.Card.Surface).attrs(()=>({role:"listbox",elevation:4}))`
13
- margin-top: ${e.theme.sizes.xs};
14
- background-color: white;
15
- `,l=o.default.hr`
16
- width: 100%;
17
- border-top: 1px solid ${e.theme.colors.neutral.grey.dark};
18
- margin: 0;
19
- `;exports.Divider=l;exports.Item=i;exports.MenuItems=n;
94
+ `,b=t.default.div`
95
+ position: relative;
96
+ min-height: 500px;
97
+ `,x=t.default(e.BaseContainer)`
98
+ display: flex;
99
+ flex-direction: column;
100
+ gap: ${e.theme.sizes.base};
101
+ padding: ${e.theme.sizes.md};
102
+ `,y=t.default.dialog`
103
+ display: contents;
104
+ `;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 CHANGED
@@ -1,26 +1,122 @@
1
- import t from "styled-components";
2
- import { theme as o, Card as r, Button as e } from "@veeqo/ui";
3
- const n = t(e).attrs(() => ({ role: "option", variant: "flat" }))`
4
- margin: ${o.sizes.xs};
5
- min-width: 180px;
6
- justify-content: flex-start;
7
- font-size: ${o.text.body.fontSize};
1
+ import r from "styled-components";
2
+ import { Grid as l, theme as o, Text as t, BaseContainer as n, Search as s, Stack as i } from "@veeqo/ui";
3
+ import { VeeqoCommon as a } from "@veeqo/components";
4
+ const { Glyph: c } = a, b = r.div`
5
+ width: 1px;
6
+ position: absolute;
7
+ left: 50%;
8
+ transform: translateX(-50%);
9
+ border-left: 1px solid ${o.colors.neutral.grey.dark};
10
+ height: 100%;
11
+ margin-top: 40px;
12
+ `, f = r(t)`
13
+ writing-mode: vertical-rl;
14
+ position: absolute;
15
+ top: 50%;
16
+ left: 50%;
17
+ transform: translate(-50%, -50%);
18
+ background: white;
19
+ padding: 30px 0;
20
+ text-align: center;
21
+ font-size: 10px;
22
+ color: ${o.colors.neutral.ink.lightest};
23
+ height: max-content;
24
+ `, h = r(t)`
25
+ position: sticky;
26
+ top: 0;
27
+ background: #ffffff;
28
+ padding-bottom: ${o.sizes[2]};
29
+ z-index: 1;
30
+ `, x = r(t)`
31
+ color: ${o.colors.neutral.ink.light};
32
+ `, m = r(l)`
33
+ // overflow-y: auto;
34
+ position: unset;
35
+ `, d = r(c).attrs(() => ({ name: "visibility-off" }))`
36
+ margin-left: auto;
37
+ `, $ = r(i)`
38
+ border-radius: 4px;
39
+ padding: 8px 12px;
40
+ background: #ffffff;
41
+ border: 1px solid ${o.colors.neutral.ink.lightest};
42
+ transition: all ease 200ms;
43
+
44
+ ${({ isHidden: e }) => e && `
45
+ ${t} {
46
+ color: ${o.colors.neutral.ink.light};
47
+ }
48
+ `}
8
49
 
9
50
  &:hover {
10
- background-color: ${o.colors.neutral.grey.lightest};
11
51
  color: ${o.colors.secondary.blue.base};
12
- cursor: pointer;
52
+ background: ${o.colors.neutral.grey.lightest};
53
+ border: 1px solid ${o.colors.neutral.grey.light};
54
+
55
+ ${t} {
56
+ color: ${o.colors.secondary.blue.base};
57
+ }
58
+
59
+ ${d} {
60
+ color: ${o.colors.neutral.ink.light};
61
+ }
62
+ }
63
+
64
+ ${({ isDragOverlay: e }) => e && `
65
+ color: ${o.colors.secondary.blue.base};
66
+ background: ${o.colors.neutral.grey.lightest};
67
+ border: 1px solid ${o.colors.neutral.grey.light};
68
+ cursor: grabbing;
69
+
70
+ ${t} {
71
+ color: ${o.colors.secondary.blue.base};
72
+ }
73
+ `}
74
+ `, y = r.div`
75
+ position: absolute;
76
+ top: 0;
77
+ left: 0;
78
+ right: 0;
79
+ bottom: 0;
80
+ height: 100%;
81
+ width: calc(100% - 2px);
82
+ border-radius: 4px;
83
+ border: 1px dashed ${o.colors.neutral.grey.dark};
84
+ background: ${o.colors.neutral.grey.lightest};
85
+ `, k = r(i)`
86
+ flex: 1;
87
+ padding: 0;
88
+ `, v = r(s)`
89
+ input {
90
+ height: 40px;
91
+ box-sizing: border-box;
92
+ }
93
+
94
+ svg {
95
+ width: 16px;
13
96
  }
14
- `, a = t(r.Surface).attrs(() => ({ role: "listbox", elevation: 4 }))`
15
- margin-top: ${o.sizes.xs};
16
- background-color: white;
17
- `, l = t.hr`
18
- width: 100%;
19
- border-top: 1px solid ${o.colors.neutral.grey.dark};
20
- margin: 0;
97
+ `, C = r.div`
98
+ position: relative;
99
+ min-height: 500px;
100
+ `, w = r(n)`
101
+ display: flex;
102
+ flex-direction: column;
103
+ gap: ${o.sizes.base};
104
+ padding: ${o.sizes.md};
105
+ `, z = r.dialog`
106
+ display: contents;
21
107
  `;
22
108
  export {
23
- l as Divider,
24
- n as Item,
25
- a as MenuItems
109
+ m as ColumnGroupsGrid,
110
+ $ as ColumnItemWrapper,
111
+ v as ColumnSearch,
112
+ C as Container,
113
+ x as DetailedText,
114
+ z as DndDragOverlayDialog,
115
+ y as DraggingOverlay,
116
+ k as DroppableAreaStack,
117
+ w as HeaderContainer,
118
+ h as StickyText,
119
+ b as VerticalSeparator,
120
+ f as VerticalText,
121
+ d as VisibilityOffIcon
26
122
  };
package/dist/index82.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@veeqo/ui"),t=require("./index96.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;
1
+ "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 CHANGED
@@ -1,24 +1,60 @@
1
- import { jsx as t, jsxs as i } from "react/jsx-runtime";
2
- import { Stack as e, theme as o } from "@veeqo/ui";
3
- 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 "./index96.js";
4
- 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: [
5
- /* @__PURE__ */ t(l, { name: "info", color: p }),
6
- /* @__PURE__ */ i(s, { children: [
7
- /* @__PURE__ */ t(d, { variant: "body", margin: "0 4px 0 0", children: "You are currently in a" }),
8
- /* @__PURE__ */ t(m, { variant: "bodyBoldDark", children: "draft view" }),
9
- /* @__PURE__ */ t(f, { variant: "hintText", children: `Apply filters and create a custom view of your ${r.toLowerCase()}` })
10
- ] }),
11
- /* @__PURE__ */ t(
12
- h,
1
+ import { jsx as r, jsxs as m } from "react/jsx-runtime";
2
+ 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";
3
+ import { sortableKeyboardCoordinates as v } from "@dnd-kit/sortable";
4
+ import { DndDragOverlayDialog as x } from "./index81.js";
5
+ import { useDragHandlers as E } from "./index96.js";
6
+ import { useCollisionDetectionStrategy as b } from "./index97.js";
7
+ import { ErrorBoundary as A } from "./index10.js";
8
+ const O = {
9
+ droppable: {
10
+ strategy: S.Always
11
+ }
12
+ }, j = {
13
+ sideEffects: C({
14
+ styles: {
15
+ active: {
16
+ opacity: "0.5"
17
+ }
18
+ }
19
+ })
20
+ }, M = ({
21
+ items: o,
22
+ setItems: a,
23
+ children: i,
24
+ renderDragOverlay: e
25
+ }) => {
26
+ const s = p(
27
+ t(f),
28
+ t(u, {
29
+ coordinateGetter: v
30
+ })
31
+ ), { activeId: n, handleDragCancel: l, handleDragEnd: d, handleDragOver: c, handleDragStart: D } = E({ items: o, setItems: a }), { collisionDetectionStrategy: g } = b({
32
+ items: o
33
+ });
34
+ return /* @__PURE__ */ r(A, { children: /* @__PURE__ */ m(
35
+ y,
13
36
  {
14
- className: "act-react-listing-custom-notification-save-draft-btn",
15
- variant: "primary",
16
- onClick: a,
17
- size: "sm",
18
- children: "Create view"
37
+ sensors: s,
38
+ measuring: O,
39
+ collisionDetection: g,
40
+ onDragStart: D,
41
+ onDragOver: c,
42
+ onDragEnd: d,
43
+ onDragCancel: l,
44
+ children: [
45
+ i,
46
+ /* @__PURE__ */ r(x, { open: !0, children: /* @__PURE__ */ r(
47
+ h,
48
+ {
49
+ dropAnimation: j,
50
+ zIndex: 2001,
51
+ children: n && e ? e(n) : null
52
+ }
53
+ ) })
54
+ ]
19
55
  }
20
- )
21
- ] }) }) });
56
+ ) });
57
+ };
22
58
  export {
23
- x as InfoPill
59
+ M as DndContainer
24
60
  };
package/dist/index83.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),l=require("./index97.cjs"),o=e=>i.jsx(l.StyledSortableViews,{...e,onChange:t=>{t.filter(r=>{var n;return(n=r.children)==null?void 0:n.length}).length||e.onChange(t)}});exports.LegacySortableViews=o;
1
+ "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 CHANGED
@@ -1,17 +1,31 @@
1
- import { jsx as o } from "react/jsx-runtime";
2
- import { StyledSortableViews as i } from "./index97.js";
3
- const h = (e) => /* @__PURE__ */ o(
4
- i,
5
- {
6
- ...e,
7
- onChange: (t) => {
8
- t.filter((n) => {
9
- var r;
10
- return (r = n.children) == null ? void 0 : r.length;
11
- }).length || e.onChange(t);
1
+ import { jsxs as e, jsx as i } from "react/jsx-runtime";
2
+ import { Stack as d, Text as a } from "@veeqo/ui";
3
+ import { VeeqoCommon as l } from "@veeqo/components";
4
+ import { ColumnItemWrapper as m, DetailedText as c, VisibilityOffIcon as p } from "./index81.js";
5
+ const { Glyph: s } = l, g = ({ column: t, isHidden: r, isDragOverlay: o }) => {
6
+ const n = t.title || t.tooltip;
7
+ return /* @__PURE__ */ e(
8
+ m,
9
+ {
10
+ direction: "horizontal",
11
+ spacing: "sm",
12
+ alignY: "center",
13
+ isHidden: r,
14
+ isDragOverlay: o,
15
+ children: [
16
+ /* @__PURE__ */ i(s, { name: "drag-indicator", size: 4 }),
17
+ t.detailed ? /* @__PURE__ */ e(d, { spacing: "xs", children: [
18
+ /* @__PURE__ */ e(a, { variant: "body", children: [
19
+ n,
20
+ " (detailed)"
21
+ ] }),
22
+ /* @__PURE__ */ i(c, { variant: "hintText", children: t.detailed })
23
+ ] }) : /* @__PURE__ */ i(a, { variant: "body", children: n }),
24
+ !o && r && /* @__PURE__ */ i(p, { size: 4 })
25
+ ]
12
26
  }
13
- }
14
- );
27
+ );
28
+ };
15
29
  export {
16
- h as LegacySortableViews
30
+ g as ColumnItem
17
31
  };