react-split-pane 2.0.3 → 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.3",
+  "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/.storybook/addons.js

@@ -1,2 +0,0 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';

package/.storybook/config.js

@@ -1,9 +0,0 @@
-import { configure } from '@storybook/react';
-
-// automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /.stories.js$/);
-function loadStories() {
-  req.keys().forEach((filename) => req(filename));
-}
-
-configure(loadStories, module);

package/.storybook/preview-head.html

@@ -1,33 +0,0 @@
-<style>
-
-
-  *, *:before, *:after {
-    box-sizing: border-box;
-    position: relative;
-  }
-
-  html {
-    font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 1.5;
-  }
-
-  body, html, #root {
-    margin: 0;
-    height: 100vh;
-    min-height: 100vh;
-    width: 100vw;
-  }
-
-  a {
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-  }
-
-  #root {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-
-</style>

package/.travis.yml

@@ -1,10 +0,0 @@
-language: node_js
-sudo: required
-dist: trusty
-node_js:
-- stable
-script:
-- npm test
-after_script:
-- npm run test:coverage
-- '[ "${TRAVIS_PULL_REQUEST}" = "false" ] && npm run demo:publish || false'

package/index.d.ts

@@ -1,53 +0,0 @@
-import * as Prefixer from 'inline-style-prefixer';
-import * as React from 'react';
-
-export type Size = string | number;
-
-export interface Props {
-    allowResize?: boolean;
-    className?: string;
-    primary?: 'first' | 'second';
-    minSize?: Size;
-    maxSize?: Size;
-    defaultSize?: Size;
-    size?: Size;
-    split?: 'vertical' | 'horizontal';
-    onDragStarted?: () => void;
-    onDragFinished?: () => void;
-    onChange?: (newSize: number) => void;
-    onResizerClick?: (event: MouseEvent) => void;
-    onResizerDoubleClick?: (event: MouseEvent) => void;
-    prefixer?: Prefixer;
-    style?: React.CSSProperties;
-    resizerStyle?: React.CSSProperties;
-    paneStyle?: React.CSSProperties;
-    pane1Style?: React.CSSProperties;
-    pane2Style?: React.CSSProperties;
-    resizerClassName?: string;
-    step?: number;
-}
-
-export interface State {
-    active: boolean;
-    resized: boolean;
-}
-
-declare class SplitPane extends React.Component<Props, State> {
-    constructor();
-
-    onMouseDown(event: MouseEvent): void;
-    
-    onTouchStart(event: TouchEvent): void;
-
-    onMouseMove(event: MouseEvent): void;
-
-    onTouchMove(event: TouchEvent): void;
-
-    onMouseUp(): void;
-
-    setSize(props: Props, state: State): void;
-
-    static defaultProps: Props;
-}
-
-export { SplitPane as default };

package/index.js

@@ -1,3 +0,0 @@
-var SplitPane = require('./lib/SplitPane');
-
-module.exports = SplitPane;