react-side-sheet-pro 0.1.8 → 0.1.9

package/README.md

@@ -151,10 +151,10 @@ Sheet footer component that can be used to display actions or additional informa
 cd playground/ && npm start
 ```
 
-## 🌟 Contributing
+## 🤝 Contributing
 
 We welcome contributions! If you'd like to help improve this project, feel free to open an issue or submit a pull request.
 
-## License
+## 📜 License
 
 This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

package/dist/components/SideSheetContainer.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,6 +9,40 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function getStackItemMeta(stack, idx) {
+  var prev = stack[idx - 1];
+  var next = stack[idx + 1];
+  return {
+    prev: prev,
+    next: next,
+    isTop: idx === stack.length - 1,
+    isPrevClosing: (prev === null || prev === void 0 ? void 0 : prev.state) === 'closing',
+    isNextTransitioning: (next === null || next === void 0 ? void 0 : next.state) === 'closing' || (next === null || next === void 0 ? void 0 : next.state) === 'opening'
+  };
+}
+function computePadding(stack, idx) {
+  var _stack$options$width, _stack;
+  var _getStackItemMeta = getStackItemMeta(stack, idx),
+    next = _getStackItemMeta.next,
+    isTop = _getStackItemMeta.isTop,
+    isPrevClosing = _getStackItemMeta.isPrevClosing,
+    isNextTransitioning = _getStackItemMeta.isNextTransitioning;
+  if (isTop || isPrevClosing || isNextTransitioning || !next) return undefined;
+  var viewportWidth = document.documentElement.clientWidth;
+  var maxWidth = (_stack$options$width = (_stack = stack[stack.length - 1]) === null || _stack === void 0 ? void 0 : _stack.options.width) !== null && _stack$options$width !== void 0 ? _stack$options$width : 0;
+  var padding = 0;
+  if (viewportWidth >= 1160) {
+    padding = Math.floor((viewportWidth - 960) / 2);
+  } else if (viewportWidth >= 768) {
+    padding = Math.floor((viewportWidth - 768) / 2);
+  }
+  padding = Math.min(padding, maxWidth);
+  return padding > 0 ? padding : next.options.width / 2;
+}
 var SideSheetContainer = exports.SideSheetContainer = function SideSheetContainer(_ref) {
   var stack = _ref.stack,
     open = _ref.open,
@@ -30,18 +63,30 @@ var SideSheetContainer = exports.SideSheetContainer = function SideSheetContaine
       document.removeEventListener('keydown', onKeyDown);
     };
   }, [stack, close]);
+  var paddingKey = config.side === 'left' ? 'paddingLeft' : 'paddingRight';
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, stack.map(function (item, idx) {
-    var _stack;
-    var isTop = idx === stack.length - 1;
-    var isPrevClosing = ((_stack = stack[idx - 1]) === null || _stack === void 0 ? void 0 : _stack.state) === 'closing';
+    var _getStackItemMeta2 = getStackItemMeta(stack, idx),
+      next = _getStackItemMeta2.next,
+      isTop = _getStackItemMeta2.isTop,
+      isPrevClosing = _getStackItemMeta2.isPrevClosing,
+      isNextTransitioning = _getStackItemMeta2.isNextTransitioning;
     var _item$options = item.options,
       width = _item$options.width,
       closeOnOverlayClick = _item$options.closeOnOverlayClick,
       className = _item$options.className;
-    if (config.mountStrategy === 'top-only' && !isTop && !isPrevClosing) return null;
+    var isEffectiveTop = isTop || isPrevClosing;
+    var isVisible = !(config.mountStrategy === 'top-only' && !isEffectiveTop);
+    var paddingValue = isEffectiveTop || isNextTransitioning || !next ? undefined : "".concat(computePadding(stack, idx), "px");
+    var elementProps = {
+      sideId: item.id,
+      options: item.options,
+      close: close,
+      open: open,
+      update: update
+    };
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
       key: item.id
-    }, /*#__PURE__*/_react["default"].createElement("div", {
+    }, isVisible && /*#__PURE__*/_react["default"].createElement("div", {
       className: "sidesheet-overlay",
       onClick: function onClick() {
         if (closeOnOverlayClick && item.state === 'open') {
@@ -51,20 +96,11 @@ var SideSheetContainer = exports.SideSheetContainer = function SideSheetContaine
     }), /*#__PURE__*/_react["default"].createElement("div", {
       role: "dialog",
       "aria-modal": "true",
-      className: (0, _classnames["default"])('sidesheet', "sidesheet-animation-".concat(item.state), {
-        'sidesheet-left': config.side === 'left',
-        'sidesheet-right': config.side === 'right'
-      }, className),
-      style: {
-        width: "".concat(isTop || isPrevClosing ? "".concat(width, "px") : '100%')
-      }
-    }, item.element({
-      sideId: item.id,
-      options: item.options,
-      close: close,
-      open: open,
-      update: update
-    })));
+      className: (0, _classnames["default"])('sidesheet', "sidesheet-animation-".concat(item.state), "sidesheet-".concat(config.side), !isVisible && 'sidesheet-invisible', className),
+      style: _defineProperty({
+        width: isEffectiveTop ? "".concat(width, "px") : '100%'
+      }, paddingKey, paddingValue)
+    }, item.element(elementProps)));
   }));
 };
 SideSheetContainer.propTypes = {

package/dist/components/SideSheetProvider.js

@@ -44,9 +44,7 @@ var SideSheetProvider = exports.SideSheetProvider = function SideSheetProvider(_
   (0, _react.useEffect)(function () {
     stackRef.current = stack;
     if (!config.enableOverflow) {
-      console.warn([document.body.style.overflow, stack.length, overflowRef.current]);
       if (!stack.length) {
-        console.warn(overflowRef.current);
         if (overflowRef.current !== null) {
           document.body.style.overflow = overflowRef.current;
           overflowRef.current = null;

package/dist/index.css

@@ -93,13 +93,18 @@
   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;
+  transition: transform 0.3s ease, width 0.3s ease, padding-right 0.3s ease,
+    padding-left 0.3s ease;
 }
 
 .sheet-white {
   background: #fff;
 }
 
+.sidesheet-invisible {
+  display: none;
+}
+
 .sidesheet-header .sidesheet-header-btn {
   background: transparent;
   border: none;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-side-sheet-pro",
   "description": "A flexible React SideSheet component for displaying contextual information.",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "license": "MIT",
   "keywords": [
     "react",

package/src/components/SideSheetContainer.tsx

@@ -15,6 +15,44 @@ type SideSheetContainerProps = {
   config: Required<SideSheetOptions>;
 };
 
+function getStackItemMeta(stack: SideStackItem[], idx: number) {
+  const prev = stack[idx - 1];
+  const next = stack[idx + 1];
+  return {
+    prev,
+    next,
+    isTop: idx === stack.length - 1,
+    isPrevClosing: prev?.state === 'closing',
+    isNextTransitioning: next?.state === 'closing' || next?.state === 'opening',
+  };
+}
+
+function computePadding(
+  stack: SideStackItem[],
+  idx: number
+): number | undefined {
+  const { next, isTop, isPrevClosing, isNextTransitioning } = getStackItemMeta(
+    stack,
+    idx
+  );
+
+  if (isTop || isPrevClosing || isNextTransitioning || !next) return undefined;
+
+  const viewportWidth = document.documentElement.clientWidth;
+  const maxWidth = stack[stack.length - 1]?.options.width ?? 0;
+
+  let padding = 0;
+  if (viewportWidth >= 1160) {
+    padding = Math.floor((viewportWidth - 960) / 2);
+  } else if (viewportWidth >= 768) {
+    padding = Math.floor((viewportWidth - 768) / 2);
+  }
+
+  padding = Math.min(padding, maxWidth);
+
+  return padding > 0 ? padding : next.options.width / 2;
+}
+
 export const SideSheetContainer: React.FC<SideSheetContainerProps> = ({
   stack,
   open,
@@ -38,49 +76,64 @@ export const SideSheetContainer: React.FC<SideSheetContainerProps> = ({
     };
   }, [stack, close]);
 
+  const paddingKey = config.side === 'left' ? 'paddingLeft' : 'paddingRight';
+
   return (
     <>
       {stack.map((item, idx) => {
-        const isTop = idx === stack.length - 1;
-        const isPrevClosing = stack[idx - 1]?.state === 'closing';
+        const {
+          next,
+          isTop,
+          isPrevClosing,
+          isNextTransitioning,
+        } = getStackItemMeta(stack, idx);
         const { width, closeOnOverlayClick, className } = item.options;
 
-        if (config.mountStrategy === 'top-only' && !isTop && !isPrevClosing)
-          return null;
+        const isEffectiveTop = isTop || isPrevClosing;
+        const isVisible = !(
+          config.mountStrategy === 'top-only' && !isEffectiveTop
+        );
+        const paddingValue =
+          isEffectiveTop || isNextTransitioning || !next
+            ? undefined
+            : `${computePadding(stack, idx)}px`;
+
+        const elementProps = {
+          sideId: item.id,
+          options: item.options,
+          close,
+          open,
+          update,
+        };
 
         return (
           <React.Fragment key={item.id}>
-            <div
-              className="sidesheet-overlay"
-              onClick={() => {
-                if (closeOnOverlayClick && item.state === 'open') {
-                  close(item.id);
-                }
-              }}
-            />
+            {isVisible && (
+              <div
+                className="sidesheet-overlay"
+                onClick={() => {
+                  if (closeOnOverlayClick && item.state === 'open') {
+                    close(item.id);
+                  }
+                }}
+              />
+            )}
             <div
               role="dialog"
               aria-modal="true"
               className={classNames(
                 'sidesheet',
                 `sidesheet-animation-${item.state}`,
-                {
-                  'sidesheet-left': config.side === 'left',
-                  'sidesheet-right': config.side === 'right',
-                },
+                `sidesheet-${config.side}`,
+                !isVisible && 'sidesheet-invisible',
                 className
               )}
               style={{
-                width: `${isTop || isPrevClosing ? `${width}px` : '100%'}`,
+                width: isEffectiveTop ? `${width}px` : '100%',
+                [paddingKey]: paddingValue,
               }}
             >
-              {item.element({
-                sideId: item.id,
-                options: item.options,
-                close,
-                open,
-                update,
-              })}
+              {item.element(elementProps)}
             </div>
           </React.Fragment>
         );

package/src/index.css

@@ -93,13 +93,18 @@
   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;
+  transition: transform 0.3s ease, width 0.3s ease, padding-right 0.3s ease,
+    padding-left 0.3s ease;
 }
 
 .sheet-white {
   background: #fff;
 }
 
+.sidesheet-invisible {
+  display: none;
+}
+
 .sidesheet-header .sidesheet-header-btn {
   background: transparent;
   border: none;