@etsoo/react 1.8.45 → 1.8.47

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 (6) hide show
  1. package/lib/cjs/components/DnDList.d.ts +12 -1
  2. package/lib/cjs/components/DnDList.js +6 -5
  3. package/lib/mjs/components/DnDList.d.ts +12 -1
  4. package/lib/mjs/components/DnDList.js +6 -5
  5. package/package.json +9 -9
  6. package/src/components/DnDList.tsx +36 -14
package/lib/cjs/components/DnDList.d.ts CHANGED
@@ -30,7 +30,18 @@ export interface DnDListRef<D extends object> {
30
30
  /**
31
31
  * DnD sortable list properties
32
32
  */
33
- export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
33
+ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>, E extends React.ExoticComponent<{
34
+ children?: React.ReactNode | undefined;
35
+ }> = typeof React.Fragment> {
36
+ /**
37
+ * Component type to render the list into
38
+ * Default is React.Fragment
39
+ */
40
+ component?: E;
41
+ /**
42
+ * Component props
43
+ */
44
+ componentProps?: React.ComponentProps<E>;
34
45
  /**
35
46
  * Get list item style callback
36
47
  */
package/lib/cjs/components/DnDList.js CHANGED
@@ -37,7 +37,8 @@ function SortableItem(props) {
37
37
  */
38
38
  function DnDList(props) {
39
39
  // Destruct
40
- const { getItemStyle, keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } = props;
40
+ const { componentProps, getItemStyle, keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } = props;
41
+ const Component = props.component || react_1.default.Fragment;
41
42
  // States
42
43
  const [items, setItems] = react_1.default.useState([]);
43
44
  const [activeId, setActiveId] = react_1.default.useState();
@@ -129,8 +130,8 @@ function DnDList(props) {
129
130
  react_1.default.useEffect(() => {
130
131
  setItems(props.items);
131
132
  }, [props.items]);
132
- return ((0, jsx_runtime_1.jsx)(core_1.DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items, strategy: sortable_1.verticalListSortingStrategy, children: items.map((item, index) => {
133
- const id = item[keyField];
134
- return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
135
- }) }) }));
133
+ return ((0, jsx_runtime_1.jsx)(core_1.DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items, strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)(Component, { ...componentProps, children: items.map((item, index) => {
134
+ const id = item[keyField];
135
+ return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
136
+ }) }) }) }));
136
137
  }
package/lib/mjs/components/DnDList.d.ts CHANGED
@@ -30,7 +30,18 @@ export interface DnDListRef<D extends object> {
30
30
  /**
31
31
  * DnD sortable list properties
32
32
  */
33
- export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
33
+ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>, E extends React.ExoticComponent<{
34
+ children?: React.ReactNode | undefined;
35
+ }> = typeof React.Fragment> {
36
+ /**
37
+ * Component type to render the list into
38
+ * Default is React.Fragment
39
+ */
40
+ component?: E;
41
+ /**
42
+ * Component props
43
+ */
44
+ componentProps?: React.ComponentProps<E>;
34
45
  /**
35
46
  * Get list item style callback
36
47
  */
package/lib/mjs/components/DnDList.js CHANGED
@@ -31,7 +31,8 @@ function SortableItem(props) {
31
31
  */
32
32
  export function DnDList(props) {
33
33
  // Destruct
34
- const { getItemStyle, keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } = props;
34
+ const { componentProps, getItemStyle, keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } = props;
35
+ const Component = props.component || React.Fragment;
35
36
  // States
36
37
  const [items, setItems] = React.useState([]);
37
38
  const [activeId, setActiveId] = React.useState();
@@ -123,8 +124,8 @@ export function DnDList(props) {
123
124
  React.useEffect(() => {
124
125
  setItems(props.items);
125
126
  }, [props.items]);
126
- return (_jsx(DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: verticalListSortingStrategy, children: items.map((item, index) => {
127
- const id = item[keyField];
128
- return (_jsx(SortableItem, { id: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
129
- }) }) }));
127
+ return (_jsx(DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: verticalListSortingStrategy, children: _jsx(Component, { ...componentProps, children: items.map((item, index) => {
128
+ const id = item[keyField];
129
+ return (_jsx(SortableItem, { id: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
130
+ }) }) }) }));
130
131
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.8.45",
3
+ "version": "1.8.47",
4
4
  "description": "TypeScript ReactJs UI Independent Framework",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
@@ -40,12 +40,12 @@
40
40
  "@emotion/css": "^11.13.5",
41
41
  "@emotion/react": "^11.14.0",
42
42
  "@emotion/styled": "^11.14.0",
43
- "@etsoo/appscript": "^1.6.36",
43
+ "@etsoo/appscript": "^1.6.38",
44
44
  "@etsoo/notificationbase": "^1.1.62",
45
45
  "@etsoo/shared": "^1.2.74",
46
46
  "react": "^18.3.1",
47
47
  "react-dom": "^18.3.1",
48
- "react-router-dom": "^7.6.1",
48
+ "react-router-dom": "^7.6.2",
49
49
  "react-window": "^1.8.11"
50
50
  },
51
51
  "overrides": {
@@ -55,18 +55,18 @@
55
55
  },
56
56
  "devDependencies": {
57
57
  "@babel/cli": "^7.27.2",
58
- "@babel/core": "^7.27.1",
59
- "@babel/plugin-transform-runtime": "^7.27.1",
58
+ "@babel/core": "^7.27.4",
59
+ "@babel/plugin-transform-runtime": "^7.27.4",
60
60
  "@babel/preset-env": "^7.27.2",
61
- "@babel/runtime-corejs3": "^7.27.1",
61
+ "@babel/runtime-corejs3": "^7.27.6",
62
62
  "@testing-library/jest-dom": "^6.6.3",
63
63
  "@testing-library/react": "^16.3.0",
64
- "@types/react": "^18.3.22",
64
+ "@types/react": "^18.3.23",
65
65
  "@types/react-dom": "^18.3.7",
66
66
  "@types/react-window": "^1.8.8",
67
- "@vitejs/plugin-react": "^4.5.0",
67
+ "@vitejs/plugin-react": "^4.5.1",
68
68
  "jsdom": "^26.1.0",
69
69
  "typescript": "^5.8.3",
70
- "vitest": "^3.1.4"
70
+ "vitest": "^3.2.2"
71
71
  }
72
72
  }
package/src/components/DnDList.tsx CHANGED
@@ -87,7 +87,24 @@ export interface DnDListRef<D extends object> {
87
87
  /**
88
88
  * DnD sortable list properties
89
89
  */
90
- export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
90
+ export interface DnDListPros<
91
+ D extends object,
92
+ K extends DataTypes.Keys<D>,
93
+ E extends React.ExoticComponent<{
94
+ children?: React.ReactNode | undefined;
95
+ }> = typeof React.Fragment
96
+ > {
97
+ /**
98
+ * Component type to render the list into
99
+ * Default is React.Fragment
100
+ */
101
+ component?: E;
102
+
103
+ /**
104
+ * Component props
105
+ */
106
+ componentProps?: React.ComponentProps<E>;
107
+
91
108
  /**
92
109
  * Get list item style callback
93
110
  */
@@ -148,6 +165,7 @@ export function DnDList<
148
165
  >(props: DnDListPros<D, K>) {
149
166
  // Destruct
150
167
  const {
168
+ componentProps,
151
169
  getItemStyle,
152
170
  keyField,
153
171
  itemRenderer,
@@ -157,6 +175,8 @@ export function DnDList<
157
175
  onDragEnd
158
176
  } = props;
159
177
 
178
+ const Component = props.component || React.Fragment;
179
+
160
180
  // States
161
181
  const [items, setItems] = React.useState<D[]>([]);
162
182
  const [activeId, setActiveId] = React.useState<UniqueIdentifier>();
@@ -287,19 +307,21 @@ export function DnDList<
287
307
  return (
288
308
  <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
289
309
  <SortableContext items={items} strategy={verticalListSortingStrategy}>
290
- {items.map((item, index) => {
291
- const id = item[keyField] as unknown as UniqueIdentifier;
292
- return (
293
- <SortableItem
294
- id={id}
295
- key={id}
296
- style={getItemStyle(index, id === activeId)}
297
- itemRenderer={(nodeRef, actionNodeRef) =>
298
- itemRenderer(item, index, nodeRef, actionNodeRef)
299
- }
300
- />
301
- );
302
- })}
310
+ <Component {...componentProps}>
311
+ {items.map((item, index) => {
312
+ const id = item[keyField] as unknown as UniqueIdentifier;
313
+ return (
314
+ <SortableItem
315
+ id={id}
316
+ key={id}
317
+ style={getItemStyle(index, id === activeId)}
318
+ itemRenderer={(nodeRef, actionNodeRef) =>
319
+ itemRenderer(item, index, nodeRef, actionNodeRef)
320
+ }
321
+ />
322
+ );
323
+ })}
324
+ </Component>
303
325
  </SortableContext>
304
326
  </DndContext>
305
327
  );