Dependencies chaos fix; Add @babel/plugin-proposal-class-properties

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

.gitignore

@@ -1,11 +1,9 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 .idea
 .vscode
-.parcel-cache
 node_modules
 temp
 dist
 # todo - get story book only when releasing.
 storybook-static
-yarn.lock
-package-lock.json
+.parcel-cache

README.md

@@ -240,7 +240,7 @@ export const BasicFunction: FC = (props) => {
 #### Custom Component
 
 When using a custom component in the `tag` prop, the only component it allows is a `forwardRef` component.
-Currently we only support components who use the `React.forwardRef` API.
+Currently, we only support components who use the `React.forwardRef` API.
 
 If it doesn't have one, you can add one using `React.forwardRef()`.
 
@@ -275,7 +275,7 @@ export const BasicFunction: FC = (props) => {
 ## How does it work?
 
 Sortable affects the DOM, adding, and removing nodes/css when it needs to in order to achieve the smooth transitions we all know an love.
-This component reverses many of it's actions of the DOM so React can handle this when the state changes.
+This component reverses many of its actions of the DOM so React can handle this when the state changes.
 
 ## Caveats / Gotchas
 
@@ -304,4 +304,4 @@ I hope to provide an example soon.
 We don't have anything that works 100%, but here I'd like to spit ball some potential avenues to look down.
 
 - Use `onMove` to handle state changes instead of `onAdd`,`onRemove`, etc.
-- Create a Sortable plugin specifically for react-sortbalejs
+- Create a Sortable plugin specifically for react-sortablejs

package.json

@@ -5,10 +5,6 @@
     "name": "Wayne Van Son",
     "email": "[email protected]"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/SortableJS/react-sortablejs.git"
-  },
   "license": "MIT",
   "private": false,
   "files": [
@@ -25,51 +21,53 @@
     "serve:parcel": "parcel watch ./src/index.ts",
     "format": "npm-run-all format:*",
     "format:eslint": "yarn lint --fix",
-    "format:prettier": "prettier --write \"src/**.{js,ts}\"",
-    "lint": "eslint \"src/**.{js,ts}\"",
+    "format:prettier": "prettier --write \"src/**.{ts,tsx}\"",
+    "lint": "eslint \"src/**.{ts,tsx}\"",
     "phoenix": "rm -rf ./node_modules && rm -f yarn.lock && yarn install --prefer-online"
   },
   "peerDependencies": {
-    "@types/sortablejs": "1",
+    "@types/sortablejs": "^1.10.0",
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0",
-    "sortablejs": "1"
+    "sortablejs": "^1.10.0"
   },
   "dependencies": {
-    "classnames": "2.3.1",
-    "tiny-invariant": "1.2.0"
+    "classnames": "^2.2.6",
+    "tiny-invariant": "^1.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "11",
-    "@commitlint/config-conventional": "11",
-    "@parcel/packager-ts": "2.6.0",
-    "@parcel/transformer-typescript-types": "2.6.0",
-    "@semantic-release/changelog": "5",
-    "@semantic-release/git": "9",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
+    "@parcel/packager-ts": "^2.7.0",
+    "@parcel/transformer-typescript-types": "^2.7.0",
+    "@semantic-release/changelog": "^5.0.1",
+    "@semantic-release/git": "^9.0.0",
+    "@types/classnames": "^2.2.10",
     "@types/jest": "^26.0.14",
     "@types/node": "14.11.2",
-    "@types/react": ">=16.9.0",
-    "@types/react-dom": ">=16.9.0",
-    "@types/sortablejs": "1",
-    "@typescript-eslint/eslint-plugin": "4.33",
-    "@typescript-eslint/parser": "4.33",
-    "commitizen": "4",
-    "cz-conventional-changelog": "3",
-    "eslint": "7",
-    "eslint-plugin-react": "7",
-    "husky": "4.3",
-    "jest": "26",
-    "lint-staged": "10",
-    "npm-run-all": "4",
-    "parcel": "2",
-    "prettier": "2.5",
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0",
-    "semantic-release": "17",
-    "sortablejs": "1",
-    "ts-jest": "26",
-    "ts-node": "9",
-    "typescript": "4"
+    "@types/react": "16.9.49",
+    "@types/react-dom": "16.9.8",
+    "@types/sortablejs": "^1.10.0",
+    "@typescript-eslint/eslint-plugin": "^4.2.0",
+    "@typescript-eslint/parser": "^4.2.0",
+    "commitizen": "^4.2.1",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^7.10.0",
+    "eslint-plugin-react": "^7.21.2",
+    "husky": "^4.3.0",
+    "jest": "^26.4.2",
+    "lint-staged": "^10.4.0",
+    "npm-run-all": "^4.1.5",
+    "parcel": "^2.7.0",
+    "prettier": "^2.1.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "semantic-release": "^17.1.2",
+    "sortablejs": "^1.10.0",
+    "ts-jest": "^26.4.0",
+    "ts-node": "^9.0.0",
+    "typescript": "~4.7"
   },
   "commitlint": {
     "extends": [

src/react-sortable.tsx

@@ -30,7 +30,7 @@ import {
   removeNodes,
 } from "./util";
 
-/** Holds a global reference for which react element is being dragged */
+/** Holds a global reference for which React element is being dragged */
 // @todo - use context to manage this. How does one use 2 different providers?
 const store: Store = { dragging: null };
 
@@ -105,7 +105,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       chosenClass = "sortable-chosen",
       /* eslint-disable */
       dragClass = "sortable-drag",
-      fallbackClass = "sortable-falback",
+      fallbackClass = "sortable-fallback",
       ghostClass = "sortable-ghost",
       swapClass = "sortable-swap-highlight",
       /* eslint-enable */
@@ -123,7 +123,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       const item = list[index] || {};
       const { className: prevClassName } = child.props;
 
-      // @todo - handle the function if avalable. I don't think anyone will be doing this soon.
+      // @todo - handle the function if available. I don't think anyone will be doing this soon.
       const filtered = typeof filter === "string" && {
         [filter.replace(".", "")]: !!item.filtered,
       };
@@ -364,7 +364,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       const index = curr.index;
       if (index === -1) {
         console.log(
-          `"${evt.type}" had indice of "${curr.index}", which is probably -1 and doesn't usually happen here.`
+          `"${evt.type}" had indices of "${curr.index}", which is probably -1 and doesn't usually happen here.`
         );
         console.log(evt);
         return;
@@ -391,7 +391,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
 }
 
 // everything below this point can be removed
-// once @types has been merged. PR submited
+// once @types has been merged. PR submitted
 interface MultiIndices {
   multiDragElement: HTMLElement;
   index: number;

src/types.ts

@@ -139,6 +139,6 @@ export type UnHandledMethodNames = Exclude<
 >;
 
 /**
- * Same as `SortableMethodKeys` type but with out the string `onMove`.
+ * Same as `SortableMethodKeys` type but without the string `onMove`.
  */
 export type AllMethodsExceptMove = Exclude<AllMethodNames, "onMove">;

src/util.ts

@@ -95,8 +95,7 @@ export function createCustoms<T extends ItemInterface>(
   }
   /* eslint-enable */
 
-  const customs = createNormalized(custom, list);
-  return customs;
+  return createNormalized(custom, list);
 }
 
 /** moves items form old index to new index without breaking anything ideally. */
@@ -145,10 +144,9 @@ export function createNormalized<T extends ItemInterface>(
   inputs: Input[],
   list: T[]
 ): Normalized<T>[] {
-  const normalized = inputs
+  return inputs
     .map<Normalized<T>>((curr) => ({ ...curr, item: list[curr.oldIndex] }))
     .sort((a, b) => a.oldIndex - b.oldIndex);
-  return normalized;
 }
 
 export interface Input {