react-split-pane 2.0.2 → 3.0.0

package/package.json

@@ -1,83 +1,98 @@
 {
   "name": "react-split-pane",
-  "description": "React split-pane component",
-  "main": "index.js",
-  "types": "index.d.ts",
-  "version": "2.0.2",
+  "version": "3.0.0",
+  "description": "React split-pane component with hooks and TypeScript",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./keyboard": {
+      "types": "./dist/keyboard.d.ts",
+      "import": "./dist/keyboard.js",
+      "require": "./dist/keyboard.cjs"
+    },
+    "./persistence": {
+      "types": "./dist/persistence.d.ts",
+      "import": "./dist/persistence.js",
+      "require": "./dist/persistence.cjs"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "rollup -c -w",
+    "build": "rollup -c && npm run build:types",
+    "build:types": "tsc --emitDeclarationOnly",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src",
+    "format": "prettier --write src examples",
+    "format:check": "prettier --check src examples",
+    "typecheck": "tsc --noEmit",
+    "examples": "vite --config examples/vite.config.ts",
+    "examples:build": "vite build --config examples/vite.config.ts",
+    "prepublishOnly": "npm run test && npm run build"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/tomkp/react-split-pane"
   },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/tomkp/react-split-pane"
-  },
-  "homepage": "https://github.com/tomkp/react-split-pane",
-  "author": "tomkp <tom@tomkp.com>",
   "keywords": [
     "react",
     "react-component",
     "split-pane",
     "react-split-pane",
-    "es6"
+    "typescript",
+    "hooks",
+    "resizable",
+    "panes",
+    "layout",
+    "accessibility"
   ],
-  "dependencies": {
-    "glamor": "^2.20.40",
-    "glamorous": "^4.11.2",
-    "inline-style-prefixer": "^4.0.0",
-    "normalize.css": "^7.0.0",
-    "styled-components": "^2.4.0",
-    "prop-types": "^15.6.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+  "author": "tomkp <tom@tomkp.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babelify": "^8.0.0",
-    "browserify": "^14.5.0",
-    "chai": "^4.1.2",
-    "chai-spies": "^0.7.1",
-    "core-js": "^2.5.3",
-    "coveralls": "^3.0.0",
-    "express": "^4.16.2",
-    "mochify": "^4.0.0",
-    "mochify-istanbul": "^2.4.2",
-    "prettier": "^1.9.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "sinon": "^5.0.7",
-    "surge": "^0.19.0",
-    "typescript": "^2.6.2",
-    "watchify": "^3.9.0",
-    "@storybook/react": "^3.3.3",
-    "@storybook/addon-actions": "^3.3.3",
-    "@storybook/addon-links": "^3.3.3"
-  },
-  "scripts": {
-    "compile": "babel -d lib/ src/",
-    "compile:watch": "babel -w -d lib/ src/",
-    "test": "npm run compile && mochify -R spec",
-    "test:watch": "npm run compile:watch & mochify -R spec --watch",
-    "test:coverage": "mochify --plugin [ mochify-istanbul --exclude '**/test/**' --report lcovonly ] && cat lcov.info | coveralls && rm lcov.info",
-    "demo": "npm run compile && browserify demo/Examples.js -d -t -o demo/bundle.js",
-    "demo:watch": "npm run compile:watch & watchify demo/Examples.js -d -t -o demo/bundle.js",
-    "demo:publish": "npm run compile && browserify demo/Examples.js -d -t -o demo/bundle.js && surge demo react-split-pane-v2.surge.sh",
-    "prettier": "prettier --single-quote --trailing-comma es5 --write './{src,test}/**/*.js'",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "release:patch": "npm test && npm version patch && git push && npm publish --tag next"
-  },
-  "browserify": {
-    "transform": [
-      [
-        "babelify"
-      ]
-    ]
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/coverage-v8": "^4.0.16",
+    "eslint": "^9.39.2",
+    "globals": "^16.2.0",
+    "jsdom": "^26.1.0",
+    "prettier": "^3.7.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.54.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.50.0",
+    "vite": "^6.3.5",
+    "vitest": "^4.0.16"
   },
-  "false": {}
+  "engines": {
+    "node": ">=20.0.0"
+  }
 }

package/styles.css

@@ -0,0 +1,106 @@
+/**
+ * Default styles for react-split-pane v3
+ *
+ * You can import these styles or create your own.
+ *
+ * Customize by overriding CSS custom properties:
+ *
+ *   .my-split-pane {
+ *     --split-pane-divider-size: 8px;
+ *     --split-pane-divider-color: #e0e0e0;
+ *     --split-pane-focus-color: #ff5722;
+ *   }
+ */
+
+:root {
+  /* Divider dimensions */
+  --split-pane-divider-size: 11px;
+  --split-pane-divider-hit-area: 5px;
+
+  /* Divider colors */
+  --split-pane-divider-color: rgba(0, 0, 0, 0.05);
+  --split-pane-divider-color-hover: rgba(0, 0, 0, 0.15);
+
+  /* Focus state */
+  --split-pane-focus-color: #2196f3;
+  --split-pane-focus-bg: rgba(33, 150, 243, 0.1);
+
+  /* Animation */
+  --split-pane-transition-duration: 0.2s;
+}
+
+/* Dark theme defaults */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --split-pane-divider-color: rgba(255, 255, 255, 0.05);
+    --split-pane-divider-color-hover: rgba(255, 255, 255, 0.15);
+  }
+}
+
+.split-pane {
+  position: relative;
+  overflow: hidden;
+}
+
+.split-pane-pane {
+  position: relative;
+  overflow: auto;
+}
+
+.split-pane-divider {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  background-clip: padding-box;
+  background-color: var(--split-pane-divider-color);
+  transition: background-color var(--split-pane-transition-duration) ease;
+}
+
+.split-pane-divider:hover {
+  background-color: var(--split-pane-divider-color-hover);
+}
+
+.split-pane-divider:focus {
+  outline: 2px solid var(--split-pane-focus-color);
+  outline-offset: -2px;
+  background-color: var(--split-pane-focus-bg);
+}
+
+.split-pane-divider:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Horizontal layout (vertical divider) */
+.split-pane-divider.horizontal {
+  width: var(--split-pane-divider-size);
+  margin: 0 calc(var(--split-pane-divider-hit-area) * -1);
+  border-left: var(--split-pane-divider-hit-area) solid transparent;
+  border-right: var(--split-pane-divider-hit-area) solid transparent;
+  cursor: col-resize;
+}
+
+
+/* Vertical layout (horizontal divider) */
+.split-pane-divider.vertical {
+  height: var(--split-pane-divider-size);
+  margin: calc(var(--split-pane-divider-hit-area) * -1) 0;
+  border-top: var(--split-pane-divider-hit-area) solid transparent;
+  border-bottom: var(--split-pane-divider-hit-area) solid transparent;
+  cursor: row-resize;
+}
+
+
+/* Minimal theme (1px divider) */
+.split-pane-divider.minimal {
+  --split-pane-divider-size: 1px;
+  --split-pane-divider-hit-area: 0px;
+  --split-pane-divider-color: rgba(0, 0, 0, 0.12);
+  border: none;
+  margin: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .split-pane-divider.minimal {
+    --split-pane-divider-color: rgba(255, 255, 255, 0.12);
+  }
+}

package/.editorconfig

@@ -1,6 +0,0 @@
-# editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2

package/.idea/jsLibraryMappings.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <file url="file://$PROJECT_DIR$" libraries="{Node.js Core}" />
-  </component>
-</project>

package/.idea/misc.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptSettings">
-    <option name="languageLevel" value="JSX" />
-  </component>
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" default="false" project-jdk-name="1.8" project-jdk-type="JavaSDK" />
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/react-split-pane.iml" filepath="$PROJECT_DIR$/.idea/react-split-pane.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/react-split-pane.iml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="JAVA_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>