react-side-sheet-pro 0.1.3 → 0.1.5

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/{dist/index.d.ts → index.d.ts}

@@ -3,14 +3,17 @@ import { ReactNode } from "react";
 type Sides = "left" | "right";
 interface SideSheetOptions {
     side: Sides;
+    enableOverflow: boolean;
     mountStrategy: "all" | "top-only";
+    confirmMessage: string;
+    confirmCallback: (message: string) => Promise<boolean>;
 }
 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;
@@ -47,6 +50,7 @@ declare const SideSheet: {
         title: string;
         onClose?: (() => void) | undefined;
         actions?: import("react").ReactNode;
+        className?: string | undefined;
     }>;
     Content: import("react").FC<{
         children: import("react").ReactNode;

package/package.json

@@ -1,86 +1,77 @@
-{
-  "name": "react-side-sheet-pro",
-  "description": "A flexible React SideSheet component for displaying contextual information.",
-  "version": "0.1.3",
-  "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.5",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "react-component",
+    "modal",
+    "side-sheet",
+    "slide-sheet"
+  ],
+  "main": "dist/index.js",
+  "typings": "index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "index.d.ts",
+    "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:js": "babel --extensions \".ts,.tsx\" src --out-dir dist",
+    "build:css": "cpx \"src/**/*.css\" dist",
+    "build": "npm run build:js && npm run build:css"
+  },
+  "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",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-typescript-to-proptypes": "^1.3.2",
+    "cpx": "^1.5.0",
+    "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",
+    "ts-loader": "^6.2.1",
+    "typescript": "^3.9.3"
+  }
+}

package/src/components/SideSheetProvider.tsx

@@ -1,107 +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 confirmCallback =
-          item.options.confirmCallback ?? config.confirmCallback;
-        const confirmed = await confirmCallback(
-          item.options.confirmMessage ?? config.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

@@ -2,12 +2,13 @@ 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),
+    typeof window !== 'undefined'
+      ? Promise.resolve(window.confirm(msg))
+      : Promise.resolve(true),
 };
 
 export const DEFAULT_SHEET_OPTIONS: Required<SideOptions> = {

package/src/types/index.ts

@@ -4,6 +4,7 @@ export type Sides = 'left' | 'right';
 
 export interface SideSheetOptions {
   side: Sides;
+  enableOverflow: boolean;
   mountStrategy: 'all' | 'top-only';
   confirmMessage: string;
   confirmCallback: (message: string) => Promise<boolean>;

package/dist/index.esm.d.ts

@@ -1,60 +0,0 @@
-/// <reference types="react" />
-import { ReactNode } from "react";
-type Sides = "left" | "right";
-interface SideSheetOptions {
-    side: Sides;
-    mountStrategy: "all" | "top-only";
-}
-interface SideOptions {
-    width?: number;
-    className?: string;
-    confirmBeforeClose?: boolean;
-    confirmMessage?: string;
-    confirmCallback?: (message: string) => Promise<boolean>;
-    closeOnOverlayClick?: boolean;
-    closeOnEsc?: boolean;
-    animationDuration?: number;
-    onOpen?: (id: number) => void;
-    onClose?: (id: number) => void;
-}
-interface SideElementProps {
-    sideId: number;
-    close: (id: number | null) => Promise<void>;
-    open: (element: SideElement, options?: SideOptions) => number;
-    update: (id: number, options: SideOptions) => void;
-    options: SideOptions;
-}
-type SideElement = (props: SideElementProps) => ReactNode;
-interface SideStackItem {
-    id: number;
-    element: SideElement;
-    options: Required<SideOptions>;
-    state: "opening" | "open" | "closing";
-}
-interface SideSheetContextValue {
-    open: (el: SideElement, opts?: SideOptions) => number;
-    close: (id: number | null) => Promise<void>;
-    update: (id: number, opts: SideOptions) => void;
-    config: SideSheetOptions;
-}
-declare const useSideSheet: () => SideSheetContextValue;
-declare const SideSheet: {
-    Provider: import("react").FC<{
-        children: import("react").ReactNode;
-        configuration?: Partial<SideSheetOptions> | undefined;
-    }>;
-    Header: import("react").FC<{
-        title: string;
-        onClose?: (() => void) | undefined;
-        actions?: import("react").ReactNode;
-    }>;
-    Content: import("react").FC<{
-        children: import("react").ReactNode;
-        className?: string | undefined;
-    }>;
-    Footer: import("react").FC<{
-        children: import("react").ReactNode;
-        className?: string | undefined;
-    }>;
-};
-export { useSideSheet, Sides, SideSheetOptions, SideOptions, SideElementProps, SideElement, SideStackItem, SideSheetContextValue, SideSheet };