@apipass/design-system 1.20.0 → 1.20.1
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),A=require("../../../vendor/clsx/dist/clsx.cjs"),D=require("react"),l=require("../../../_virtual/index.cjs");;/* empty css */;/* empty css */;/* empty css */const G=l.WidthProvider(l),T=".widget-drag-handle",_=".widget-header-actions";function S({layout:c,onLayoutChange:r,cols:u=12,rowHeight:o=80,isEditable:n=!1,isDraggable:m,isResizable:E,className:q,style:R,children:i}){const b=c.map(({id:e,x:t,y:a,w:s,h:d})=>({i:e,x:t,y:a,w:s,h:d}));function x(e){r==null||r(e.map(({i:t,x:a,y:s,w:d,h:y})=>({id:t,x:a,y:s,w:d,h:y})))}return g.jsx(G,{className:A.clsx("widget-grid",q),style:R,layout:b,cols:u,rowHeight:o,isDraggable:m??n,isResizable:E??n,draggableHandle:T,draggableCancel:_,onLayoutChange:x,children:(Array.isArray(i)?i:[i]).map(e=>D.isValidElement(e)?g.jsx("div",{className:"widget-grid-item",children:e},e.key):e)})}exports.WidgetGrid=S;
|
|
2
2
|
//# sourceMappingURL=WidgetGrid.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WidgetGrid.cjs","sources":["../../../../../src/ui/components/WidgetGrid/WidgetGrid.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {
|
|
1
|
+
{"version":3,"file":"WidgetGrid.cjs","sources":["../../../../../src/ui/components/WidgetGrid/WidgetGrid.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { isValidElement, type CSSProperties, type ReactNode } from \"react\";\nimport GridLayout, { type Layout } from \"react-grid-layout\";\nimport \"react-grid-layout/css/styles.css\";\nimport \"react-resizable/css/styles.css\";\nimport \"./widgetgrid.css\";\n\nconst ResizableGridLayout = /* @__PURE__ */ GridLayout.WidthProvider(GridLayout);\n\nconst WIDGET_DRAG_HANDLE_SELECTOR = \".widget-drag-handle\";\nconst WIDGET_HEADER_ACTIONS_SELECTOR = \".widget-header-actions\";\n\nexport interface WidgetLayoutItem {\n id: string;\n x: number;\n y: number;\n w: number;\n h: number;\n}\n\nexport interface WidgetGridProps {\n layout: WidgetLayoutItem[];\n onLayoutChange?: (layout: WidgetLayoutItem[]) => void;\n cols?: number;\n rowHeight?: number;\n isEditable?: boolean;\n isDraggable?: boolean;\n isResizable?: boolean;\n className?: string;\n style?: CSSProperties;\n children: ReactNode;\n}\n\nexport function WidgetGrid({\n layout,\n onLayoutChange,\n cols = 12,\n rowHeight = 80,\n isEditable = false,\n isDraggable,\n isResizable,\n className,\n style,\n children,\n}: WidgetGridProps) {\n const rglLayout: Layout[] = layout.map(({ id, x, y, w, h }) => ({ i: id, x, y, w, h }));\n\n function handleLayoutChange(nextLayout: Layout[]): void {\n onLayoutChange?.(nextLayout.map(({ i, x, y, w, h }) => ({ id: i, x, y, w, h })));\n }\n\n return (\n <ResizableGridLayout\n className={clsx(\"widget-grid\", className)}\n style={style}\n layout={rglLayout}\n cols={cols}\n rowHeight={rowHeight}\n isDraggable={isDraggable ?? isEditable}\n isResizable={isResizable ?? isEditable}\n draggableHandle={WIDGET_DRAG_HANDLE_SELECTOR}\n draggableCancel={WIDGET_HEADER_ACTIONS_SELECTOR}\n onLayoutChange={handleLayoutChange}\n >\n {(Array.isArray(children) ? children : [children]).map((child) =>\n isValidElement(child) ? (\n // react-grid-layout clones this direct child to attach position styles and,\n // when resizable, appends the resize handle as one of its children. Widget\n // renders its own children inside .widget-body, so cloning Widget directly\n // would bury the handle there instead of at the item's edge. This wrapper\n // keeps Widget's markup untouched and gives react-grid-layout a plain node\n // to clone onto.\n //\n // A plain array .map() is used here (not Children.map/Children.forEach/\n // Children.toArray): those APIs re-escape each child's key on every call,\n // prefixing it with React's internal `.$` marker regardless of the key set\n // on the returned element. react-grid-layout derives each item's id from\n // this wrapper's resolved key, and that id round-trips back into `layout` on\n // the next render, so the escaped key compounded every render (id -> `.$id`\n // -> `.$.$id` -> ...) and never converged, causing an infinite update loop\n // as soon as a consumer re-rendered with the reported layout. Plain .map()\n // leaves the explicit key untouched.\n <div key={child.key} className=\"widget-grid-item\">\n {child}\n </div>\n ) : (\n child\n ),\n )}\n </ResizableGridLayout>\n );\n}\n"],"names":["ResizableGridLayout","GridLayout","WIDGET_DRAG_HANDLE_SELECTOR","WIDGET_HEADER_ACTIONS_SELECTOR","WidgetGrid","layout","onLayoutChange","cols","rowHeight","isEditable","isDraggable","isResizable","className","style","children","rglLayout","id","x","y","w","h","handleLayoutChange","nextLayout","i","jsx","clsx","child","isValidElement"],"mappings":"+XAOA,MAAMA,EAAsCC,EAAW,cAAcA,CAAU,EAEzEC,EAA8B,sBAC9BC,EAAiC,yBAuBhC,SAASC,EAAW,CACzB,OAAAC,EACA,eAAAC,EACA,KAAAC,EAAO,GACP,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,YAAAC,EACA,YAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,CACF,EAAoB,CAClB,MAAMC,EAAsBV,EAAO,IAAI,CAAC,CAAE,GAAAW,EAAI,EAAAC,EAAG,EAAAC,EAAG,EAAAC,EAAG,EAAAC,CAAA,KAAS,CAAE,EAAGJ,EAAI,EAAAC,EAAG,EAAAC,EAAG,EAAAC,EAAG,EAAAC,GAAI,EAEtF,SAASC,EAAmBC,EAA4B,CACtDhB,GAAA,MAAAA,EAAiBgB,EAAW,IAAI,CAAC,CAAE,EAAAC,EAAG,EAAAN,EAAG,EAAAC,EAAG,EAAAC,EAAG,EAAAC,CAAA,KAAS,CAAE,GAAIG,EAAG,EAAAN,EAAG,EAAAC,EAAG,EAAAC,EAAG,EAAAC,CAAA,EAAI,EAChF,CAEA,OACEI,EAAAA,IAACxB,EAAA,CACC,UAAWyB,EAAAA,KAAK,cAAeb,CAAS,EACxC,MAAAC,EACA,OAAQE,EACR,KAAAR,EACA,UAAAC,EACA,YAAaE,GAAeD,EAC5B,YAAaE,GAAeF,EAC5B,gBAAiBP,EACjB,gBAAiBC,EACjB,eAAgBkB,EAEd,gBAAM,QAAQP,CAAQ,EAAIA,EAAW,CAACA,CAAQ,GAAG,IAAKY,GACtDC,EAAAA,eAAeD,CAAK,QAiBjB,MAAA,CAAoB,UAAU,mBAC5B,SAAAA,CAAA,EADOA,EAAM,GAEhB,EAEAA,CAAA,CAEJ,CAAA,CAGN"}
|
|
@@ -1,51 +1,60 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { clsx as
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { clsx as _ } from "../../../vendor/clsx/dist/clsx.js";
|
|
3
|
+
import { isValidElement as u } from "react";
|
|
4
|
+
import g from "../../../_virtual/index.js";
|
|
5
5
|
/* empty css */
|
|
6
6
|
/* empty css */
|
|
7
7
|
/* empty css */
|
|
8
|
-
const
|
|
8
|
+
const y = /* @__PURE__ */ g.WidthProvider(g), T = ".widget-drag-handle", b = ".widget-header-actions";
|
|
9
9
|
function O({
|
|
10
|
-
layout:
|
|
11
|
-
onLayoutChange:
|
|
12
|
-
cols:
|
|
10
|
+
layout: l,
|
|
11
|
+
onLayoutChange: i,
|
|
12
|
+
cols: p = 12,
|
|
13
13
|
rowHeight: n = 80,
|
|
14
|
-
isEditable:
|
|
15
|
-
isDraggable:
|
|
14
|
+
isEditable: m = !1,
|
|
15
|
+
isDraggable: E,
|
|
16
16
|
isResizable: c,
|
|
17
|
-
className:
|
|
18
|
-
style:
|
|
19
|
-
children:
|
|
17
|
+
className: f,
|
|
18
|
+
style: A,
|
|
19
|
+
children: a
|
|
20
20
|
}) {
|
|
21
|
-
const
|
|
22
|
-
function
|
|
23
|
-
|
|
21
|
+
const D = l.map(({ id: r, x: e, y: t, w: o, h: d }) => ({ i: r, x: e, y: t, w: o, h: d }));
|
|
22
|
+
function G(r) {
|
|
23
|
+
i == null || i(r.map(({ i: e, x: t, y: o, w: d, h: R }) => ({ id: e, x: t, y: o, w: d, h: R })));
|
|
24
24
|
}
|
|
25
|
-
return /* @__PURE__ */
|
|
26
|
-
|
|
25
|
+
return /* @__PURE__ */ s(
|
|
26
|
+
y,
|
|
27
27
|
{
|
|
28
|
-
className:
|
|
29
|
-
style:
|
|
30
|
-
layout:
|
|
31
|
-
cols:
|
|
28
|
+
className: _("widget-grid", f),
|
|
29
|
+
style: A,
|
|
30
|
+
layout: D,
|
|
31
|
+
cols: p,
|
|
32
32
|
rowHeight: n,
|
|
33
|
-
isDraggable:
|
|
34
|
-
isResizable: c ??
|
|
35
|
-
draggableHandle:
|
|
36
|
-
draggableCancel:
|
|
37
|
-
onLayoutChange:
|
|
38
|
-
children:
|
|
39
|
-
|
|
40
|
-
(i) => b(i) ? (
|
|
33
|
+
isDraggable: E ?? m,
|
|
34
|
+
isResizable: c ?? m,
|
|
35
|
+
draggableHandle: T,
|
|
36
|
+
draggableCancel: b,
|
|
37
|
+
onLayoutChange: G,
|
|
38
|
+
children: (Array.isArray(a) ? a : [a]).map(
|
|
39
|
+
(r) => u(r) ? (
|
|
41
40
|
// react-grid-layout clones this direct child to attach position styles and,
|
|
42
41
|
// when resizable, appends the resize handle as one of its children. Widget
|
|
43
42
|
// renders its own children inside .widget-body, so cloning Widget directly
|
|
44
43
|
// would bury the handle there instead of at the item's edge. This wrapper
|
|
45
44
|
// keeps Widget's markup untouched and gives react-grid-layout a plain node
|
|
46
45
|
// to clone onto.
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
//
|
|
47
|
+
// A plain array .map() is used here (not Children.map/Children.forEach/
|
|
48
|
+
// Children.toArray): those APIs re-escape each child's key on every call,
|
|
49
|
+
// prefixing it with React's internal `.$` marker regardless of the key set
|
|
50
|
+
// on the returned element. react-grid-layout derives each item's id from
|
|
51
|
+
// this wrapper's resolved key, and that id round-trips back into `layout` on
|
|
52
|
+
// the next render, so the escaped key compounded every render (id -> `.$id`
|
|
53
|
+
// -> `.$.$id` -> ...) and never converged, causing an infinite update loop
|
|
54
|
+
// as soon as a consumer re-rendered with the reported layout. Plain .map()
|
|
55
|
+
// leaves the explicit key untouched.
|
|
56
|
+
/* @__PURE__ */ s("div", { className: "widget-grid-item", children: r }, r.key)
|
|
57
|
+
) : r
|
|
49
58
|
)
|
|
50
59
|
}
|
|
51
60
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WidgetGrid.js","sources":["../../../../../src/ui/components/WidgetGrid/WidgetGrid.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {
|
|
1
|
+
{"version":3,"file":"WidgetGrid.js","sources":["../../../../../src/ui/components/WidgetGrid/WidgetGrid.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { isValidElement, type CSSProperties, type ReactNode } from \"react\";\nimport GridLayout, { type Layout } from \"react-grid-layout\";\nimport \"react-grid-layout/css/styles.css\";\nimport \"react-resizable/css/styles.css\";\nimport \"./widgetgrid.css\";\n\nconst ResizableGridLayout = /* @__PURE__ */ GridLayout.WidthProvider(GridLayout);\n\nconst WIDGET_DRAG_HANDLE_SELECTOR = \".widget-drag-handle\";\nconst WIDGET_HEADER_ACTIONS_SELECTOR = \".widget-header-actions\";\n\nexport interface WidgetLayoutItem {\n id: string;\n x: number;\n y: number;\n w: number;\n h: number;\n}\n\nexport interface WidgetGridProps {\n layout: WidgetLayoutItem[];\n onLayoutChange?: (layout: WidgetLayoutItem[]) => void;\n cols?: number;\n rowHeight?: number;\n isEditable?: boolean;\n isDraggable?: boolean;\n isResizable?: boolean;\n className?: string;\n style?: CSSProperties;\n children: ReactNode;\n}\n\nexport function WidgetGrid({\n layout,\n onLayoutChange,\n cols = 12,\n rowHeight = 80,\n isEditable = false,\n isDraggable,\n isResizable,\n className,\n style,\n children,\n}: WidgetGridProps) {\n const rglLayout: Layout[] = layout.map(({ id, x, y, w, h }) => ({ i: id, x, y, w, h }));\n\n function handleLayoutChange(nextLayout: Layout[]): void {\n onLayoutChange?.(nextLayout.map(({ i, x, y, w, h }) => ({ id: i, x, y, w, h })));\n }\n\n return (\n <ResizableGridLayout\n className={clsx(\"widget-grid\", className)}\n style={style}\n layout={rglLayout}\n cols={cols}\n rowHeight={rowHeight}\n isDraggable={isDraggable ?? isEditable}\n isResizable={isResizable ?? isEditable}\n draggableHandle={WIDGET_DRAG_HANDLE_SELECTOR}\n draggableCancel={WIDGET_HEADER_ACTIONS_SELECTOR}\n onLayoutChange={handleLayoutChange}\n >\n {(Array.isArray(children) ? children : [children]).map((child) =>\n isValidElement(child) ? (\n // react-grid-layout clones this direct child to attach position styles and,\n // when resizable, appends the resize handle as one of its children. Widget\n // renders its own children inside .widget-body, so cloning Widget directly\n // would bury the handle there instead of at the item's edge. This wrapper\n // keeps Widget's markup untouched and gives react-grid-layout a plain node\n // to clone onto.\n //\n // A plain array .map() is used here (not Children.map/Children.forEach/\n // Children.toArray): those APIs re-escape each child's key on every call,\n // prefixing it with React's internal `.$` marker regardless of the key set\n // on the returned element. react-grid-layout derives each item's id from\n // this wrapper's resolved key, and that id round-trips back into `layout` on\n // the next render, so the escaped key compounded every render (id -> `.$id`\n // -> `.$.$id` -> ...) and never converged, causing an infinite update loop\n // as soon as a consumer re-rendered with the reported layout. Plain .map()\n // leaves the explicit key untouched.\n <div key={child.key} className=\"widget-grid-item\">\n {child}\n </div>\n ) : (\n child\n ),\n )}\n </ResizableGridLayout>\n );\n}\n"],"names":["ResizableGridLayout","GridLayout","WIDGET_DRAG_HANDLE_SELECTOR","WIDGET_HEADER_ACTIONS_SELECTOR","WidgetGrid","layout","onLayoutChange","cols","rowHeight","isEditable","isDraggable","isResizable","className","style","children","rglLayout","id","x","y","w","h","handleLayoutChange","nextLayout","i","jsx","clsx","child","isValidElement"],"mappings":";;;;;;;AAOA,MAAMA,IAAsC,gBAAAC,EAAW,cAAcA,CAAU,GAEzEC,IAA8B,uBAC9BC,IAAiC;AAuBhC,SAASC,EAAW;AAAA,EACzB,QAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,GAAoB;AAClB,QAAMC,IAAsBV,EAAO,IAAI,CAAC,EAAE,IAAAW,GAAI,GAAAC,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,EAAA,OAAS,EAAE,GAAGJ,GAAI,GAAAC,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,IAAI;AAEtF,WAASC,EAAmBC,GAA4B;AACtD,IAAAhB,KAAA,QAAAA,EAAiBgB,EAAW,IAAI,CAAC,EAAE,GAAAC,GAAG,GAAAN,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,EAAA,OAAS,EAAE,IAAIG,GAAG,GAAAN,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,EAAA,EAAI;AAAA,EAChF;AAEA,SACE,gBAAAI;AAAA,IAACxB;AAAA,IAAA;AAAA,MACC,WAAWyB,EAAK,eAAeb,CAAS;AAAA,MACxC,OAAAC;AAAA,MACA,QAAQE;AAAA,MACR,MAAAR;AAAA,MACA,WAAAC;AAAA,MACA,aAAaE,KAAeD;AAAA,MAC5B,aAAaE,KAAeF;AAAA,MAC5B,iBAAiBP;AAAA,MACjB,iBAAiBC;AAAA,MACjB,gBAAgBkB;AAAA,MAEd,iBAAM,QAAQP,CAAQ,IAAIA,IAAW,CAACA,CAAQ,GAAG;AAAA,QAAI,CAACY,MACtDC,EAAeD,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAiBjB,OAAA,EAAoB,WAAU,oBAC5B,UAAAA,EAAA,GADOA,EAAM,GAEhB;AAAA,YAEAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
|