react-pure-modal 2.2.7 → 3.0.0

package/README.md

@@ -4,9 +4,18 @@
 
 React pure modal is a simplest way to create dialog on your site.
 
-- Very small (less than 4Kb)
-- Mobile friendly
-- Without dependencies
+## Features
+
+- [x] Lightweight, no external dependencies, 4.1Kb GZip including CSS
+- [x] Easy-to-swap modal components; independent but designed to work together
+- [x] Close only the current modal on ESC or backdrop
+- [x] Easy change modal proportions
+- [x] Easy change modal appearance with variables
+- [x] Dynamic width based on content
+- [x] Stop background scrolling when focused in modal
+- [x] Mobile-friendly safe areas
+- [x] Smooth animations
+- [ ] Mobile-friendly gestures
 
 ## Demo
 
@@ -19,103 +28,110 @@ https://memcrab.github.io/react-pure-modal/
 ## Usage
 
 ```jsx
-import PureModal from 'react-pure-modal';
-import 'react-pure-modal/dist/react-pure-modal.min.css';
-
-const [modal, setModal] = useState(false);
-
-<PureModal
-  header="Your header"
-  footer={
-    <div>
-      <button>Cancel</button>
-      <button>Save</button>
-    </div>
-  }
-  isOpen={modal}
-  closeButton="close"
-  closeButtonPosition="bottom"
-  onClose={() => {
-    setModal(false);
-    return true;
-  }}
+<Modal
+  isOpen={isOpen}
+  onClose={onClose}
+  closeOnBackdropClick
 >
-  <p>Your content</p>
-</PureModal>;
+  <Modal.Close />
+  <Modal.Header>
+    <h2>Second Modal</h2>
+  </Modal.Header>
+  <Modal.Content>
+    <h1>some main content</h1>
+    <p>some content here</p>
+  </Modal.Content>
+  <Modal.Footer>footer content</Modal.Footer>
+</Modal>
 ```
 
-And open with
-
-`<button className="button" onClick={() => setModal(true)}>Open simple modal</button>`
-
 ## Options
 
-#### replace `boolean` (default: false)
-
-Replace all inner markup with Component children
-
-#### isOpen: `boolean`
-
-Control modal state from parent component
-
-#### scrollable: `boolean` (default: true)
-
-You can disable scroll in modal body
-
-#### draggable: `boolean` (default: false)
-
-You can drag a modal window
+- `isOpen` (boolean, required) - controls whether the modal is rendered.
+- `onClose` (() => boolean | void) - called when the user clicks the close button, presses ESC, or (optionally) clicks the backdrop; set `isOpen` to `false` inside it.
+- `closeOnBackdropClick` (boolean) - if `true`, clicking the backdrop calls `onClose` (default is `false`).
+- `style` (React.CSSProperties) - inline styles applied to the backdrop element; use this to set CSS custom properties (listed below) or to tweak things like `zIndex`.
+- `children` - compose the modal from the provided compounds: `Modal.Close`, `Modal.Header`, `Modal.Content`, and `Modal.Footer`.
+
+## CSS Variables
+
+All variables can be provided through the `style` prop (e.g. `style={{ "--radius": "16px" }}`).
+
+- `--radius` - border radius of the modal container (mobile uses `12px 12px 0 0`).
+- `--aspect-ratio` - forced aspect ratio for the modal grid.
+- `--backdrop-blur` - available for custom use if you want to reference a blur amount.
+- `--backdrop-filter` - value for the backdrop `backdrop-filter` property.
+- `--backdrop-color` - background color of the overlay.
+- `--box-shadow` - shadow applied to the modal panel.
+- `--max-width` - maximum width of the modal.
+- `--max-height` - maximum height of the modal.
+- `--min-width` - minimum width of the modal.
+- `--background` - modal surface background.
+- `--background-panels` - background for header and footer panels.
+- `--contrast-color` - high-contrast color derived from `--background-panels` (used to build borders and hover states); override to steer the automatic mix.
+- `--z-index` - base stacking level for the backdrop (panel uses `+1`).
+- `--top-content-padding` / `--bottom-content-padding` - vertical padding for the content area.
+- `--top-header-padding` / `--bottom-header-padding` - vertical padding for the header.
+- `--top-footer-padding` / `--bottom-footer-padding` - vertical padding for the footer.
+- `--left-padding` / `--right-padding` - horizontal padding shared across sections.
+- `--dividers-color` - border tone mixed from `--background-panels` and `--contrast-color` by default; override to force a specific divider color.
+- `--border` - border applied to header, footer, and close button; defaults to `1px solid var(--dividers-color)`.
 
-#### onClose: `Function`
 
-Handle modal closing. Should change isOpen to false
+## Changelog (latest on top)
 
-#### className: `string`
+- Migration to compound components after 7 years with previous API
+- Removed double calling onClose on popup closing and unmount. onClose will be called only on: close button, backdrop, esc click
+- Drag and drop
+- fix bug in firefox and safari with modal position
+- set width as atribute
+- new default aligning to the screen center!
+- prevent of modal closing if ESC pressed in editable element
+- now with minified css!
+- styles are more impressive now, good mobile support
+- now scrollable can be false
+- remove dependencies, rewrite open and close logic, fix linting
+- new header logic and breaking classes changes
 
-ClassName for modal DOM element, can be used for set modal width or change behaviour on mobile devices
 
-#### width: `string` (example '200px')
+## Development
 
-Width in pixels, em's, vw etc
+Install the dependencies:
 
-#### header: `JSX.Element | string`
+```bash
+npm install
+```
 
-Modal heading, doesn't disabled close button
 
-#### footer: `JSX.Element | string`
+## Approach Details
 
-Place here your actions
+You can't use css `fixed` positioning because it stops using any nested modals. Modal nesting is well known bad UX pattern, but still sometimes in very rare cases you really need that.
 
-#### closeButton: `(JSX.Element | string)`
+We can't use sticky, because scrollbar appears over the sticky elements, which looks weird
 
-Content of your closing button
+HTML dialog tag can't be used due to lack of nesting and bad imperative interface. Like backdrop will be shown only when you open it with JS API `openModal()`, so no SSR support.
 
-#### closeButtonPosition: `string`
+HTML popover can't be used due to low support accross browsers.
 
-Place closing button under your modal or inside header. Allowed options: 'header' | 'bottom'
+## Get started
 
-#### portal: `boolean` (default: false)
+Build the library:
 
-Creates React.Portal
+```bash
+pnpm build
+```
 
-## Changelog (latest on top)
+Build the library in watch mode:
 
-- Removed double calling onClose on popup closing and unmount. onClose will be called only on: close button, backdrop, esc click
-- Drag and drop
-- fix bug in firefox and safari with modal position
-- set width as atribute
-- new default aligning to the screen center!
-- prevent of modal closing if ESC pressed in editable element
-- now with minified css!
-- styles are more impressive now, good mobile support
-- now scrollable can be false
-- remove dependencies, rewrite open and close logic, fix linting
-- new header logic and breaking classes changes
+```bash
+pnpm dev
+```
 
-## Developing
+## Publishing a new version
 
-- `npm install`
-- `npm run webpack:dev -- --watch`
-- `npm run webpack:prod -- --watch`
-- `npm run test:dev`
-- Open `index.html` from examples
+1. Bump the package version and rebuild: `npm version <patch|minor|major>` then `npm run build`; commit the updated files (including `dist`) and push to `master`/`main`.
+2. Label the merged PRs to drive the next draft version: use `breaking`/`major` for a major bump (e.g. 3.0.0), `feature`/`enhancement` for minor, and `fix`/`bug`/`chore` for patch; Release Drafter uses these labels to compute the `vX.Y.Z` it suggests.
+3. Wait for the Release Drafter workflow to refresh the draft release on GitHub (it runs on pushes to the default branch).
+4. Open the draft release in the GitHub Releases page, review the generated notes, set the tag name to match the new version (e.g. `v3.0.1`), and publish the release.
+5. Publishing the release triggers the `Node.js Package` workflow to publish to npm using the `NPM_TOKEN` repository secret; verify that secret is configured.
+6. If you ever need to publish locally instead, run `npm run build` followed by `npm publish --access public` with `NPM_TOKEN` available in your environment.

package/package.json

@@ -1,73 +1,48 @@
 {
   "name": "react-pure-modal",
-  "version": "2.2.7",
-  "description": "React modal",
-  "main": "dist/react-pure-modal.min.js",
-  "types": "dist/react-pure-modal.d.ts",
-  "scripts": {
-    "clean": "rimraf dist",
-    "build": "npm run clean && tsc && NODE_ENV=production npm run webpack:prod && npm run webpack:dev",
-    "webpack:dev": "webpack --config webpack.config.dev.js",
-    "webpack:prod": "webpack --config webpack.config.js",
-    "test": "jest --json",
-    "test-ci": "jest --ci",
-    "test:dev": "jest --watch"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/max-mykhailenko/react-pure-modal.git"
+  "version": "3.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
   },
-  "keywords": [
-    "react",
-    "modal",
-    "dialog"
+  "sideEffects": [
+    "*.css",
+    "*.module.css",
+    "**/*.css"
   ],
-  "author": "Max Mykhailenko",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/max-mykhailenko/react-pure-modal/issues"
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "storybook": "npx storybook dev",
+    "storybook:build": "storybook build -o storybook-static",
+    "storybook:deploy": "npm run storybook:build"
   },
-  "homepage": "https://github.com/max-mykhailenko/react-pure-modal#readme",
   "devDependencies": {
-    "@babel/core": "7.22.1",
-    "@babel/plugin-proposal-class-properties": "7.10.4",
-    "@babel/plugin-proposal-optional-chaining": "7.11.0",
-    "@babel/preset-env": "7.11.0",
-    "@babel/preset-react": "7.10.4",
-    "@babel/preset-typescript": "7.10.4",
-    "@types/node": "^15.14.1",
-    "@types/react": "16.9.48",
-    "@types/react-dom": "16.9.9",
-    "autoprefixer": "9.8.6",
-    "babel-eslint": "10.1.0",
-    "babel-jest": "26.3.0",
-    "babel-loader": "8.1.0",
-    "css-loader": "4.2.2",
-    "css-minimizer-webpack-plugin": "1.1.2",
-    "eslint": "7.7.0",
-    "eslint-config-airbnb": "18.2.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsx-a11y": "6.3.1",
-    "eslint-plugin-react": "7.20.6",
-    "jest": "26.4.2",
-    "mini-css-extract-plugin": "0.11.0",
-    "postcss-csso": "4.0.0",
-    "postcss-loader": "3.0.0",
-    "prettier": "2.1.1",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-test-renderer": "16.13.1",
-    "rimraf": "3.0.2",
-    "style-loader": "1.2.1",
-    "terser-webpack-plugin": "4.1.0",
-    "typescript": "4.8.2",
-    "webpack": "5.85.0",
-    "webpack-cli": "5.1.3",
-    "webpack-dev-server": "3.11.0",
-    "yargs": "15.4.1"
+    "@biomejs/biome": "2.2.5",
+    "@rsbuild/core": "1.5.13",
+    "@rsbuild/plugin-react": "^1.4.1",
+    "@rslib/core": "^0.15.0",
+    "@storybook/addon-docs": "^10.1.0",
+    "@storybook/addon-onboarding": "^10.1.0",
+    "@storybook/react": "^10.1.0",
+    "@types/react": "^19.1.15",
+    "@types/react-dom": "19.2.0",
+    "react": "^19.1.1",
+    "storybook": "^10.1.0",
+    "storybook-addon-rslib": "^3.0.0",
+    "storybook-react-rsbuild": "^3.0.0",
+    "typescript": "^5.9.2",
+    "typescript-plugin-css-modules": "5.2.0"
   },
   "peerDependencies": {
-    "react": "^15.3.0 || ^16.0 || ^17.0 || ^18.0",
-    "react-dom": "^15.3.0 || ^16.0 || ^17.0 || ^18.0"
+    "react": "^18.0 || ^19.0",
+    "react-dom": "^18.0 || ^19.0"
   }
 }

package/.babelrc.js

@@ -1,12 +0,0 @@
-module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        targets: { chrome: 70 },
-      },
-    ],
-    '@babel/preset-react',
-    '@babel/preset-typescript',
-  ],
-};

package/.eslintrc

@@ -1,22 +0,0 @@
-{
-  "extends": "airbnb",
-  "parser": "babel-eslint",
-  "env": {
-    "browser": true,
-    "node": true,
-    "jasmine": true
-  },
-  "rules" : {
-    "new-cap": 0,
-    "no-case-declarations": 0,
-    "no-nested-ternary": 0,
-    "no-underscore-dangle": 0,
-    "import/no-unresolved": 0,
-    "import/extensions": 0,
-    "react/jsx-filename-extension": 0,
-    "react/forbid-prop-types": 1,
-    "jsx-a11y/label-has-for": 1,
-    "jsx-a11y/no-static-element-interactions": 1,
-    "no-plusplus": 0
-  }
-}

package/.github/release-drafter-config.yml

@@ -1,20 +0,0 @@
-name-template: 'v$RESOLVED_VERSION 🌈'
-tag-template: 'v$RESOLVED_VERSION'
-categories:
-  - title: '🚀 Features'
-    labels:
-      - 'feature'
-      - 'enhancement'
-  - title: '🐛 Bug Fixes'
-    labels:
-      - 'fix'
-      - 'bugfix'
-      - 'bug'
-  - title: '🧰 Maintenance'
-    label: 'chore'
-change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
-change-title-escapes: '\<*_&'
-template: |
-  ## Changes
-
-  $CHANGES

package/.github/workflows/build.yml

@@ -1,24 +0,0 @@
-name: build dist and example
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  update_dist:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          ref: ${{ github.head_ref }}
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 18
-      - run: npm ci
-      - run: npm run build
-
-      - uses: stefanzweifel/git-auto-commit-action@v4
-        with:
-          commit_message: Apply automatic changes
-          # file_pattern: src/*.js dist/*.js dist/*.css example/* index.html

package/.github/workflows/npm-publish.yml

@@ -1,22 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-
-name: Node.js Package
-
-on:
-  release:
-    types: [released]
-
-jobs:
-  publish-npm:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12
-          registry-url: https://registry.npmjs.org/
-      - run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.github/workflows/release-drafter.yml

@@ -1,16 +0,0 @@
-name: Release Drafter
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  update_release_draft:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: release-drafter/release-drafter@v5
-        with:
-          config-name: release-drafter-config.yml
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.prettierrc

@@ -1,19 +0,0 @@
-{
-  "trailingComma": "all",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 100,
-  "useTabs": false,
-  "bracketSpacing": true,
-  "jsxBracketSameLine": false,
-  "arrowParens": "avoid",
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js"],
-      "options": {
-        "parser": "typescript"
-      }
-    }
-  ]
-}

package/.travis.yml

@@ -1,16 +0,0 @@
-language: node_js
-node_js:
-  - '12'
-before_script: npm run webpack:dev && npm run webpack:prod
-cache:
-  directories:
-    - node_modules
-script:
-  - npm run test-ci
-deploy:
-  provider: npm
-  email: max.mykhailenko@gmail.com
-  on:
-    tags: true
-    repo: memCrab/react-pure-modal
-    branch: master

package/__tests__/__snapshots__/react-pure-modal-test.js.snap

@@ -1,92 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Should be closed 1`] = `null`;
-
-exports[`Should contain width attribute 1`] = `
-<div
-  className="pure-modal-backdrop"
-  onMouseDown={[Function]}
->
-  <div
-    className="pure-modal 0.5"
-    style={
-      Object {
-        "transform": "translate(0px, 0px)",
-        "transition": "none",
-        "width": "400px",
-      }
-    }
-  >
-    <span>
-      Some content of modal
-    </span>
-  </div>
-</div>
-`;
-
-exports[`Should show content 1`] = `
-<div
-  className="pure-modal-backdrop"
-  onMouseDown={[Function]}
->
-  <div
-    className="pure-modal 0.5"
-    style={
-      Object {
-        "transform": "translate(0px, 0px)",
-        "transition": "none",
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="panel panel-default "
-    >
-      <div
-        className="panel-heading"
-      />
-      <div
-        className="panel-body scrollable"
-      >
-        <span>
-          Some content of modal
-        </span>
-      </div>
-      <div
-        className="close"
-        onClick={[Function]}
-        style={
-          Object {
-            "margin": "",
-            "position": "absolute",
-          }
-        }
-      >
-        ×
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Should show only content 1`] = `
-<div
-  className="pure-modal-backdrop"
-  onMouseDown={[Function]}
->
-  <div
-    className="pure-modal 0.5"
-    style={
-      Object {
-        "transform": "translate(0px, 0px)",
-        "transition": "none",
-        "width": undefined,
-      }
-    }
-  >
-    <span>
-      Some content of modal
-    </span>
-  </div>
-</div>
-`;

package/__tests__/react-pure-modal-test.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import Modal from '../dist/react-pure-modal.min.js';
-import renderer from 'react-test-renderer';
-
-const mockMath = Object.create(global.Math);
-mockMath.random = () => 0.5;
-global.Math = mockMath;
-
-it('Should be null without props', () => {
-  const component = renderer.create(<Modal />);
-  expect(component.toJSON()).toBeNull();
-});
-
-it('Should be closed', () => {
-  const component = renderer.create(<Modal isOpen={false} />);
-  expect(component.toJSON()).toMatchSnapshot();
-});
-
-it('Should show content', () => {
-  const component = renderer.create(
-    <Modal isOpen>
-      <span>Some content of modal</span>
-    </Modal>
-  );
-  expect(component.toJSON()).toMatchSnapshot();
-});
-
-it('Should show only content', () => {
-  const component = renderer.create(
-    <Modal replace isOpen>
-      <span>Some content of modal</span>
-    </Modal>
-  );
-  expect(component.toJSON()).toMatchSnapshot();
-});
-
-it('Should contain width attribute', () => {
-  const component = renderer.create(
-    <Modal replace width="400px" isOpen>
-      <span>Some content of modal</span>
-    </Modal>
-  );
-  expect(component.toJSON()).toMatchSnapshot();
-});

package/dist/pure-modal-content.d.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-import type { MouseOrTouch } from './types';
-declare type Props = {
-    replace: boolean;
-    children: JSX.Element;
-    onDragStart?: (event: MouseOrTouch) => unknown;
-    onDragEnd?: (event: MouseOrTouch) => unknown;
-    onClose?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    bodyClass?: string;
-    header?: JSX.Element | string;
-    footer?: JSX.Element | string;
-    closeButton: JSX.Element | string;
-    closeButtonPosition: string;
-    draggable: boolean;
-};
-declare function PureModalContent(props: Props): JSX.Element;
-declare namespace PureModalContent {
-    var defaultProps: {
-        closeButton: string;
-        closeButtonPosition: string;
-        replace: boolean;
-        draggable: boolean;
-    };
-}
-export default PureModalContent;

package/dist/react-pure-modal.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import './react-pure-modal.css';
-declare type Props = {
-    children: JSX.Element;
-    replace?: boolean;
-    className?: string;
-    header?: JSX.Element | string;
-    footer?: JSX.Element | string;
-    scrollable?: boolean;
-    draggable?: boolean;
-    width?: string;
-    isOpen?: boolean;
-    onClose?: Function;
-    closeButton?: JSX.Element | string;
-    closeButtonPosition?: string;
-    portal?: boolean;
-};
-declare function PureModal(props: Props): JSX.Element | null;
-declare const _default: React.MemoExoticComponent<typeof PureModal>;
-export default _default;