@alfalab/core-components-base-modal 3.2.0 → 4.0.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@3.2.0...@alfalab/core-components-base-modal@4.0.0) (2022-03-24)
+
+
+### Features
+
+* **bottom-sheet:** update-bottom-sheet ([#1025](https://github.com/alfa-laboratory/core-components/issues/1025)) ([26fa9aa](https://github.com/alfa-laboratory/core-components/commit/26fa9aab68bebf0f7093a38bc0f18a9b596ccf37)), closes [#1032](https://github.com/alfa-laboratory/core-components/issues/1032)
+
+
+### BREAKING CHANGES
+
+* **bottom-sheet:** Большое обновление стилей, множество дополнительных настроек
+
+
+
+
+
 # [3.2.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@3.1.0...@alfalab/core-components-base-modal@3.2.0) (2022-03-01)
 
 

package/dist/Component.d.ts

@@ -119,6 +119,8 @@ type BaseModalContext = {
     hasScroll?: boolean;
     headerHighlighted?: boolean;
     footerHighlighted?: boolean;
+    headerOffset?: number;
+    setHeaderOffset: (offset: number) => void;
     contentRef: Ref<HTMLElement>;
     setHasHeader: (exists: boolean) => void;
     setHasFooter: (exists: boolean) => void;

package/dist/Component.js

@@ -48,7 +48,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_pvkw5","wrapper":"base-modal__wrapper_pvkw5","content":"base-modal__content_pvkw5","hidden":"base-modal__hidden_pvkw5","backdrop":"base-modal__backdrop_pvkw5","appear":"base-modal__appear_pvkw5","enter":"base-modal__enter_pvkw5","appearActive":"base-modal__appearActive_pvkw5","enterActive":"base-modal__enterActive_pvkw5","exit":"base-modal__exit_pvkw5","exitActive":"base-modal__exitActive_pvkw5","exitDone":"base-modal__exitDone_pvkw5"};
+var styles = {"component":"base-modal__component_t7alb","wrapper":"base-modal__wrapper_t7alb","content":"base-modal__content_t7alb","hidden":"base-modal__hidden_t7alb","backdrop":"base-modal__backdrop_t7alb","appear":"base-modal__appear_t7alb","enter":"base-modal__enter_t7alb","appearActive":"base-modal__appearActive_t7alb","enterActive":"base-modal__enterActive_t7alb","exit":"base-modal__exit_t7alb","exitActive":"base-modal__exitActive_t7alb","exitDone":"base-modal__exitDone_t7alb"};
 require('./index.css')
 
 var BaseModalContext = React__default['default'].createContext({
@@ -57,6 +57,8 @@ var BaseModalContext = React__default['default'].createContext({
     hasScroll: false,
     headerHighlighted: false,
     footerHighlighted: false,
+    headerOffset: 0,
+    setHeaderOffset: function () { return null; },
     contentRef: function () { return null; },
     setHasHeader: function () { return null; },
     setHasFooter: function () { return null; },
@@ -70,6 +72,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var _r = React.useState(false), hasFooter = _r[0], setHasFooter = _r[1];
     var _s = React.useState(false), headerHighlighted = _s[0], setHeaderHighlighted = _s[1];
     var _t = React.useState(false), footerHighlighted = _t[0], setFooterHighlighted = _t[1];
+    var _u = React.useState(0), headerOffset = _u[0], setHeaderOffset = _u[1];
     var componentNodeRef = React.useRef(null);
     var wrapperRef = React.useRef(null);
     var scrollableNodeRef = React.useRef(null);
@@ -108,14 +111,14 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             return;
         if (hasHeader) {
             setHeaderHighlighted(!utils.isScrolledToTop(scrollableNodeRef.current) &&
-                componentNodeRef.current.getBoundingClientRect().top <= 0);
+                componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
         }
         if (hasFooter) {
             setFooterHighlighted(!utils.isScrolledToBottom(scrollableNodeRef.current) &&
                 componentNodeRef.current.getBoundingClientRect().bottom >=
                     window.innerHeight);
         }
-    }, [hasFooter, hasHeader]);
+    }, [hasFooter, hasHeader, headerOffset]);
     var handleClose = React.useCallback(function (event, reason) {
         if (onClose) {
             onClose(event, reason);
@@ -210,6 +213,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         hasScroll: hasScroll,
         headerHighlighted: headerHighlighted,
         footerHighlighted: footerHighlighted,
+        headerOffset: headerOffset,
+        setHeaderOffset: setHeaderOffset,
         contentRef: contentRef,
         setHasHeader: setHasHeader,
         setHasFooter: setHasFooter,
@@ -221,6 +226,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         hasScroll,
         headerHighlighted,
         footerHighlighted,
+        headerOffset,
+        setHeaderOffset,
         handleClose,
     ]);
     if (!shouldRender)

package/dist/cssm/Component.d.ts

@@ -119,6 +119,8 @@ type BaseModalContext = {
     hasScroll?: boolean;
     headerHighlighted?: boolean;
     footerHighlighted?: boolean;
+    headerOffset?: number;
+    setHeaderOffset: (offset: number) => void;
     contentRef: Ref<HTMLElement>;
     setHasHeader: (exists: boolean) => void;
     setHasFooter: (exists: boolean) => void;

package/dist/cssm/Component.js

@@ -56,6 +56,8 @@ var BaseModalContext = React__default['default'].createContext({
     hasScroll: false,
     headerHighlighted: false,
     footerHighlighted: false,
+    headerOffset: 0,
+    setHeaderOffset: function () { return null; },
     contentRef: function () { return null; },
     setHasHeader: function () { return null; },
     setHasFooter: function () { return null; },
@@ -69,6 +71,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var _r = React.useState(false), hasFooter = _r[0], setHasFooter = _r[1];
     var _s = React.useState(false), headerHighlighted = _s[0], setHeaderHighlighted = _s[1];
     var _t = React.useState(false), footerHighlighted = _t[0], setFooterHighlighted = _t[1];
+    var _u = React.useState(0), headerOffset = _u[0], setHeaderOffset = _u[1];
     var componentNodeRef = React.useRef(null);
     var wrapperRef = React.useRef(null);
     var scrollableNodeRef = React.useRef(null);
@@ -107,14 +110,14 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             return;
         if (hasHeader) {
             setHeaderHighlighted(!utils.isScrolledToTop(scrollableNodeRef.current) &&
-                componentNodeRef.current.getBoundingClientRect().top <= 0);
+                componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
         }
         if (hasFooter) {
             setFooterHighlighted(!utils.isScrolledToBottom(scrollableNodeRef.current) &&
                 componentNodeRef.current.getBoundingClientRect().bottom >=
                     window.innerHeight);
         }
-    }, [hasFooter, hasHeader]);
+    }, [hasFooter, hasHeader, headerOffset]);
     var handleClose = React.useCallback(function (event, reason) {
         if (onClose) {
             onClose(event, reason);
@@ -209,6 +212,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         hasScroll: hasScroll,
         headerHighlighted: headerHighlighted,
         footerHighlighted: footerHighlighted,
+        headerOffset: headerOffset,
+        setHeaderOffset: setHeaderOffset,
         contentRef: contentRef,
         setHasHeader: setHasHeader,
         setHasFooter: setHasFooter,
@@ -220,6 +225,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         hasScroll,
         headerHighlighted,
         footerHighlighted,
+        headerOffset,
+        setHeaderOffset,
         handleClose,
     ]);
     if (!shouldRender)

package/dist/esm/Component.d.ts

@@ -119,6 +119,8 @@ type BaseModalContext = {
     hasScroll?: boolean;
     headerHighlighted?: boolean;
     footerHighlighted?: boolean;
+    headerOffset?: number;
+    setHeaderOffset: (offset: number) => void;
     contentRef: Ref<HTMLElement>;
     setHasHeader: (exists: boolean) => void;
     setHasFooter: (exists: boolean) => void;

package/dist/esm/Component.js

@@ -37,7 +37,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_pvkw5","wrapper":"base-modal__wrapper_pvkw5","content":"base-modal__content_pvkw5","hidden":"base-modal__hidden_pvkw5","backdrop":"base-modal__backdrop_pvkw5","appear":"base-modal__appear_pvkw5","enter":"base-modal__enter_pvkw5","appearActive":"base-modal__appearActive_pvkw5","enterActive":"base-modal__enterActive_pvkw5","exit":"base-modal__exit_pvkw5","exitActive":"base-modal__exitActive_pvkw5","exitDone":"base-modal__exitDone_pvkw5"};
+var styles = {"component":"base-modal__component_t7alb","wrapper":"base-modal__wrapper_t7alb","content":"base-modal__content_t7alb","hidden":"base-modal__hidden_t7alb","backdrop":"base-modal__backdrop_t7alb","appear":"base-modal__appear_t7alb","enter":"base-modal__enter_t7alb","appearActive":"base-modal__appearActive_t7alb","enterActive":"base-modal__enterActive_t7alb","exit":"base-modal__exit_t7alb","exitActive":"base-modal__exitActive_t7alb","exitDone":"base-modal__exitDone_t7alb"};
 require('./index.css')
 
 var BaseModalContext = React.createContext({
@@ -46,6 +46,8 @@ var BaseModalContext = React.createContext({
     hasScroll: false,
     headerHighlighted: false,
     footerHighlighted: false,
+    headerOffset: 0,
+    setHeaderOffset: function () { return null; },
     contentRef: function () { return null; },
     setHasHeader: function () { return null; },
     setHasFooter: function () { return null; },
@@ -59,6 +61,7 @@ var BaseModal = forwardRef(function (_a, ref) {
     var _r = useState(false), hasFooter = _r[0], setHasFooter = _r[1];
     var _s = useState(false), headerHighlighted = _s[0], setHeaderHighlighted = _s[1];
     var _t = useState(false), footerHighlighted = _t[0], setFooterHighlighted = _t[1];
+    var _u = useState(0), headerOffset = _u[0], setHeaderOffset = _u[1];
     var componentNodeRef = useRef(null);
     var wrapperRef = useRef(null);
     var scrollableNodeRef = useRef(null);
@@ -97,14 +100,14 @@ var BaseModal = forwardRef(function (_a, ref) {
             return;
         if (hasHeader) {
             setHeaderHighlighted(!isScrolledToTop(scrollableNodeRef.current) &&
-                componentNodeRef.current.getBoundingClientRect().top <= 0);
+                componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
         }
         if (hasFooter) {
             setFooterHighlighted(!isScrolledToBottom(scrollableNodeRef.current) &&
                 componentNodeRef.current.getBoundingClientRect().bottom >=
                     window.innerHeight);
         }
-    }, [hasFooter, hasHeader]);
+    }, [hasFooter, hasHeader, headerOffset]);
     var handleClose = useCallback(function (event, reason) {
         if (onClose) {
             onClose(event, reason);
@@ -199,6 +202,8 @@ var BaseModal = forwardRef(function (_a, ref) {
         hasScroll: hasScroll,
         headerHighlighted: headerHighlighted,
         footerHighlighted: footerHighlighted,
+        headerOffset: headerOffset,
+        setHeaderOffset: setHeaderOffset,
         contentRef: contentRef,
         setHasHeader: setHasHeader,
         setHasFooter: setHasFooter,
@@ -210,6 +215,8 @@ var BaseModal = forwardRef(function (_a, ref) {
         hasScroll,
         headerHighlighted,
         footerHighlighted,
+        headerOffset,
+        setHeaderOffset,
         handleClose,
     ]);
     if (!shouldRender)

package/dist/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: zuxb3 */
+/* hash: 10wmb */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_pvkw5 {
+.base-modal__component_t7alb {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_pvkw5 {
+.base-modal__wrapper_t7alb {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_pvkw5 {
+.base-modal__content_t7alb {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_pvkw5 {
+.base-modal__hidden_t7alb {
     display: none;
 }
-.base-modal__backdrop_pvkw5 {
+.base-modal__backdrop_t7alb {
     z-index: 0;
 }
-.base-modal__appear_pvkw5,
-.base-modal__enter_pvkw5 {
+.base-modal__appear_t7alb,
+.base-modal__enter_t7alb {
     opacity: 0;
 }
-.base-modal__appearActive_pvkw5,
-.base-modal__enterActive_pvkw5 {
+.base-modal__appearActive_t7alb,
+.base-modal__enterActive_t7alb {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_pvkw5 {
+.base-modal__exit_t7alb {
     opacity: 1;
 }
-.base-modal__exitActive_pvkw5,
-.base-modal__exitDone_pvkw5 {
+.base-modal__exitActive_t7alb,
+.base-modal__exitDone_t7alb {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/dist/index.css

@@ -1,4 +1,4 @@
-/* hash: zuxb3 */
+/* hash: 10wmb */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_pvkw5 {
+.base-modal__component_t7alb {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_pvkw5 {
+.base-modal__wrapper_t7alb {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_pvkw5 {
+.base-modal__content_t7alb {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_pvkw5 {
+.base-modal__hidden_t7alb {
     display: none;
 }
-.base-modal__backdrop_pvkw5 {
+.base-modal__backdrop_t7alb {
     z-index: 0;
 }
-.base-modal__appear_pvkw5,
-.base-modal__enter_pvkw5 {
+.base-modal__appear_t7alb,
+.base-modal__enter_t7alb {
     opacity: 0;
 }
-.base-modal__appearActive_pvkw5,
-.base-modal__enterActive_pvkw5 {
+.base-modal__appearActive_t7alb,
+.base-modal__enterActive_t7alb {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_pvkw5 {
+.base-modal__exit_t7alb {
     opacity: 1;
 }
-.base-modal__exitActive_pvkw5,
-.base-modal__exitDone_pvkw5 {
+.base-modal__exitActive_t7alb,
+.base-modal__exitDone_t7alb {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/dist/modern/Component.d.ts

@@ -119,6 +119,8 @@ type BaseModalContext = {
     hasScroll?: boolean;
     headerHighlighted?: boolean;
     footerHighlighted?: boolean;
+    headerOffset?: number;
+    setHeaderOffset: (offset: number) => void;
     contentRef: Ref<HTMLElement>;
     setHasHeader: (exists: boolean) => void;
     setHasFooter: (exists: boolean) => void;

package/dist/modern/Component.js

@@ -10,7 +10,7 @@ import { stackingOrder, Stack } from '@alfalab/core-components-stack/dist/modern
 import '@alfalab/core-components-global-store/dist/modern';
 import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
 
-var styles = {"component":"base-modal__component_pvkw5","wrapper":"base-modal__wrapper_pvkw5","content":"base-modal__content_pvkw5","hidden":"base-modal__hidden_pvkw5","backdrop":"base-modal__backdrop_pvkw5","appear":"base-modal__appear_pvkw5","enter":"base-modal__enter_pvkw5","appearActive":"base-modal__appearActive_pvkw5","enterActive":"base-modal__enterActive_pvkw5","exit":"base-modal__exit_pvkw5","exitActive":"base-modal__exitActive_pvkw5","exitDone":"base-modal__exitDone_pvkw5"};
+var styles = {"component":"base-modal__component_t7alb","wrapper":"base-modal__wrapper_t7alb","content":"base-modal__content_t7alb","hidden":"base-modal__hidden_t7alb","backdrop":"base-modal__backdrop_t7alb","appear":"base-modal__appear_t7alb","enter":"base-modal__enter_t7alb","appearActive":"base-modal__appearActive_t7alb","enterActive":"base-modal__enterActive_t7alb","exit":"base-modal__exit_t7alb","exitActive":"base-modal__exitActive_t7alb","exitDone":"base-modal__exitDone_t7alb"};
 require('./index.css')
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -20,6 +20,8 @@ const BaseModalContext = React.createContext({
     hasScroll: false,
     headerHighlighted: false,
     footerHighlighted: false,
+    headerOffset: 0,
+    setHeaderOffset: () => null,
     contentRef: () => null,
     setHasHeader: () => null,
     setHasFooter: () => null,
@@ -32,6 +34,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
     const [hasFooter, setHasFooter] = useState(false);
     const [headerHighlighted, setHeaderHighlighted] = useState(false);
     const [footerHighlighted, setFooterHighlighted] = useState(false);
+    const [headerOffset, setHeaderOffset] = useState(0);
     const componentNodeRef = useRef(null);
     const wrapperRef = useRef(null);
     const scrollableNodeRef = useRef(null);
@@ -70,14 +73,14 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             return;
         if (hasHeader) {
             setHeaderHighlighted(!isScrolledToTop(scrollableNodeRef.current) &&
-                componentNodeRef.current.getBoundingClientRect().top <= 0);
+                componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
         }
         if (hasFooter) {
             setFooterHighlighted(!isScrolledToBottom(scrollableNodeRef.current) &&
                 componentNodeRef.current.getBoundingClientRect().bottom >=
                     window.innerHeight);
         }
-    }, [hasFooter, hasHeader]);
+    }, [hasFooter, hasHeader, headerOffset]);
     const handleClose = useCallback((event, reason) => {
         if (onClose) {
             onClose(event, reason);
@@ -172,6 +175,8 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         hasScroll,
         headerHighlighted,
         footerHighlighted,
+        headerOffset,
+        setHeaderOffset,
         contentRef,
         setHasHeader,
         setHasFooter,
@@ -183,6 +188,8 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         hasScroll,
         headerHighlighted,
         footerHighlighted,
+        headerOffset,
+        setHeaderOffset,
         handleClose,
     ]);
     if (!shouldRender)

package/dist/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: zuxb3 */
+/* hash: 10wmb */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_pvkw5 {
+.base-modal__component_t7alb {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_pvkw5 {
+.base-modal__wrapper_t7alb {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_pvkw5 {
+.base-modal__content_t7alb {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_pvkw5 {
+.base-modal__hidden_t7alb {
     display: none;
 }
-.base-modal__backdrop_pvkw5 {
+.base-modal__backdrop_t7alb {
     z-index: 0;
 }
-.base-modal__appear_pvkw5,
-.base-modal__enter_pvkw5 {
+.base-modal__appear_t7alb,
+.base-modal__enter_t7alb {
     opacity: 0;
 }
-.base-modal__appearActive_pvkw5,
-.base-modal__enterActive_pvkw5 {
+.base-modal__appearActive_t7alb,
+.base-modal__enterActive_t7alb {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_pvkw5 {
+.base-modal__exit_t7alb {
     opacity: 1;
 }
-.base-modal__exitActive_pvkw5,
-.base-modal__exitDone_pvkw5 {
+.base-modal__exitActive_t7alb,
+.base-modal__exitDone_t7alb {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-base-modal",
-    "version": "3.2.0",
+    "version": "4.0.0",
     "description": "BaseModal component",
     "keywords": [],
     "license": "MIT",
@@ -31,5 +31,5 @@
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1"
     },
-    "gitHead": "ddf4fab6035139cf412e0acb7174ef388f23e4f2"
+    "gitHead": "ae23b2de3600ef2921e125b35916a8b95cd1a909"
 }