@invoicebox/ui 0.1.0-alpha.316 → 0.1.0-alpha.318

package/dist/components/common/AppCardLink/index.js

@@ -27,7 +27,8 @@ var AppCardLink = exports.AppCardLink = function AppCardLink(_ref) {
   var AppCardComponent = appCardMap[variant];
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
     href: href,
-    target: '_blank'
+    target: '_blank',
+    rel: "noopener noreferrer"
   }, /*#__PURE__*/_react["default"].createElement(AppCardComponent, {
     height: height
   }));

package/dist/components/common/Drawer/index.js

@@ -10,6 +10,7 @@ var _reactDom = require("react-dom");
 var S = _interopRequireWildcard(require("./styles"));
 var _Typography = require("../Typography");
 var _palette = require("../../../palette");
+var _useLockBodyScroll = require("../../../hooks/useLockBodyScroll");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -75,14 +76,7 @@ var Drawer = exports.Drawer = function Drawer(_ref) {
   }, [shouldRender, isOpen]);
 
   // Блокируем скролл фона, пока боттомшит открыт (как делал react-modal-sheet).
-  (0, _react.useEffect)(function () {
-    if (!shouldRender) return undefined;
-    var prev = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    return function () {
-      document.body.style.overflow = prev;
-    };
-  }, [shouldRender]);
+  (0, _useLockBodyScroll.useLockBodyScroll)(shouldRender);
   var handleTransitionEnd = (0, _react.useCallback)(function (event) {
     if (event.target !== sheetRef.current || event.propertyName !== 'transform') return;
     if (isOpen && isEntered && onOpenEnd) onOpenEnd();
@@ -126,7 +120,6 @@ var Drawer = exports.Drawer = function Drawer(_ref) {
     $overflow: overflow,
     onTransitionEnd: handleTransitionEnd
   }, /*#__PURE__*/_react["default"].createElement(S.DragHandle, {
-    $bg: title ? palette.titleBg : palette.bg,
     onPointerDown: handlePointerDown,
     onPointerMove: handlePointerMove,
     onPointerUp: handlePointerUp,

package/dist/components/common/Drawer/index.stories.js

@@ -45,19 +45,34 @@ var Counter = function Counter() {
 function Render(args) {
   var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isOpen = _useState4[0],
-    setIsOpen = _useState4[1];
+    isOpenDrawer1 = _useState4[0],
+    setIsOpenDrawer1 = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isOpenDrawer2 = _useState6[0],
+    setIsOpenDrawer2 = _useState6[1];
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_.Drawer, _extends({}, args, {
     onClose: function onClose() {
-      return setIsOpen(false);
+      return setIsOpenDrawer1(false);
     },
-    isOpen: isOpen
-  }), "Content", /*#__PURE__*/_react["default"].createElement(Counter, null)), /*#__PURE__*/_react["default"].createElement("button", {
+    isOpen: isOpenDrawer1
+  }), "Drawer 1 Content", /*#__PURE__*/_react["default"].createElement("button", {
     type: 'button',
     onClick: function onClick() {
-      return setIsOpen(true);
+      setIsOpenDrawer2(true);
+      setIsOpenDrawer1(false);
     }
-  }, "Open"));
+  }, "Open drawer 2"), /*#__PURE__*/_react["default"].createElement(Counter, null)), /*#__PURE__*/_react["default"].createElement(_.Drawer, _extends({}, args, {
+    onClose: function onClose() {
+      return setIsOpenDrawer2(false);
+    },
+    isOpen: isOpenDrawer2
+  }), "Drawer 2 Content", /*#__PURE__*/_react["default"].createElement(Counter, null)), /*#__PURE__*/_react["default"].createElement("button", {
+    type: 'button',
+    onClick: function onClick() {
+      return setIsOpenDrawer1(true);
+    }
+  }, "Open drawer 1"));
 }
 var commonArgs = {
   children: 'Children',

package/dist/components/common/Drawer/styles.d.ts

@@ -11,9 +11,7 @@ export declare const Sheet: import("styled-components/dist/types").IStyledCompon
     $borderColor?: string | undefined;
     $overflow?: string | undefined;
 }>> & string;
-export declare const DragHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $bg: string;
-}>> & string;
+export declare const DragHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DragIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $bg: string;

package/dist/components/common/Drawer/styles.js

@@ -37,13 +37,13 @@ var Sheet = exports.Sheet = _styledComponents["default"].div.withConfig({
   var $overflow = _ref5.$overflow;
   return $overflow === 'visible' ? (0, _styledComponents.css)(["overflow:visible;"]) : (0, _styledComponents.css)(["overflow-y:auto;"]);
 });
+
+// Зона перетаскивания лежит поверх контента (как DragIndicatorWrapper в react-modal-sheet),
+// чтобы шапка-картинка могла подниматься под индикатор без белой полосы сверху.
 var DragHandle = exports.DragHandle = _styledComponents["default"].div.withConfig({
   displayName: "styles__DragHandle",
   componentId: "sc-1kysg49-3"
-})(["position:relative;flex:0 0 auto;height:28px;background-color:", ";border-radius:10px 10px 0 0;touch-action:none;cursor:grab;&:active{cursor:grabbing;}"], function (_ref6) {
-  var $bg = _ref6.$bg;
-  return $bg;
-});
+})(["position:absolute;top:0;left:0;right:0;height:28px;z-index:1;touch-action:none;cursor:grab;&:active{cursor:grabbing;}"]);
 var DragIndicator = exports.DragIndicator = _styledComponents["default"].div.withConfig({
   displayName: "styles__DragIndicator",
   componentId: "sc-1kysg49-4"
@@ -51,17 +51,17 @@ var DragIndicator = exports.DragIndicator = _styledComponents["default"].div.wit
 var Title = exports.Title = _styledComponents["default"].div.withConfig({
   displayName: "styles__Title",
   componentId: "sc-1kysg49-5"
-})(["background-color:", ";padding:30px;position:relative;text-align:center;"], function (_ref7) {
-  var $bg = _ref7.$bg;
+})(["background-color:", ";padding:30px;position:relative;text-align:center;"], function (_ref6) {
+  var $bg = _ref6.$bg;
   return $bg;
 });
 var ChildrenWrapper = exports.ChildrenWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__ChildrenWrapper",
   componentId: "sc-1kysg49-6"
-})(["", ";background-color:", ";"], function (_ref8) {
-  var $isPadding = _ref8.$isPadding;
+})(["", ";background-color:", ";"], function (_ref7) {
+  var $isPadding = _ref7.$isPadding;
   return $isPadding && 'padding: 32px 16px 36px';
-}, function (_ref9) {
-  var $bgColor = _ref9.$bgColor;
+}, function (_ref8) {
+  var $bgColor = _ref8.$bgColor;
   return $bgColor;
 });

package/dist/esm/components/common/AppCardLink/index.js

@@ -17,7 +17,8 @@ export var AppCardLink = function AppCardLink(_ref) {
   var AppCardComponent = appCardMap[variant];
   return /*#__PURE__*/React.createElement(S.Wrapper, {
     href: href,
-    target: '_blank'
+    target: '_blank',
+    rel: "noopener noreferrer"
   }, /*#__PURE__*/React.createElement(AppCardComponent, {
     height: height
   }));

package/dist/esm/components/common/Drawer/index.js

@@ -9,6 +9,7 @@ import { createPortal } from 'react-dom';
 import * as S from './styles';
 import { Typography } from '../Typography';
 import { useComponentPalette } from '../../../palette';
+import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
 var ANIMATION_MS = 300;
 var DRAG_CLOSE_THRESHOLD = 80;
 export var Drawer = function Drawer(_ref) {
@@ -66,14 +67,7 @@ export var Drawer = function Drawer(_ref) {
   }, [shouldRender, isOpen]);
 
   // Блокируем скролл фона, пока боттомшит открыт (как делал react-modal-sheet).
-  useEffect(function () {
-    if (!shouldRender) return undefined;
-    var prev = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    return function () {
-      document.body.style.overflow = prev;
-    };
-  }, [shouldRender]);
+  useLockBodyScroll(shouldRender);
   var handleTransitionEnd = useCallback(function (event) {
     if (event.target !== sheetRef.current || event.propertyName !== 'transform') return;
     if (isOpen && isEntered && onOpenEnd) onOpenEnd();
@@ -117,7 +111,6 @@ export var Drawer = function Drawer(_ref) {
     $overflow: overflow,
     onTransitionEnd: handleTransitionEnd
   }, /*#__PURE__*/React.createElement(S.DragHandle, {
-    $bg: title ? palette.titleBg : palette.bg,
     onPointerDown: handlePointerDown,
     onPointerMove: handlePointerMove,
     onPointerUp: handlePointerUp,

package/dist/esm/components/common/Drawer/index.stories.js

@@ -37,19 +37,34 @@ var Counter = function Counter() {
 function Render(args) {
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isOpen = _useState4[0],
-    setIsOpen = _useState4[1];
+    isOpenDrawer1 = _useState4[0],
+    setIsOpenDrawer1 = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isOpenDrawer2 = _useState6[0],
+    setIsOpenDrawer2 = _useState6[1];
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Drawer, _extends({}, args, {
     onClose: function onClose() {
-      return setIsOpen(false);
+      return setIsOpenDrawer1(false);
     },
-    isOpen: isOpen
-  }), "Content", /*#__PURE__*/React.createElement(Counter, null)), /*#__PURE__*/React.createElement("button", {
+    isOpen: isOpenDrawer1
+  }), "Drawer 1 Content", /*#__PURE__*/React.createElement("button", {
     type: 'button',
     onClick: function onClick() {
-      return setIsOpen(true);
+      setIsOpenDrawer2(true);
+      setIsOpenDrawer1(false);
     }
-  }, "Open"));
+  }, "Open drawer 2"), /*#__PURE__*/React.createElement(Counter, null)), /*#__PURE__*/React.createElement(Drawer, _extends({}, args, {
+    onClose: function onClose() {
+      return setIsOpenDrawer2(false);
+    },
+    isOpen: isOpenDrawer2
+  }), "Drawer 2 Content", /*#__PURE__*/React.createElement(Counter, null)), /*#__PURE__*/React.createElement("button", {
+    type: 'button',
+    onClick: function onClick() {
+      return setIsOpenDrawer1(true);
+    }
+  }, "Open drawer 1"));
 }
 var commonArgs = {
   children: 'Children',

package/dist/esm/components/common/Drawer/styles.js

@@ -28,13 +28,13 @@ export var Sheet = styled.div.withConfig({
   var $overflow = _ref5.$overflow;
   return $overflow === 'visible' ? css(["overflow:visible;"]) : css(["overflow-y:auto;"]);
 });
+
+// Зона перетаскивания лежит поверх контента (как DragIndicatorWrapper в react-modal-sheet),
+// чтобы шапка-картинка могла подниматься под индикатор без белой полосы сверху.
 export var DragHandle = styled.div.withConfig({
   displayName: "styles__DragHandle",
   componentId: "sc-1kysg49-3"
-})(["position:relative;flex:0 0 auto;height:28px;background-color:", ";border-radius:10px 10px 0 0;touch-action:none;cursor:grab;&:active{cursor:grabbing;}"], function (_ref6) {
-  var $bg = _ref6.$bg;
-  return $bg;
-});
+})(["position:absolute;top:0;left:0;right:0;height:28px;z-index:1;touch-action:none;cursor:grab;&:active{cursor:grabbing;}"]);
 export var DragIndicator = styled.div.withConfig({
   displayName: "styles__DragIndicator",
   componentId: "sc-1kysg49-4"
@@ -42,17 +42,17 @@ export var DragIndicator = styled.div.withConfig({
 export var Title = styled.div.withConfig({
   displayName: "styles__Title",
   componentId: "sc-1kysg49-5"
-})(["background-color:", ";padding:30px;position:relative;text-align:center;"], function (_ref7) {
-  var $bg = _ref7.$bg;
+})(["background-color:", ";padding:30px;position:relative;text-align:center;"], function (_ref6) {
+  var $bg = _ref6.$bg;
   return $bg;
 });
 export var ChildrenWrapper = styled.div.withConfig({
   displayName: "styles__ChildrenWrapper",
   componentId: "sc-1kysg49-6"
-})(["", ";background-color:", ";"], function (_ref8) {
-  var $isPadding = _ref8.$isPadding;
+})(["", ";background-color:", ";"], function (_ref7) {
+  var $isPadding = _ref7.$isPadding;
   return $isPadding && 'padding: 32px 16px 36px';
-}, function (_ref9) {
-  var $bgColor = _ref9.$bgColor;
+}, function (_ref8) {
+  var $bgColor = _ref8.$bgColor;
   return $bgColor;
 });

package/dist/esm/hooks/useLockBodyScroll/index.js

@@ -0,0 +1,45 @@
+import { useId, useLayoutEffect } from 'react';
+var SCROLL_LOCK_STATE_KEY = '__invoiceboxBodyScrollLockState';
+function getState() {
+  var global = globalThis;
+  if (!global[SCROLL_LOCK_STATE_KEY]) {
+    global[SCROLL_LOCK_STATE_KEY] = {
+      locks: new Set(),
+      originalBodyOverflow: ''
+    };
+  }
+  return global[SCROLL_LOCK_STATE_KEY];
+}
+function lockBodyScroll(lockId) {
+  var state = getState();
+  if (state.locks.size === 0) {
+    state.originalBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+  state.locks.add(lockId);
+}
+function unlockBodyScroll(lockId) {
+  var state = getState();
+  if (!state.locks["delete"](lockId)) {
+    return;
+  }
+  if (state.locks.size === 0) {
+    if (state.originalBodyOverflow) {
+      document.body.style.overflow = state.originalBodyOverflow;
+    } else {
+      document.body.style.removeProperty('overflow');
+    }
+  }
+}
+export var useLockBodyScroll = function useLockBodyScroll(locked) {
+  var lockId = useId();
+  useLayoutEffect(function () {
+    if (!locked) {
+      return undefined;
+    }
+    lockBodyScroll(lockId);
+    return function () {
+      unlockBodyScroll(lockId);
+    };
+  }, [locked, lockId]);
+};

package/dist/hooks/useLockBodyScroll/index.d.ts

@@ -0,0 +1 @@
+export declare const useLockBodyScroll: (locked: boolean) => void;

package/dist/hooks/useLockBodyScroll/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLockBodyScroll = void 0;
+var _react = require("react");
+var SCROLL_LOCK_STATE_KEY = '__invoiceboxBodyScrollLockState';
+function getState() {
+  var global = globalThis;
+  if (!global[SCROLL_LOCK_STATE_KEY]) {
+    global[SCROLL_LOCK_STATE_KEY] = {
+      locks: new Set(),
+      originalBodyOverflow: ''
+    };
+  }
+  return global[SCROLL_LOCK_STATE_KEY];
+}
+function lockBodyScroll(lockId) {
+  var state = getState();
+  if (state.locks.size === 0) {
+    state.originalBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+  state.locks.add(lockId);
+}
+function unlockBodyScroll(lockId) {
+  var state = getState();
+  if (!state.locks["delete"](lockId)) {
+    return;
+  }
+  if (state.locks.size === 0) {
+    if (state.originalBodyOverflow) {
+      document.body.style.overflow = state.originalBodyOverflow;
+    } else {
+      document.body.style.removeProperty('overflow');
+    }
+  }
+}
+var useLockBodyScroll = exports.useLockBodyScroll = function useLockBodyScroll(locked) {
+  var lockId = (0, _react.useId)();
+  (0, _react.useLayoutEffect)(function () {
+    if (!locked) {
+      return undefined;
+    }
+    lockBodyScroll(lockId);
+    return function () {
+      unlockBodyScroll(lockId);
+    };
+  }, [locked, lockId]);
+};

package/package.json

@@ -1,12 +1,15 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.316",
+    "version": "0.1.0-alpha.318",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {
         "storybook": "storybook dev -p 6006",
         "release": "./release.sh",
-        "test": "jest"
+        "test": "jest",
+        "lint": "eslint src --ext .ts,.tsx",
+        "typecheck": "tsc --project tsconfig.json --noEmit --emitDeclarationOnly false",
+        "build": "rm -rf dist && babel src --extensions .ts,.tsx --out-dir dist --copy-files && babel src --extensions .ts,.tsx --out-dir dist/esm --copy-files --config-file ./babel.config.esm.json && tsc --project tsconfig.json"
     },
     "bugs": {
         "url": "https://github.com/InvoiceBox/invoicebox-ui/issues"