react-side-sheet-pro 0.1.3 → 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.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.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/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.css

@@ -1,191 +0,0 @@
-.sidesheet-overlay {
-  opacity: 0.3;
-  transition: all 0.4s;
-  background: #000;
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  visibility: visible;
-  z-index: 10000;
-}
-
-.sidesheet-right {
-  right: 0;
-  transform: translateX(100%);
-}
-
-.sidesheet-left {
-  left: 0;
-  transform: translateX(-100%);
-}
-
-.sidesheet-right.sidesheet-animation-open {
-  animation: sidesheet-open-right 240ms cubic-bezier(0, 0, 0.3, 1);
-}
-
-.sidesheet-left.sidesheet-animation-open {
-  animation: sidesheet-open-left 240ms cubic-bezier(0, 0, 0.3, 1);
-}
-
-.sidesheet.sidesheet-animation-open {
-  transform: translateX(0);
-}
-
-.sidesheet-right.sidesheet-animation-closing {
-  animation: sidesheet-close-right 240ms cubic-bezier(0, 0, 0.3, 1);
-}
-
-.sidesheet-left.sidesheet-animation-closing {
-  animation: sidesheet-close-left 240ms cubic-bezier(0, 0, 0.3, 1);
-}
-
-@keyframes sidesheet-open-right {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes sidesheet-close-right {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes sidesheet-open-left {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes sidesheet-close-left {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-100%);
-  }
-}
-
-.sidesheet {
-  flex-direction: column;
-  display: flex;
-  flex-wrap: nowrap;
-  background: #f1f3f4;
-  bottom: 0;
-  right: 0;
-  max-width: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: fixed;
-  z-index: 10000;
-  top: 0;
-  width: 100%;
-  box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.2), 0 0 24px 2px rgba(0, 0, 0, 0.14),
-    0 0 30px 5px rgba(0, 0, 0, 0.12);
-  transition: transform 0.3s ease, width 0.3s ease;
-}
-
-.sheet-white {
-  background: #fff;
-}
-
-.sidesheet-header .sidesheet-header-btn {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 7px;
-}
-
-.sidesheet-header {
-  padding: 12px;
-  gap: 16px;
-  border-bottom: 1px solid #dadce0;
-  background: #fff;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.sidesheet-header svg {
-  width: 24px;
-  height: 24px;
-  display: block;
-}
-
-.sidesheet-header .sidesheet-header-btn {
-  border-radius: 50%;
-  height: 40px;
-  line-height: 40px;
-  align-items: center;
-  width: 40px;
-  justify-content: center;
-  display: flex;
-  opacity: 0.8;
-}
-
-.sidesheet-header .sidesheet-header-btn:hover {
-  opacity: 1;
-}
-
-.sidesheet-header .sidesheet-header-btn:focus {
-  background-color: rgba(64, 64, 64, 0.12);
-}
-
-.sidesheet-header-close:hover {
-  cursor: pointer;
-}
-
-.sidesheet-header-title {
-  font-size: 20px;
-  font-weight: 400;
-  align-items: center;
-  display: flex;
-  flex: 1 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 6px 0;
-}
-
-.sidesheet-content.sidesheet-centered {
-  margin: 0 auto;
-  max-width: 768px;
-  width: 100%;
-}
-
-.sidesheet-content {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  position: relative;
-}
-
-.sidesheet-content.sidesheet-padding {
-  padding: 24px;
-}
-
-.sidesheet-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 24px;
-  box-shadow: 0 0 0 1px #dadce0;
-}
-
-.sidesheet-footer {
-  padding: 16px;
-  border-top: 1px solid #dadce0;
-  background: #fff;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}