decap-cms-widget-list 3.0.1 → 3.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "decap-cms-widget-list",
   "description": "Widget for editing lists in Decap CMS.",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "homepage": "https://www.decapcms.org/docs/widgets/#list",
   "repository": "https://github.com/decaporg/decap-cms/tree/master/packages/decap-cms-widget-list",
   "bugs": "https://github.com/decaporg/decap-cms/issues",
@@ -21,7 +21,9 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
   },
   "dependencies": {
-    "react-sortable-hoc": "^2.0.0"
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
+    "@dnd-kit/sortable": "^7.0.2"
   },
   "peerDependencies": {
     "@emotion/core": "^10.0.35",
@@ -35,5 +37,5 @@
     "react": "^16.8.4 || ^17.0.0",
     "react-immutable-proptypes": "^2.1.0"
   },
-  "gitHead": "2f0f9dbd1654868da59cbdbaa2c9dce1d1bcb2c6"
+  "gitHead": "34f0b63b4602efa261ef11aafae85460ca8f77cd"
 }

package/src/ListControl.js

@@ -5,9 +5,19 @@ import styled from '@emotion/styled';
 import { css, ClassNames } from '@emotion/core';
 import { List, Map, fromJS } from 'immutable';
 import { partial, isEmpty, uniqueId } from 'lodash';
-import uuid from 'uuid/v4';
-import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+import { v4 as uuid } from 'uuid';
 import DecapCmsWidgetObject from 'decap-cms-widget-object';
+import {
+  DndContext,
+  MouseSensor,
+  TouchSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { SortableContext, useSortable } from '@dnd-kit/sortable';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
+import { CSS } from '@dnd-kit/utilities';
 import {
   ListItemTopBar,
   ObjectWidgetTopBar,
@@ -28,8 +38,6 @@ const ObjectControl = DecapCmsWidgetObject.controlComponent;
 
 const ListItem = styled.div();
 
-const SortableListItem = SortableElement(ListItem);
-
 const StyledListItemTopBar = styled(ListItemTopBar)`
   background-color: ${colors.textFieldBorder};
 `;
@@ -65,9 +73,69 @@ const styles = {
   `,
 };
 
-const SortableList = SortableContainer(({ items, renderItem }) => {
-  return <div>{items.map(renderItem)}</div>;
-});
+function SortableList({ items, children, onSortEnd, keys }) {
+  const activationConstraint = { distance: 4 };
+  const sensors = useSensors(
+    useSensor(MouseSensor, { activationConstraint }),
+    useSensor(TouchSensor, { activationConstraint }),
+  );
+
+  function handleSortEnd({ active, over }) {
+    onSortEnd({
+      oldIndex: keys.indexOf(active.id),
+      newIndex: keys.indexOf(over.id),
+    });
+  }
+
+  return (
+    <div>
+      <DndContext
+        modifiers={[restrictToParentElement]}
+        collisionDetection={closestCenter}
+        sensors={sensors}
+        onDragEnd={handleSortEnd}
+      >
+        <SortableContext items={items}>{children}</SortableContext>
+      </DndContext>
+    </div>
+  );
+}
+
+function SortableListItem(props) {
+  const { setNodeRef, transform, transition } = useSortable({
+    id: props.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const { collapsed } = props;
+
+  return (
+    <ListItem
+      sortable
+      ref={setNodeRef}
+      style={style}
+      css={[styles.listControlItem, collapsed && styles.listControlItemCollapsed]}
+    >
+      {props.children}
+    </ListItem>
+  );
+}
+
+function DragHandle({ children, id }) {
+  const { attributes, listeners } = useSortable({
+    id,
+  });
+
+  return (
+    <div {...attributes} {...listeners}>
+      {children}
+    </div>
+  );
+}
 
 const valueTypes = {
   SINGLE: 'SINGLE',
@@ -524,11 +592,14 @@ export default class ListControl extends React.Component {
         return this.renderErroneousTypedItem(index, item);
       }
     }
+
     return (
       <SortableListItem
         css={[styles.listControlItem, collapsed && styles.listControlItemCollapsed]}
         index={index}
         key={key}
+        id={key}
+        keys={keys}
       >
         {isVariableTypesList && (
           <LabelComponent
@@ -543,8 +614,9 @@ export default class ListControl extends React.Component {
         <StyledListItemTopBar
           collapsed={collapsed}
           onCollapseToggle={partial(this.handleItemCollapseToggle, index)}
+          dragHandle={DragHandle}
+          id={key}
           onRemove={partial(this.handleRemove, index)}
-          dragHandleHOC={SortableHandle}
           data-testid={`styled-list-item-top-bar-${key}`}
         />
         <NestedObjectLabel collapsed={collapsed} error={hasError}>
@@ -595,10 +667,11 @@ export default class ListControl extends React.Component {
         <StyledListItemTopBar
           onCollapseToggle={null}
           onRemove={partial(this.handleRemove, index, key)}
-          dragHandleHOC={SortableHandle}
+          dragHandle={DragHandle}
+          id={key}
         />
         <NestedObjectLabel collapsed={true} error={true}>
-          {errorMessage}
+          {errorMessage}aaaasdd
         </NestedObjectLabel>
       </SortableListItem>
     );
@@ -606,7 +679,7 @@ export default class ListControl extends React.Component {
 
   renderListControl() {
     const { value, forID, field, classNameWrapper, t } = this.props;
-    const { itemsCollapsed, listCollapsed } = this.state;
+    const { itemsCollapsed, listCollapsed, keys } = this.state;
     const items = value || List();
     const label = field.get('label', field.get('name'));
     const labelSingular = field.get('label_singular') || field.get('label', field.get('name'));
@@ -615,6 +688,8 @@ export default class ListControl extends React.Component {
     const allItemsCollapsed = itemsCollapsed.every(val => val === true);
     const selfCollapsed = allItemsCollapsed && (listCollapsed || !minimizeCollapsedItems);
 
+    const itemsArray = keys.map(key => ({ id: key }));
+
     return (
       <ClassNames>
         {({ cx, css }) => (
@@ -639,13 +714,9 @@ export default class ListControl extends React.Component {
               t={t}
             />
             {(!selfCollapsed || !minimizeCollapsedItems) && (
-              <SortableList
-                items={items}
-                renderItem={this.renderItem}
-                onSortEnd={this.onSortEnd}
-                useDragHandle
-                lockAxis="y"
-              />
+              <SortableList items={itemsArray} keys={keys} onSortEnd={this.onSortEnd}>
+                {items.map(this.renderItem)}
+              </SortableList>
             )}
           </div>
         )}

package/src/__tests__/ListControl.spec.js

@@ -34,7 +34,7 @@ jest.mock('decap-cms-ui-default', () => {
     ListItemTopBar,
   };
 });
-jest.mock('uuid/v4');
+jest.mock('uuid');
 
 describe('ListControl', () => {
   const props = {
@@ -63,9 +63,9 @@ describe('ListControl', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-    const uuid = require('uuid/v4');
+    const uuid = require('uuid');
     let id = 0;
-    uuid.mockImplementation(() => {
+    uuid.v4.mockImplementation(() => {
       return id++;
     });
   });

package/src/__tests__/__snapshots__/ListControl.spec.js.snap

@@ -103,6 +103,14 @@ exports[`ListControl should add to list when add button is clicked 1`] = `
   height: 100%;
 }
 
+.emotion-16 {
+  margin-top: 18px;
+}
+
+.emotion-16:first-of-type {
+  margin-top: 26px;
+}
+
 .emotion-1 {
   display: inline-block;
   line-height: 0;
@@ -129,14 +137,6 @@ exports[`ListControl should add to list when add button is clicked 1`] = `
   height: 100%;
 }
 
-.emotion-16 {
-  margin-top: 18px;
-}
-
-.emotion-16:first-of-type {
-  margin-top: 26px;
-}
-
 .emotion-14 {
   display: none;
   border-top: 0;
@@ -202,6 +202,7 @@ exports[`ListControl should add to list when add button is clicked 1`] = `
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="false"
           data-testid="styled-list-item-top-bar-0"
+          id="0"
         >
           <button>
             Remove
@@ -224,6 +225,23 @@ exports[`ListControl should add to list when add button is clicked 1`] = `
           value="Map {}"
         />
       </div>
+      <div
+        id="DndDescribedBy-19"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-19"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
     </div>
   </div>
 </DocumentFragment>
@@ -332,6 +350,14 @@ exports[`ListControl should remove from list when remove button is clicked 1`] =
   height: 100%;
 }
 
+.emotion-16 {
+  margin-top: 18px;
+}
+
+.emotion-16:first-of-type {
+  margin-top: 26px;
+}
+
 .emotion-1 {
   display: inline-block;
   line-height: 0;
@@ -358,14 +384,6 @@ exports[`ListControl should remove from list when remove button is clicked 1`] =
   height: 100%;
 }
 
-.emotion-16 {
-  margin-top: 18px;
-}
-
-.emotion-16:first-of-type {
-  margin-top: 26px;
-}
-
 .emotion-14 {
   display: none;
   border-top: 0;
@@ -431,6 +449,7 @@ exports[`ListControl should remove from list when remove button is clicked 1`] =
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="false"
           data-testid="styled-list-item-top-bar-0"
+          id="0"
         >
           <button>
             Remove
@@ -460,6 +479,7 @@ exports[`ListControl should remove from list when remove button is clicked 1`] =
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="false"
           data-testid="styled-list-item-top-bar-1"
+          id="1"
         >
           <button>
             Remove
@@ -482,6 +502,23 @@ exports[`ListControl should remove from list when remove button is clicked 1`] =
           value="Map { \\"string\\": \\"item 2\\" }"
         />
       </div>
+      <div
+        id="DndDescribedBy-20"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-20"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
     </div>
   </div>
 </DocumentFragment>
@@ -592,7 +629,6 @@ exports[`ListControl should remove from list when remove button is clicked 2`] =
 
 .emotion-16 {
   margin-top: 18px;
-  padding-bottom: 0;
 }
 
 .emotion-16:first-of-type {
@@ -685,11 +721,13 @@ exports[`ListControl should remove from list when remove button is clicked 2`] =
     <div>
       <div
         class="emotion-16 emotion-17"
+        style="transition: transform 0ms linear;"
       >
         <mock-list-item-top-bar
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="true"
           data-testid="styled-list-item-top-bar-2"
+          id="2"
         >
           <button>
             Remove
@@ -712,6 +750,23 @@ exports[`ListControl should remove from list when remove button is clicked 2`] =
           value="Map { \\"string\\": \\"item 2\\" }"
         />
       </div>
+      <div
+        id="DndDescribedBy-20"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-20"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
     </div>
   </div>
 </DocumentFragment>
@@ -831,6 +886,14 @@ exports[`ListControl should render list with fields with collapse = "false" and
   height: 100%;
 }
 
+.emotion-16 {
+  margin-top: 18px;
+}
+
+.emotion-16:first-of-type {
+  margin-top: 26px;
+}
+
 .emotion-1 {
   display: inline-block;
   line-height: 0;
@@ -857,14 +920,6 @@ exports[`ListControl should render list with fields with collapse = "false" and
   height: 100%;
 }
 
-.emotion-16 {
-  margin-top: 18px;
-}
-
-.emotion-16:first-of-type {
-  margin-top: 26px;
-}
-
 .emotion-14 {
   display: none;
   border-top: 0;
@@ -930,6 +985,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="false"
           data-testid="styled-list-item-top-bar-0"
+          id="0"
         >
           <button>
             Remove
@@ -959,6 +1015,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="false"
           data-testid="styled-list-item-top-bar-1"
+          id="1"
         >
           <button>
             Remove
@@ -981,6 +1038,23 @@ exports[`ListControl should render list with fields with collapse = "false" and
           value="Map { \\"string\\": \\"item 2\\" }"
         />
       </div>
+      <div
+        id="DndDescribedBy-16"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-16"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
     </div>
   </div>
 </DocumentFragment>
@@ -1089,6 +1163,14 @@ exports[`ListControl should render list with fields with collapse = "false" and
   height: 100%;
 }
 
+.emotion-16 {
+  margin-top: 18px;
+}
+
+.emotion-16:first-of-type {
+  margin-top: 26px;
+}
+
 .emotion-1 {
   display: inline-block;
   line-height: 0;
@@ -1115,14 +1197,6 @@ exports[`ListControl should render list with fields with collapse = "false" and
   height: 100%;
 }
 
-.emotion-16 {
-  margin-top: 18px;
-}
-
-.emotion-16:first-of-type {
-  margin-top: 26px;
-}
-
 .emotion-14 {
   display: none;
   border-top: 0;
@@ -1188,6 +1262,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="false"
           data-testid="styled-list-item-top-bar-0"
+          id="0"
         >
           <button>
             Remove
@@ -1217,6 +1292,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="false"
           data-testid="styled-list-item-top-bar-1"
+          id="1"
         >
           <button>
             Remove
@@ -1239,6 +1315,23 @@ exports[`ListControl should render list with fields with collapse = "false" and
           value="Map { \\"string\\": \\"item 2\\" }"
         />
       </div>
+      <div
+        id="DndDescribedBy-18"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-18"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
     </div>
   </div>
 </DocumentFragment>
@@ -1375,7 +1468,6 @@ exports[`ListControl should render list with fields with default collapse ("true
 
 .emotion-16 {
   margin-top: 18px;
-  padding-bottom: 0;
 }
 
 .emotion-16:first-of-type {
@@ -1447,6 +1539,7 @@ exports[`ListControl should render list with fields with default collapse ("true
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="true"
           data-testid="styled-list-item-top-bar-0"
+          id="0"
         >
           <button>
             Remove
@@ -1476,6 +1569,7 @@ exports[`ListControl should render list with fields with default collapse ("true
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="true"
           data-testid="styled-list-item-top-bar-1"
+          id="1"
         >
           <button>
             Remove
@@ -1498,6 +1592,23 @@ exports[`ListControl should render list with fields with default collapse ("true
           value="Map { \\"string\\": \\"item 2\\" }"
         />
       </div>
+      <div
+        id="DndDescribedBy-15"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-15"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
     </div>
   </div>
 </DocumentFragment>
@@ -1815,7 +1926,6 @@ exports[`ListControl should render list with nested object 1`] = `
 
 .emotion-16 {
   margin-top: 18px;
-  padding-bottom: 0;
 }
 
 .emotion-16:first-of-type {
@@ -1887,6 +1997,7 @@ exports[`ListControl should render list with nested object 1`] = `
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="true"
           data-testid="styled-list-item-top-bar-0"
+          id="0"
         >
           <button>
             Remove
@@ -1916,6 +2027,7 @@ exports[`ListControl should render list with nested object 1`] = `
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="true"
           data-testid="styled-list-item-top-bar-1"
+          id="1"
         >
           <button>
             Remove
@@ -1938,6 +2050,23 @@ exports[`ListControl should render list with nested object 1`] = `
           value="Map { \\"object\\": Map { \\"title\\": \\"item 2\\" } }"
         />
       </div>
+      <div
+        id="DndDescribedBy-0"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-0"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
     </div>
   </div>
 </DocumentFragment>
@@ -2046,6 +2175,14 @@ exports[`ListControl should render list with nested object with collapse = false
   height: 100%;
 }
 
+.emotion-16 {
+  margin-top: 18px;
+}
+
+.emotion-16:first-of-type {
+  margin-top: 26px;
+}
+
 .emotion-1 {
   display: inline-block;
   line-height: 0;
@@ -2072,14 +2209,6 @@ exports[`ListControl should render list with nested object with collapse = false
   height: 100%;
 }
 
-.emotion-16 {
-  margin-top: 18px;
-}
-
-.emotion-16:first-of-type {
-  margin-top: 26px;
-}
-
 .emotion-14 {
   display: none;
   border-top: 0;
@@ -2145,6 +2274,7 @@ exports[`ListControl should render list with nested object with collapse = false
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="false"
           data-testid="styled-list-item-top-bar-0"
+          id="0"
         >
           <button>
             Remove
@@ -2174,6 +2304,7 @@ exports[`ListControl should render list with nested object with collapse = false
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="false"
           data-testid="styled-list-item-top-bar-1"
+          id="1"
         >
           <button>
             Remove
@@ -2196,6 +2327,23 @@ exports[`ListControl should render list with nested object with collapse = false
           value="Map { \\"object\\": Map { \\"title\\": \\"item 2\\" } }"
         />
       </div>
+      <div
+        id="DndDescribedBy-1"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-1"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
     </div>
   </div>
 </DocumentFragment>