Merge branch 'main' into feat--add-className-prop

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+storybook-static/
 
 # Logs
 logs

.storybook/main.js

@@ -5,7 +5,11 @@ module.exports = {
     "../stories/**/*.stories.mdx",
     "../stories/**/*.stories.@(js|jsx|ts|tsx)",
   ],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "storybook-dark-mode",
+  ],
   webpackFinal: async (baseConfig, options) => {
     // Modify or replace config. Mutating the original reference object can cause unexpected bugs.
     const { module = {} } = baseConfig;

.storybook/preview.js

@@ -1,9 +1,34 @@
+import { themes } from "@storybook/theming";
+import { useDarkMode } from "storybook-dark-mode";
+
+export const decorators = [
+  (Story) => {
+    if (useDarkMode()) {
+      document.documentElement.style.setProperty(
+        "--card-background-color",
+        "rgb(30,30,30)"
+      );
+    } else {
+      document.documentElement.style.setProperty(
+        "--card-background-color",
+        "rgb(255,255,255)"
+      );
+    }
+
+    return <Story />;
+  },
+];
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
+  backgrounds: { disable: true },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
+  darkMode: {
+    stylePreview: true,
+  },
 };

CHANGELOG.md

@@ -2,6 +2,45 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.8.0](https://github.com/johnwalley/allotment/compare/v1.7.0...v1.8.0) (2022-02-08)
+
+### Features
+
+- add onReset callback ([#154](https://github.com/johnwalley/allotment/issues/154)) ([904a8e6](https://github.com/johnwalley/allotment/commit/904a8e6acbf3692b4f2cb7fa102799872c70243d))
+- add resize method to component instance ([#121](https://github.com/johnwalley/allotment/issues/121)) ([d25bd91](https://github.com/johnwalley/allotment/commit/d25bd91bde05c33bdebf586868a38a03056d8d57))
+- add visible prop to Pane ([#137](https://github.com/johnwalley/allotment/issues/137)) ([3b0542c](https://github.com/johnwalley/allotment/commit/3b0542c24165c0cb054ee12a682c1b153a2de5ad))
+
+### Bug Fixes
+
+- **deps:** update dependency @svgr/webpack to v6.2.0 ([#135](https://github.com/johnwalley/allotment/issues/135)) ([40cbd8f](https://github.com/johnwalley/allotment/commit/40cbd8f0891b5fb63539a1df2ae43667868f87de))
+- **deps:** update dependency @svgr/webpack to v6.2.1 ([#145](https://github.com/johnwalley/allotment/issues/145)) ([016d504](https://github.com/johnwalley/allotment/commit/016d504bcdcc505f705819c5ce349583700db185))
+
+## [1.7.0](https://github.com/johnwalley/allotment/compare/v1.6.0...v1.7.0) (2022-01-22)
+
+### Features
+
+- separator color which works better on light and dark backgrounds ([a769262](https://github.com/johnwalley/allotment/commit/a769262de79658cda4866edbafe4ffb8e5f0773a))
+
+### Bug Fixes
+
+- call cancel hover after pointer up ([#129](https://github.com/johnwalley/allotment/issues/129)) ([b9a6e5f](https://github.com/johnwalley/allotment/commit/b9a6e5f10f89298e9935f14c9d52f63ec8527e2c))
+
+### [1.6.0](https://github.com/johnwalley/allotment/compare/v1.5.2...v1.6.0) (2022-01-16)
+
+### Bug Fixes
+
+- allow changing order of panes ([cc38223](https://github.com/johnwalley/allotment/commit/cc38223e3f4315f61a50126630170c25ab8b5e1f))
+
+### [1.5.2](https://github.com/johnwalley/allotment/compare/v1.5.1...v1.5.2) (2022-01-15)
+
+This release was published without any updates and should be skipped.
+
+### [1.5.1](https://github.com/johnwalley/allotment/compare/v1.5.0...v1.5.1) (2022-01-02)
+
+### Bug Fixes
+
+- set css custom variables if touch device detected ([2eb8c38](https://github.com/johnwalley/allotment/commit/2eb8c387009f013bd0440b83f4a41a53277c76ff))
+
 ## [1.5.0](https://github.com/johnwalley/allotment/compare/v1.4.2...v1.5.0) (2021-12-26)
 
 ### Features

README.md

@@ -63,7 +63,7 @@ export const App = () => (
 If you want more control over the behaviour of the individual panes you can use the `Allotment.Pane` component. This includes setting the minimum and maximum size of a pane, as well as whether to enable snapping behaviour.
 
 ```jsx
-<Allotment >
+<Allotment>
   <Allotment.Pane minSize={200}>
     <ComponentA>
   </Allotment.Pane>
@@ -108,6 +108,10 @@ Direction to split. If true then the panes will be stacked vertically, otherwise
 
 Callback that is fired when the pane sizes change (usually on drag). Recommended to add a debounce function to rate limit the callback. Passed an array of numbers.
 
+### onReset
+
+Callback that is fired whenever the user double clicks a sash.
+
 ## Allotment.Pane props
 
 ### maxSize
@@ -122,6 +126,10 @@ Minimum size of this pane. Overrides `minSize` set on parent component.
 
 Enable snap to zero for this pane. Overrides `snap` set on parent component.
 
+### visible
+
+Whether the pane should be visible.
+
 ## Styling
 
 Allotment uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for styling.
@@ -138,7 +146,7 @@ To control the feedback area size of the dragging area between panes you can cal
 
 ### Programmatic control
 
-You can use a ref to get access to the Allotment component instance and call its reset method manually:
+You can use a ref to get access to the Allotment component instance and call its reset and resize methods manually:
 
 ```jsx
 const ref = React.useRef(ref);
@@ -152,6 +160,13 @@ return (
     >
       Reset
     </button>
+    <button
+      onClick={() => {
+        ref.current.resize([100, 200]);
+      }}
+    >
+      Resize
+    </button>
     <Allotment ref={ref}>
       <div />
       <div />
@@ -166,6 +181,16 @@ return (
 
 The Allotment component takes its width and height from the element which contains it. It does not come with an explicit width or height out of the box. It's easy to end up with a div of height zero by accident. For example, adding allotment to a brand new Create React App project without setting a height on a containing div won't work because the default root div itself has no height.
 
+You should also check that the css has been imported/included, for example at the root of your application:
+
+```jsx
+import "allotment/dist/style.css";
+```
+
+### My content is larger than the containing pane. How can I let the user scroll?
+
+The simplest approach is place your content inside a new div with width and height `100%` and overflow `auto`. This div will have the same dimensions as the pane it's inside and if its content overflows the browser will provide scrolling behaviour.
+
 ### Next.js
 
 If you get an error when importing allotment in a Next.js project consider [not including the module server-side](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr). Allotment currently only works in a browser. It might be possible to produce sensible results server-side in the future so create an issue requesting this if interested.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "allotment",
-  "version": "1.5.0",
+  "version": "1.8.0",
   "description": "React split-pane component",
   "exports": {
     ".": "./dist/modern.js",
@@ -31,46 +31,47 @@
     "use-resize-observer": "^8.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.16.7",
+    "@babel/core": "7.17.0",
     "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/plugin-proposal-private-methods": "7.16.7",
+    "@babel/plugin-proposal-private-methods": "7.16.11",
     "@babel/plugin-proposal-private-property-in-object": "7.16.7",
-    "@babel/plugin-transform-runtime": "7.16.7",
-    "@babel/preset-env": "7.16.7",
+    "@babel/plugin-transform-runtime": "7.17.0",
+    "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
     "@babel/preset-typescript": "7.16.7",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "21.0.1",
-    "@rollup/plugin-node-resolve": "13.1.2",
-    "@storybook/addon-actions": "6.4.9",
-    "@storybook/addon-essentials": "6.4.9",
-    "@storybook/addon-links": "6.4.9",
-    "@storybook/react": "6.4.9",
-    "@testing-library/dom": "8.11.1",
+    "@rollup/plugin-node-resolve": "13.1.3",
+    "@storybook/addon-actions": "6.4.18",
+    "@storybook/addon-essentials": "6.4.18",
+    "@storybook/addon-links": "6.4.18",
+    "@storybook/react": "6.4.18",
+    "@testing-library/dom": "8.11.3",
     "@types/jest": "27.4.0",
     "@types/lodash.clamp": "4.0.6",
     "@types/lodash.debounce": "4.0.6",
-    "@typescript-eslint/parser": "5.8.1",
-    "babel-jest": "27.4.5",
+    "@typescript-eslint/parser": "5.11.0",
+    "babel-jest": "27.5.0",
     "babel-loader": "8.2.3",
-    "eslint": "8.5.0",
+    "eslint": "8.8.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-react-hooks": "4.3.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
     "husky": "7.0.4",
-    "jest": "27.4.5",
-    "postcss": "8.4.5",
+    "jest": "27.5.0",
+    "postcss": "8.4.6",
     "prettier": "2.5.1",
     "pretty-quick": "3.1.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "rollup": "2.62.0",
+    "rollup": "2.67.1",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-terser": "7.0.2",
     "standard-version": "9.3.2",
-    "ts-jest": "27.1.2",
-    "ts-node": "10.4.0",
-    "typescript": "4.5.4"
+    "storybook-dark-mode": "1.0.8",
+    "ts-jest": "27.1.3",
+    "ts-node": "10.5.0",
+    "typescript": "4.5.5"
   },
   "peerDependencies": {
     "react": "^17.0.0",

src/allotment.module.css

@@ -1,5 +1,5 @@
 :root {
-  --separator-border: #838383;
+  --separator-border: rgba(128, 128, 128, 0.35);
 }
 
 .splitView {