@ndlib/component-library 0.0.53 → 0.0.54

package/dist/components/composites/DragDropList/DragDropList.stories.js

@@ -25,7 +25,7 @@ const StateManager = ({ children }) => {
     return _jsx(_Fragment, { children: children({ items, setItems }) });
 };
 export const Default = {
-    render: () => (_jsx(StateManager, { children: ({ items, setItems }) => (_jsx(DragDropList, Object.assign({ items: items, onReorder: ({ reorderedList }) => setItems(reorderedList) }, { children: ({ item }) => (_jsxs(_Fragment, { children: [_jsx(DragHandle, {}), _jsx(Paragraph, Object.assign({ sx: { ml: 2 } }, { children: item.label }))] })) }))) })),
+    render: () => (_jsx(StateManager, { children: ({ items, setItems }) => (_jsx(DragDropList, Object.assign({ items: items, onReorder: ({ reorderedList }) => setItems(reorderedList) }, { children: ({ item }) => (_jsx(_Fragment, { children: _jsx(Paragraph, Object.assign({ sx: { ml: 2 } }, { children: item.label })) })) }))) })),
 };
 export const Disabled = {
     render: () => (_jsx(DragDropList, Object.assign({ disabled: true, items: _items, onReorder: () => { } }, { children: ({ item }) => (_jsxs(_Fragment, { children: [_jsx(DragHandle, {}), _jsx(Paragraph, Object.assign({ sx: { ml: 2 } }, { children: item.label }))] })) }))),

package/dist/components/composites/DragDropList/index.d.ts

@@ -14,7 +14,6 @@ type DragDropListProps<Item extends DraggableItem> = {
     itemIdKey?: keyof Item;
     wrapperStyles?: StylesProp;
     itemStyles?: StylesProp;
-    dragItemsDirectly?: boolean;
     disabled?: boolean;
     children: (params: {
         item: Item;
@@ -22,5 +21,5 @@ type DragDropListProps<Item extends DraggableItem> = {
     }) => React.ReactNode;
 };
 export declare const DragHandle: React.FC<ButtonProps>;
-export declare function DragDropList<Item extends DraggableItem>({ items, itemIdKey, wrapperStyles, itemStyles, children: renderChild, onReorder, disabled, dragItemsDirectly, }: DragDropListProps<Item>): import("react/jsx-runtime").JSX.Element;
+export declare function DragDropList<Item extends DraggableItem>({ items, itemIdKey, wrapperStyles, itemStyles, children: renderChild, onReorder, disabled, }: DragDropListProps<Item>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/composites/DragDropList/index.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { DragDropContext, Droppable, Draggable, } from 'react-beautiful-dnd';
 import _DragIndicator from '@mui/icons-material/DragIndicator';
 import { BUTTON_TYPE, Button } from '../../elements/Button';
@@ -22,7 +22,7 @@ export const DragHandle = (_a) => {
     var { sx } = _a, props = __rest(_a, ["sx"]);
     return (_jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, primaryIcon: DragIndicator, disableFocusStyles: true, sx: Object.assign({ cursor: 'inherit' }, sx) }, props)));
 };
-export function DragDropList({ items, itemIdKey = 'id', wrapperStyles, itemStyles, children: renderChild, onReorder, disabled, dragItemsDirectly = false, }) {
+export function DragDropList({ items, itemIdKey = 'id', wrapperStyles, itemStyles, children: renderChild, onReorder, disabled, }) {
     const id = useUniqueId('dnd-list');
     return (_jsx(DragDropContext, Object.assign({ onDragStart: (start, provided) => {
             const selectedItem = items.find((item) => String(item[itemIdKey]) === start.draggableId);
@@ -39,10 +39,10 @@ export function DragDropList({ items, itemIdKey = 'id', wrapperStyles, itemStyle
                     dropEvent: e,
                 });
             }
-        } }, { children: _jsx(Droppable, Object.assign({ droppableId: id }, { children: (provided) => (_jsx(Column, Object.assign({}, provided.droppableProps, { sx: wrapperStyles, ref: provided.innerRef }, { children: _jsx(_Fragment, { children: items.map((item, index) => (_jsx(Draggable, Object.assign({ draggableId: String(item[itemIdKey]), isDragDisabled: disabled, index: index }, { children: (provided) => {
-                            return (_jsx(Row, Object.assign({ sx: {
-                                    alignItems: 'center',
-                                    itemStyles,
-                                }, ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { "aria-describedby": `item-${index}` }, (dragItemsDirectly ? provided.dragHandleProps : {}), { children: _jsx(Row, Object.assign({ sx: { mt: 1 }, id: `item-${index}` }, { children: renderChild({ item, index }) })) })));
-                        } }), String(item[itemIdKey])))) }) }))) })) })));
+        } }, { children: _jsx(Droppable, Object.assign({ droppableId: id }, { children: (droppable) => (_jsx(Column, Object.assign({}, droppable.droppableProps, { sx: wrapperStyles, ref: droppable.innerRef }, { children: _jsxs(_Fragment, { children: [items.map((item, index) => (_jsx(Draggable, Object.assign({ draggableId: String(item[itemIdKey]), isDragDisabled: disabled, index: index }, { children: (draggable) => {
+                                return (_jsx(Row, Object.assign({ sx: {
+                                        alignItems: 'center',
+                                        itemStyles,
+                                    }, ref: draggable.innerRef }, draggable.draggableProps, draggable.dragHandleProps, { "aria-describedby": `item-${index}` }, { children: _jsx(Row, Object.assign({ sx: { mt: 1 }, id: `item-${index}` }, { children: renderChild({ item, index }) })) })));
+                            } }), String(item[itemIdKey])))), droppable.placeholder] }) }))) })) })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "type": "module",
   "sideEffects": false,
   "files": [