@veeqo/transfigure 0.0.10 → 0.0.11

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.
package/dist/index87.js CHANGED
@@ -1,31 +1,26 @@
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"
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);
23
15
  }
24
- ],
25
- showHeaderCloseButton: !0,
26
- children: /* @__PURE__ */ e(r, { variant: "body", children: "This cannot be undone." })
27
- }
28
- );
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
+ };
29
24
  export {
30
- s as Confirmation
25
+ R as AdaptiveHeightContainer
31
26
  };
package/dist/index91.cjs CHANGED
@@ -1,12 +1,80 @@
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)`
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
2
  display: flex;
3
- flex-direction: column;
4
- padding: 8px;
5
- padding-left: 35px;
6
- margin: 8px;
7
- background-color: ${t.theme.colors.neutral.grey.lightest};
8
- `,l=r.default.hr`
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;
9
64
  width: 100%;
10
- border-top: 1px solid ${t.theme.colors.neutral.grey.dark};
11
- margin: 0 0 4px 0;
12
- `;exports.Divider=l;exports.FixedViews=d;
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/index91.js CHANGED
@@ -1,18 +1,97 @@
1
- import r from "styled-components";
2
- import { theme as o, BaseContainer as e } from "@veeqo/ui";
3
- const d = r(e)`
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)`
4
5
  display: flex;
5
- flex-direction: column;
6
- padding: 8px;
7
- padding-left: 35px;
8
- margin: 8px;
9
- background-color: ${o.colors.neutral.grey.lightest};
10
- `, l = r.hr`
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;
11
71
  width: 100%;
12
- border-top: 1px solid ${o.colors.neutral.grey.dark};
13
- margin: 0 0 4px 0;
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
+ }
14
87
  `;
15
88
  export {
16
- l as Divider,
17
- d as FixedViews
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
18
97
  };
package/dist/index92.cjs CHANGED
@@ -1,80 +1,12 @@
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)`
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)`
2
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;
3
+ flex-direction: column;
4
+ padding: 8px;
5
+ padding-left: 35px;
6
+ margin: 8px;
7
+ background-color: ${t.theme.colors.neutral.grey.lightest};
8
+ `,l=r.default.hr`
64
9
  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;
10
+ border-top: 1px solid ${t.theme.colors.neutral.grey.dark};
11
+ margin: 0 0 4px 0;
12
+ `;exports.Divider=l;exports.FixedViews=d;
package/dist/index92.js CHANGED
@@ -1,97 +1,18 @@
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)`
1
+ import r from "styled-components";
2
+ import { theme as o, BaseContainer as e } from "@veeqo/ui";
3
+ const d = r(e)`
5
4
  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;
5
+ flex-direction: column;
6
+ padding: 8px;
7
+ padding-left: 35px;
8
+ margin: 8px;
9
+ background-color: ${o.colors.neutral.grey.lightest};
10
+ `, l = r.hr`
71
11
  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
- }
12
+ border-top: 1px solid ${o.colors.neutral.grey.dark};
13
+ margin: 0 0 4px 0;
87
14
  `;
88
15
  export {
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
16
+ l as Divider,
17
+ d as FixedViews
97
18
  };
package/dist/index94.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@dnd-kit/sortable"),g=require("./index102.cjs"),b=require("./index80.cjs"),f=({id:t,children:r})=>{const{attributes:s,listeners:o,setNodeRef:i,transform:n,transition:a,isDragging:l}=c.useSortable({id:t}),u={transform:g.CSS.Transform.toString(n),transition:a,cursor:"grab",outlineOffset:"-1px"};return e.jsxs("div",{ref:i,style:u,...s,...o,children:[r,l&&e.jsx(b.DraggingOverlay,{})]})};exports.SortableItem=f;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("mobx-react"),l=require("@veeqo/ui"),v=require("./index99.cjs"),y=p.observer(({data:m,editedValue:t,setEditedValue:c})=>{var b;if(!((b=m.options)!=null&&b.length))return null;const[u,x]=m.options,i=Number(u.value),a=Number(x.value),h=(s,n)=>{if(!Array.isArray(n)||n.length!==2||!t)return;const[e,j]=n,g=t==null?void 0:t.clone();g.setGte(e),g.setLte(j),c(g)},o={gte:(t==null?void 0:t.gte)||0,lte:(t==null?void 0:t.lte)||100},M=s=>{if(!t)return;const n=t.clone(),e=Number(s);e>n.lteMax||(e>=n.gteMin&&e<=n.lteMax&&n.setGte(e),(!n.lte||e>=n.lte)&&n.setLte(n.lteMax),c(n))},f=s=>{if(!t)return;const n=t.clone(),e=Number(s);e<n.gteMin||(e>=n.gteMin&&e<=n.lteMax&&n.setLte(e),(!n.gte||e<=n.gte)&&n.setGte(n.gteMin),c(n))},S=[o.gte,o.lte];return r.jsxs(l.Stack,{spacing:"xs",alignX:"stretch",children:[r.jsxs(l.Stack,{direction:"horizontal",children:[r.jsx(l.TextField,{label:u.label,type:"number",min:i,max:a,value:o.gte.toString(),onChange:M}),r.jsx(l.TextField,{label:x.label,type:"number",min:i,max:a,value:o.lte.toString(),onChange:f})]}),r.jsx(v.MUISlider,{value:S,onChange:h,min:i,max:a,valueLabelDisplay:"auto"})]})});exports.FilterNumberRangeFilter=y;
package/dist/index94.js CHANGED
@@ -1,21 +1,65 @@
1
- import { jsxs as f, jsx as g } from "react/jsx-runtime";
2
- import { useSortable as l } from "@dnd-kit/sortable";
3
- import { CSS as p } from "./index102.js";
4
- import { DraggingOverlay as c } from "./index80.js";
5
- const d = ({ id: r, children: t }) => {
6
- const { attributes: o, listeners: s, setNodeRef: e, transform: i, transition: n, isDragging: m } = l({
7
- id: r
8
- }), a = {
9
- transform: p.Transform.toString(i),
10
- transition: n,
11
- cursor: "grab",
12
- outlineOffset: "-1px"
13
- };
14
- return /* @__PURE__ */ f("div", { ref: e, style: a, ...o, ...s, children: [
15
- t,
16
- m && /* @__PURE__ */ g(c, {})
17
- ] });
18
- };
1
+ import { jsxs as b, jsx as a } from "react/jsx-runtime";
2
+ import { observer as N } from "mobx-react";
3
+ import { Stack as h, TextField as u } from "@veeqo/ui";
4
+ import { MUISlider as L } from "./index99.js";
5
+ const j = N(
6
+ ({ data: g, editedValue: t, setEditedValue: l }) => {
7
+ var f;
8
+ if (!((f = g.options) != null && f.length)) return null;
9
+ const [i, x] = g.options, s = Number(i.value), c = Number(x.value), p = (e, n) => {
10
+ if (!Array.isArray(n) || n.length !== 2 || !t) return;
11
+ const [r, y] = n, m = t == null ? void 0 : t.clone();
12
+ m.setGte(r), m.setLte(y), l(m);
13
+ }, o = {
14
+ gte: (t == null ? void 0 : t.gte) || 0,
15
+ lte: (t == null ? void 0 : t.lte) || 100
16
+ }, M = (e) => {
17
+ if (!t) return;
18
+ const n = t.clone(), r = Number(e);
19
+ r > n.lteMax || (r >= n.gteMin && r <= n.lteMax && n.setGte(r), (!n.lte || r >= n.lte) && n.setLte(n.lteMax), l(n));
20
+ }, v = (e) => {
21
+ if (!t) return;
22
+ const n = t.clone(), r = Number(e);
23
+ r < n.gteMin || (r >= n.gteMin && r <= n.lteMax && n.setLte(r), (!n.gte || r <= n.gte) && n.setGte(n.gteMin), l(n));
24
+ }, C = [o.gte, o.lte];
25
+ return /* @__PURE__ */ b(h, { spacing: "xs", alignX: "stretch", children: [
26
+ /* @__PURE__ */ b(h, { direction: "horizontal", children: [
27
+ /* @__PURE__ */ a(
28
+ u,
29
+ {
30
+ label: i.label,
31
+ type: "number",
32
+ min: s,
33
+ max: c,
34
+ value: o.gte.toString(),
35
+ onChange: M
36
+ }
37
+ ),
38
+ /* @__PURE__ */ a(
39
+ u,
40
+ {
41
+ label: x.label,
42
+ type: "number",
43
+ min: s,
44
+ max: c,
45
+ value: o.lte.toString(),
46
+ onChange: v
47
+ }
48
+ )
49
+ ] }),
50
+ /* @__PURE__ */ a(
51
+ L,
52
+ {
53
+ value: C,
54
+ onChange: p,
55
+ min: s,
56
+ max: c,
57
+ valueLabelDisplay: "auto"
58
+ }
59
+ )
60
+ ] });
61
+ }
62
+ );
19
63
  export {
20
- d as SortableItem
64
+ j as FilterNumberRangeFilter
21
65
  };
package/dist/index95.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),c=require("@dnd-kit/core"),s=require("./index80.cjs"),l=({id:e,children:r,...t})=>{const{setNodeRef:o}=c.useDroppable({id:e});return a.createElement(s.DroppableAreaStack,{...t,key:e,ref:o},r)};exports.DroppableArea=l;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@dnd-kit/sortable"),g=require("./index103.cjs"),b=require("./index80.cjs"),f=({id:t,children:r})=>{const{attributes:s,listeners:o,setNodeRef:i,transform:n,transition:a,isDragging:l}=c.useSortable({id:t}),u={transform:g.CSS.Transform.toString(n),transition:a,cursor:"grab",outlineOffset:"-1px"};return e.jsxs("div",{ref:i,style:u,...s,...o,children:[r,l&&e.jsx(b.DraggingOverlay,{})]})};exports.SortableItem=f;
package/dist/index95.js CHANGED
@@ -1,10 +1,21 @@
1
- import { createElement as p } from "react";
2
- import { useDroppable as a } from "@dnd-kit/core";
3
- import { DroppableAreaStack as m } from "./index80.js";
4
- const n = ({ id: e, children: r, ...o }) => {
5
- const { setNodeRef: t } = a({ id: e });
6
- return /* @__PURE__ */ p(m, { ...o, key: e, ref: t }, r);
1
+ import { jsxs as f, jsx as g } from "react/jsx-runtime";
2
+ import { useSortable as l } from "@dnd-kit/sortable";
3
+ import { CSS as p } from "./index103.js";
4
+ import { DraggingOverlay as c } from "./index80.js";
5
+ const d = ({ id: r, children: t }) => {
6
+ const { attributes: o, listeners: s, setNodeRef: e, transform: i, transition: n, isDragging: m } = l({
7
+ id: r
8
+ }), a = {
9
+ transform: p.Transform.toString(i),
10
+ transition: n,
11
+ cursor: "grab",
12
+ outlineOffset: "-1px"
13
+ };
14
+ return /* @__PURE__ */ f("div", { ref: e, style: a, ...o, ...s, children: [
15
+ t,
16
+ m && /* @__PURE__ */ g(c, {})
17
+ ] });
7
18
  };
8
19
  export {
9
- n as DroppableArea
20
+ d as SortableItem
10
21
  };
package/dist/index96.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),b=require("@dnd-kit/sortable"),w=({items:d,setItems:g})=>{const[C,i]=O.useState(null),[h,v]=O.useState(null),s=n=>{var e;return n&&(n.id in d?n.id:(e=n==null?void 0:n.data.current)==null?void 0:e.sortable.containerId)};return{activeId:C,handleDragStart:n=>{const{active:e}=n;i(e.id),v(d)},handleDragOver:n=>{const{active:e,over:t}=n,o=t==null?void 0:t.id;if(o==null)return;const c=s(t),a=s(e);!c||!a||a!==c&&g(r=>{const u=r[a],l=r[c],D=l.indexOf(o),S=u.indexOf(e.id);let f;if(o in r)f=l.length+1;else{const I=t&&e.rect.current.translated&&e.rect.current.translated.top>t.rect.top+t.rect.height?1:0;f=D>=0?D+I:l.length+1}return{...r,[a]:r[a].filter(x=>x!==e.id),[c]:[...r[c].slice(0,f),r[a][S],...r[c].slice(f,r[c].length)]}})},handleDragEnd:n=>{const{active:e,over:t}=n,o=s(e);if(!o){i(null);return}const c=t==null?void 0:t.id;if(c==null){i(null);return}const a=s(t);if(a){const r=d[o].indexOf(e.id),u=d[a].indexOf(c);r!==u&&g(l=>({...l,[a]:b.arrayMove(l[a],r,u)}))}i(null)},handleDragCancel:()=>{h&&g(h),i(null),v(null)}}};exports.useDragHandlers=w;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),c=require("@dnd-kit/core"),s=require("./index80.cjs"),l=({id:e,children:r,...t})=>{const{setNodeRef:o}=c.useDroppable({id:e});return a.createElement(s.DroppableAreaStack,{...t,key:e,ref:o},r)};exports.DroppableArea=l;
package/dist/index96.js CHANGED
@@ -1,66 +1,10 @@
1
- import { useState as C } from "react";
2
- import { arrayMove as S } from "@dnd-kit/sortable";
3
- const M = ({ items: d, setItems: g }) => {
4
- const [O, i] = C(null), [h, v] = C(null), s = (n) => {
5
- var t;
6
- return n && (n.id in d ? n.id : (t = n == null ? void 0 : n.data.current) == null ? void 0 : t.sortable.containerId);
7
- };
8
- return {
9
- activeId: O,
10
- handleDragStart: (n) => {
11
- const { active: t } = n;
12
- i(t.id), v(d);
13
- },
14
- handleDragOver: (n) => {
15
- const { active: t, over: e } = n, a = e == null ? void 0 : e.id;
16
- if (a == null) return;
17
- const c = s(e), o = s(t);
18
- !c || !o || o !== c && g((r) => {
19
- const u = r[o], l = r[c], x = l.indexOf(a), I = u.indexOf(t.id);
20
- let f;
21
- if (a in r)
22
- f = l.length + 1;
23
- else {
24
- const w = e && t.rect.current.translated && t.rect.current.translated.top > e.rect.top + e.rect.height ? 1 : 0;
25
- f = x >= 0 ? x + w : l.length + 1;
26
- }
27
- return {
28
- ...r,
29
- [o]: r[o].filter((D) => D !== t.id),
30
- [c]: [
31
- ...r[c].slice(0, f),
32
- r[o][I],
33
- ...r[c].slice(f, r[c].length)
34
- ]
35
- };
36
- });
37
- },
38
- handleDragEnd: (n) => {
39
- const { active: t, over: e } = n, a = s(t);
40
- if (!a) {
41
- i(null);
42
- return;
43
- }
44
- const c = e == null ? void 0 : e.id;
45
- if (c == null) {
46
- i(null);
47
- return;
48
- }
49
- const o = s(e);
50
- if (o) {
51
- const r = d[a].indexOf(t.id), u = d[o].indexOf(c);
52
- r !== u && g((l) => ({
53
- ...l,
54
- [o]: S(l[o], r, u)
55
- }));
56
- }
57
- i(null);
58
- },
59
- handleDragCancel: () => {
60
- h && g(h), i(null), v(null);
61
- }
62
- };
1
+ import { createElement as p } from "react";
2
+ import { useDroppable as a } from "@dnd-kit/core";
3
+ import { DroppableAreaStack as m } from "./index80.js";
4
+ const n = ({ id: e, children: r, ...o }) => {
5
+ const { setNodeRef: t } = a({ id: e });
6
+ return /* @__PURE__ */ p(m, { ...o, key: e, ref: t }, r);
63
7
  };
64
8
  export {
65
- M as useDragHandlers
9
+ n as DroppableArea
66
10
  };