react-side-sheet-pro 0.1.2 → 0.1.4

package/dist/types/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/package.json

@@ -1,86 +1,82 @@
-{
-  "name": "react-side-sheet-pro",
-  "description": "A flexible React SideSheet component for displaying contextual information.",
-  "version": "0.1.2",
-  "license": "MIT",
-  "keywords": [
-    "react",
-    "react-component",
-    "modal",
-    "side-sheet",
-    "slide-sheet"
-  ],
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "jsnext:main": "dist/index.esm.js",
-  "browser:min": "dist/index.umd.min.js",
-  "browser": "dist/index.umd.js",
-  "typings": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "src",
-    "LICENSE"
-  ],
-  "engines": {
-    "node": ">=10"
-  },
-  "scripts": {
-    "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
-    "lint-fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'",
-    "prettier": "prettier ./src/** ./playground/src/** --write",
-    "build": "rollup -c",
-    "dev": "rollup -c -w"
-  },
-  "husky": {
-    "hooks": {
-      "pre-push": "npm run lint"
-    }
-  },
-  "repository": "git+https://github.com/richardDobron/react-side-sheet-pro.git",
-  "author": "Richard Dobroň",
-  "bugs": {
-    "url": "https://github.com/richardDobron/react-side-sheet-pro/issues"
-  },
-  "dependencies": {
-    "classnames": "^2.3.1",
-    "react-icons": "^4"
-  },
-  "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19",
-    "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.14.3",
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-proposal-class-properties": "^7.14.3",
-    "@babel/preset-env": "^7.14.3",
-    "@babel/preset-react": "^7.14.3",
-    "@babel/preset-typescript": "^7.16.7",
-    "@types/react": "^17.0.9",
-    "@types/react-dom": "^17.0.6",
-    "@typescript-eslint/eslint-plugin": "^2.24.0",
-    "@typescript-eslint/parser": "^2.24.0",
-    "@wessberg/rollup-plugin-ts": "^1.2.21",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-typescript-to-proptypes": "^1.3.2",
-    "eslint": "6.6.0",
-    "eslint-config-airbnb": "18.0.1",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jest": "^22.6.3",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.14.3",
-    "prettier": "^1.19.1",
-    "rollup": "^1.27.0",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-terser": "^5.1.2",
-    "ts-loader": "^6.2.1",
-    "typescript": "^3.9.3"
-  }
-}
+{
+  "name": "react-side-sheet-pro",
+  "description": "A flexible React SideSheet component for displaying contextual information.",
+  "version": "0.1.4",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "react-component",
+    "modal",
+    "side-sheet",
+    "slide-sheet"
+  ],
+  "main": "dist/index.js",
+  "typings": "index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
+    "lint-fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'",
+    "prettier": "prettier ./src/** ./playground/src/** --write",
+    "build": "babel --extensions \".ts,.tsx\" src --out-dir dist"
+  },
+  "husky": {
+    "hooks": {
+      "pre-push": "npm run lint"
+    }
+  },
+  "repository": "git+https://github.com/richardDobron/react-side-sheet-pro.git",
+  "author": "Richard Dobroň",
+  "bugs": {
+    "url": "https://github.com/richardDobron/react-side-sheet-pro/issues"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "classnames": "^2.3.1",
+    "react-icons": "^4"
+  },
+  "peerDependencies": {
+    "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19",
+    "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.3",
+    "@babel/core": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "^7.14.3",
+    "@babel/preset-env": "^7.14.3",
+    "@babel/preset-react": "^7.14.3",
+    "@babel/preset-typescript": "^7.16.7",
+    "@types/react": "^17.0.9",
+    "@types/react-dom": "^17.0.6",
+    "@typescript-eslint/eslint-plugin": "^2.24.0",
+    "@typescript-eslint/parser": "^2.24.0",
+    "@wessberg/rollup-plugin-ts": "^1.2.21",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-typescript-to-proptypes": "^1.3.2",
+    "eslint": "6.6.0",
+    "eslint-config-airbnb": "18.0.1",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jest": "^22.6.3",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.14.3",
+    "prettier": "^1.19.1",
+    "rollup": "^1.27.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^5.1.2",
+    "ts-loader": "^6.2.1",
+    "typescript": "^3.9.3"
+  }
+}

package/src/components/SideSheetHeader.tsx

@@ -1,14 +1,17 @@
 import React, { ReactNode } from 'react';
 import { HiX } from 'react-icons/hi';
+import classNames from 'classnames';
 
 export const SideSheetHeader: React.FC<{
   title: string;
   onClose?: () => void;
   actions?: ReactNode;
-}> = React.memo(({ title, onClose, actions }) => (
-  <header className="sidesheet-header">
+  className?: string;
+}> = React.memo(({ title, onClose, actions, className }) => (
+  <header className={classNames('sidesheet-header', className)}>
     {onClose && (
       <button
+        type="button"
         className="sidesheet-header-close sidesheet-header-btn"
         onClick={onClose}
       >

package/src/components/SideSheetProvider.tsx

@@ -1,105 +1,118 @@
-import React, {
-  createContext,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useReducer,
-  useRef,
-} from 'react';
-import { createPortal } from 'react-dom';
-import {
-  DEFAULT_OPTIONS,
-  DEFAULT_SHEET_OPTIONS,
-} from '../constants/defaultOptions';
-import {
-  SideElement,
-  SideOptions,
-  SideSheetContextValue,
-  SideSheetOptions,
-  SideStackItem,
-} from '../types';
-import { SideSheetContainer } from './SideSheetContainer';
-import { SideSheetReducer } from '../contexts/SideSheetReducer';
-
-export const SideSheetContext = createContext<SideSheetContextValue | null>(
-  null
-);
-
-export const SideSheetProvider: React.FC<{
-  children: ReactNode;
-  configuration?: Partial<SideSheetOptions>;
-}> = ({ children, configuration }) => {
-  const [stack, dispatch] = useReducer(SideSheetReducer, []);
-  const idRef = useRef(0);
-  const stackRef = useRef<SideStackItem[]>(stack);
-
-  useEffect(() => {
-    stackRef.current = stack;
-  }, [stack]);
-
-  const open = useCallback((element: SideElement, opts: SideOptions = {}) => {
-    const id = ++idRef.current;
-    const options = { ...DEFAULT_SHEET_OPTIONS, ...opts };
-    dispatch({
-      type: 'OPEN',
-      payload: { id, element, options, state: 'opening' },
-    });
-    setTimeout(() => {
-      dispatch({ type: 'SET_OPEN', id });
-      options.onOpen?.(id);
-    }, options.animationDuration);
-    return id;
-  }, []);
-
-  const close = useCallback(async (id: number | null) => {
-    const itemsToClose =
-      id === null
-        ? [...stackRef.current]
-        : stackRef.current.filter(i => i.id === id);
-
-    for (const item of itemsToClose) {
-      if (item.options.confirmBeforeClose) {
-        const confirmed = await item.options.confirmCallback(
-          item.options.confirmMessage
-        );
-        if (!confirmed) return;
-      }
-      item.options.onClose?.(item.id);
-    }
-    const duration =
-      itemsToClose[itemsToClose.length - 1]?.options.animationDuration;
-    dispatch({ type: 'CLOSE', id });
-    setTimeout(() => {
-      if (id === null) {
-        stackRef.current.forEach(item =>
-          dispatch({ type: 'REMOVE', id: item.id })
-        );
-      } else {
-        dispatch({ type: 'REMOVE', id: id! });
-      }
-    }, duration);
-  }, []);
-
-  const update = useCallback((id: number, options: Partial<SideOptions>) => {
-    dispatch({ type: 'UPDATE', id, options });
-  }, []);
-  const config = { ...DEFAULT_OPTIONS, ...configuration } as Required<
-    SideSheetOptions
-  >;
-
-  return (
-    <SideSheetContext.Provider value={{ open, close, update, config }}>
-      {children}
-      {createPortal(
-        <SideSheetContainer
-          stack={stack}
-          close={close}
-          open={open}
-          update={update}
-          config={config}
-        />,
-        document.body
-      )}
-    </SideSheetContext.Provider>
-  );
-};
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useReducer,
+  useRef,
+} from 'react';
+import { createPortal } from 'react-dom';
+import {
+  DEFAULT_OPTIONS,
+  DEFAULT_SHEET_OPTIONS,
+} from '../constants/defaultOptions';
+import {
+  SideElement,
+  SideOptions,
+  SideSheetContextValue,
+  SideSheetOptions,
+  SideStackItem,
+} from '../types';
+import { SideSheetContainer } from './SideSheetContainer';
+import { SideSheetReducer } from '../contexts/SideSheetReducer';
+
+export const SideSheetContext = createContext<SideSheetContextValue | null>(
+  null
+);
+
+export const SideSheetProvider: React.FC<{
+  children: ReactNode;
+  configuration?: Partial<SideSheetOptions>;
+}> = ({ children, configuration }) => {
+  const [stack, dispatch] = useReducer(SideSheetReducer, []);
+  const stackRef = useRef<SideStackItem[]>(stack);
+  const overflowRef = useRef('');
+  const idRef = useRef(0);
+
+  useEffect(() => {
+    stackRef.current = stack;
+  }, [stack]);
+
+  const open = useCallback((element: SideElement, opts: SideOptions = {}) => {
+    const id = ++idRef.current;
+    const options = { ...DEFAULT_SHEET_OPTIONS, ...opts };
+    if (!config.enableOverflow && stackRef.current.length === 0) {
+      overflowRef.current = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+    }
+    dispatch({
+      type: 'OPEN',
+      payload: { id, element, options, state: 'opening' },
+    });
+    setTimeout(() => {
+      dispatch({ type: 'SET_OPEN', id });
+      options.onOpen?.(id);
+    }, options.animationDuration);
+    return id;
+  }, []);
+
+  const close = useCallback(async (id: number | null) => {
+    const itemsToClose =
+      id === null
+        ? [...stackRef.current]
+        : stackRef.current.filter(i => i.id === id);
+
+    for (const item of itemsToClose) {
+      if (item.options.confirmBeforeClose) {
+        const confirmCallback =
+          item.options.confirmCallback ?? config.confirmCallback;
+        const confirmed = await confirmCallback(
+          item.options.confirmMessage ?? config.confirmMessage
+        );
+        if (!confirmed) return;
+      }
+      item.options.onClose?.(item.id);
+    }
+
+    if (
+        !config.enableOverflow &&
+        stackRef.current.length <= itemsToClose.length
+    ) {
+      document.body.style.overflow = overflowRef.current;
+    }
+
+    const duration =
+      itemsToClose[itemsToClose.length - 1]?.options.animationDuration;
+    dispatch({ type: 'CLOSE', id });
+    setTimeout(() => {
+      if (id === null) {
+        itemsToClose.forEach(item => dispatch({ type: 'REMOVE', id: item.id }));
+      } else {
+        dispatch({ type: 'REMOVE', id: id! });
+      }
+    }, duration);
+  }, []);
+
+  const update = useCallback((id: number, options: Partial<SideOptions>) => {
+    dispatch({ type: 'UPDATE', id, options });
+  }, []);
+  const config = { ...DEFAULT_OPTIONS, ...configuration } as Required<
+    SideSheetOptions
+  >;
+
+  return (
+    <SideSheetContext.Provider value={{ open, close, update, config }}>
+      {children}
+      {createPortal(
+        <SideSheetContainer
+          stack={stack}
+          close={close}
+          open={open}
+          update={update}
+          config={config}
+        />,
+        document.body
+      )}
+    </SideSheetContext.Provider>
+  );
+};

package/src/constants/defaultOptions.ts

@@ -1,22 +1,25 @@
-import { SideOptions, SideSheetOptions } from '../types';
-
-export const DEFAULT_OPTIONS: Required<SideSheetOptions> = {
-  side: 'right',
-  mountStrategy: 'all',
-};
-
-export const DEFAULT_SHEET_OPTIONS: Required<SideOptions> = {
-  width: 400,
-  className: '',
-  confirmBeforeClose: false,
-  confirmMessage: 'Are you sure you want to close?',
-  confirmCallback: async (msg: string) =>
-    typeof window !== 'undefined'
-      ? Promise.resolve(window.confirm(msg))
-      : Promise.resolve(true),
-  closeOnOverlayClick: true,
-  closeOnEsc: true,
-  animationDuration: 240,
-  onOpen: () => {},
-  onClose: () => {},
-};
+import { SideOptions, SideSheetOptions } from '../types';
+
+export const DEFAULT_OPTIONS: Required<SideSheetOptions> = {
+  side: 'right',
+  enableOverflow: false,
+  mountStrategy: 'all',
+  confirmMessage: 'Are you sure you want to close?',
+  confirmCallback: async (msg: string) =>
+    typeof window !== 'undefined'
+      ? Promise.resolve(window.confirm(msg))
+      : Promise.resolve(true),
+};
+
+export const DEFAULT_SHEET_OPTIONS: Required<SideOptions> = {
+  width: 400,
+  className: '',
+  confirmBeforeClose: false,
+  confirmMessage: null,
+  confirmCallback: null,
+  closeOnOverlayClick: true,
+  closeOnEsc: true,
+  animationDuration: 240,
+  onOpen: () => {},
+  onClose: () => {},
+};

package/src/types/index.ts

@@ -4,15 +4,18 @@ export type Sides = 'left' | 'right';
 
 export interface SideSheetOptions {
   side: Sides;
+  enableOverflow: boolean;
   mountStrategy: 'all' | 'top-only';
+  confirmMessage: string;
+  confirmCallback: (message: string) => Promise<boolean>;
 }
 
 export interface SideOptions {
   width?: number;
   className?: string;
   confirmBeforeClose?: boolean;
-  confirmMessage?: string;
-  confirmCallback?: (message: string) => Promise<boolean>;
+  confirmMessage?: string | null;
+  confirmCallback?: ((message: string) => Promise<boolean>) | null;
   closeOnOverlayClick?: boolean;
   closeOnEsc?: boolean;
   animationDuration?: number;