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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +42 -26
  2. package/dist/Component.d.ts +2 -0
  3. package/dist/Component.js +10 -3
  4. package/dist/cssm/Component.d.ts +2 -0
  5. package/dist/cssm/Component.js +9 -2
  6. package/dist/esm/Component.d.ts +2 -0
  7. package/dist/esm/Component.js +10 -3
  8. package/dist/esm/index.css +13 -13
  9. package/dist/index.css +13 -13
  10. package/dist/modern/Component.d.ts +2 -0
  11. package/dist/modern/Component.js +10 -3
  12. package/dist/modern/index.css +13 -13
  13. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -3,41 +3,57 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- # [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)
6
+ # [4.0.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@3.2.0...@alfalab/core-components-base-modal@4.0.0) (2022-03-24)
7
7
 
8
8
 
9
9
  ### Features
10
10
 
11
- * **base-modal:** add component ref for base modal ([#1008](https://github.com/alfa-laboratory/core-components/issues/1008)) ([fb13dbd](https://github.com/alfa-laboratory/core-components/commit/fb13dbdf6352b10b80a74fa87edfcb1f54b76d5a))
12
- * Исправить импорты в сторях. ([#998](https://github.com/alfa-laboratory/core-components/issues/998)) ([e6a654a](https://github.com/alfa-laboratory/core-components/commit/e6a654a0599451c7d149484cb61d8067eed083b7))
11
+ * **bottom-sheet:** update-bottom-sheet ([#1025](https://github.com/core-ds/core-components/issues/1025)) ([26fa9aa](https://github.com/core-ds/core-components/commit/26fa9aab68bebf0f7093a38bc0f18a9b596ccf37)), closes [#1032](https://github.com/core-ds/core-components/issues/1032)
12
+
13
+
14
+ ### BREAKING CHANGES
15
+
16
+ * **bottom-sheet:** Большое обновление стилей, множество дополнительных настроек
17
+
18
+
19
+
20
+
21
+
22
+ # [3.2.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@3.1.0...@alfalab/core-components-base-modal@3.2.0) (2022-03-01)
23
+
24
+
25
+ ### Features
26
+
27
+ * **base-modal:** add component ref for base modal ([#1008](https://github.com/core-ds/core-components/issues/1008)) ([fb13dbd](https://github.com/core-ds/core-components/commit/fb13dbdf6352b10b80a74fa87edfcb1f54b76d5a))
28
+ * Исправить импорты в сторях. ([#998](https://github.com/core-ds/core-components/issues/998)) ([e6a654a](https://github.com/core-ds/core-components/commit/e6a654a0599451c7d149484cb61d8067eed083b7))
13
29
 
14
30
 
15
31
 
16
32
 
17
33
 
18
- # [3.1.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@3.0.2...@alfalab/core-components-base-modal@3.1.0) (2022-01-17)
34
+ # [3.1.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@3.0.2...@alfalab/core-components-base-modal@3.1.0) (2022-01-17)
19
35
 
20
36
 
21
37
  ### Features
22
38
 
23
- * **base-modal:** extract modal store to global ([#943](https://github.com/alfa-laboratory/core-components/issues/943)) ([9587f17](https://github.com/alfa-laboratory/core-components/commit/9587f1773bb690ac6696077509d4a519aa109198))
39
+ * **base-modal:** extract modal store to global ([#943](https://github.com/core-ds/core-components/issues/943)) ([9587f17](https://github.com/core-ds/core-components/commit/9587f1773bb690ac6696077509d4a519aa109198))
24
40
 
25
41
 
26
42
 
27
43
 
28
44
 
29
- ## [3.0.2](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@3.0.1...@alfalab/core-components-base-modal@3.0.2) (2021-09-14)
45
+ ## [3.0.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@3.0.1...@alfalab/core-components-base-modal@3.0.2) (2021-09-14)
30
46
 
31
47
 
32
48
  ### Bug Fixes
33
49
 
34
- * **base-modal:** modal scroll ([#820](https://github.com/alfa-laboratory/core-components/issues/820)) ([1b2d94a](https://github.com/alfa-laboratory/core-components/commit/1b2d94ad45e04145bf1292d749ae2028702dc622))
50
+ * **base-modal:** modal scroll ([#820](https://github.com/core-ds/core-components/issues/820)) ([1b2d94a](https://github.com/core-ds/core-components/commit/1b2d94ad45e04145bf1292d749ae2028702dc622))
35
51
 
36
52
 
37
53
 
38
54
 
39
55
 
40
- ## [3.0.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@3.0.0...@alfalab/core-components-base-modal@3.0.1) (2021-07-09)
56
+ ## [3.0.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@3.0.0...@alfalab/core-components-base-modal@3.0.1) (2021-07-09)
41
57
 
42
58
  **Note:** Version bump only for package @alfalab/core-components-base-modal
43
59
 
@@ -45,69 +61,69 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
45
61
 
46
62
 
47
63
 
48
- # [3.0.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@2.1.1...@alfalab/core-components-base-modal@3.0.0) (2021-07-08)
64
+ # [3.0.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@2.1.1...@alfalab/core-components-base-modal@3.0.0) (2021-07-08)
49
65
 
50
66
 
51
67
  ### Features
52
68
 
53
- * upgrade storybook ([#696](https://github.com/alfa-laboratory/core-components/issues/696))
69
+ * upgrade storybook ([#696](https://github.com/core-ds/core-components/issues/696))
54
70
 
55
- ## [2.1.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@2.1.0...@alfalab/core-components-base-modal@2.1.1) (2021-07-02)
71
+ ## [2.1.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@2.1.0...@alfalab/core-components-base-modal@2.1.1) (2021-07-02)
56
72
 
57
73
 
58
74
  ### Bug Fixes
59
75
 
60
- * **base-modal:** resubscribe observer when content node changed ([2fef06e](https://github.com/alfa-laboratory/core-components/commit/2fef06eea01354f58663a5f4470606123d31f9d4))
76
+ * **base-modal:** resubscribe observer when content node changed ([2fef06e](https://github.com/core-ds/core-components/commit/2fef06eea01354f58663a5f4470606123d31f9d4))
61
77
 
62
78
 
63
79
 
64
80
 
65
81
 
66
- # [2.1.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@2.0.2...@alfalab/core-components-base-modal@2.1.0) (2021-06-28)
82
+ # [2.1.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@2.0.2...@alfalab/core-components-base-modal@2.1.0) (2021-06-28)
67
83
 
68
84
 
69
85
  ### Bug Fixes
70
86
 
71
- * **base-modal:** fix has scroll bug ([#712](https://github.com/alfa-laboratory/core-components/issues/712)) ([a6749a1](https://github.com/alfa-laboratory/core-components/commit/a6749a149d511b28cc59aaec188d59c380c64243))
87
+ * **base-modal:** fix has scroll bug ([#712](https://github.com/core-ds/core-components/issues/712)) ([a6749a1](https://github.com/core-ds/core-components/commit/a6749a149d511b28cc59aaec188d59c380c64243))
72
88
 
73
89
 
74
90
  ### Features
75
91
 
76
- * **bottom-sheet:** new component (PDS-228) ([#645](https://github.com/alfa-laboratory/core-components/issues/645)) ([1f7391d](https://github.com/alfa-laboratory/core-components/commit/1f7391df16a270d8a3a28b8ebaf98d0ed0928bc8)), closes [#642](https://github.com/alfa-laboratory/core-components/issues/642) [#642](https://github.com/alfa-laboratory/core-components/issues/642) [#646](https://github.com/alfa-laboratory/core-components/issues/646) [#646](https://github.com/alfa-laboratory/core-components/issues/646) [#634](https://github.com/alfa-laboratory/core-components/issues/634) [#635](https://github.com/alfa-laboratory/core-components/issues/635) [#634](https://github.com/alfa-laboratory/core-components/issues/634) [#635](https://github.com/alfa-laboratory/core-components/issues/635) [#648](https://github.com/alfa-laboratory/core-components/issues/648) [#647](https://github.com/alfa-laboratory/core-components/issues/647) [#630](https://github.com/alfa-laboratory/core-components/issues/630) [#648](https://github.com/alfa-laboratory/core-components/issues/648) [#630](https://github.com/alfa-laboratory/core-components/issues/630) [#669](https://github.com/alfa-laboratory/core-components/issues/669)
92
+ * **bottom-sheet:** new component (PDS-228) ([#645](https://github.com/core-ds/core-components/issues/645)) ([1f7391d](https://github.com/core-ds/core-components/commit/1f7391df16a270d8a3a28b8ebaf98d0ed0928bc8)), closes [#642](https://github.com/core-ds/core-components/issues/642) [#642](https://github.com/core-ds/core-components/issues/642) [#646](https://github.com/core-ds/core-components/issues/646) [#646](https://github.com/core-ds/core-components/issues/646) [#634](https://github.com/core-ds/core-components/issues/634) [#635](https://github.com/core-ds/core-components/issues/635) [#634](https://github.com/core-ds/core-components/issues/634) [#635](https://github.com/core-ds/core-components/issues/635) [#648](https://github.com/core-ds/core-components/issues/648) [#647](https://github.com/core-ds/core-components/issues/647) [#630](https://github.com/core-ds/core-components/issues/630) [#648](https://github.com/core-ds/core-components/issues/648) [#630](https://github.com/core-ds/core-components/issues/630) [#669](https://github.com/core-ds/core-components/issues/669)
77
93
 
78
94
 
79
95
 
80
96
 
81
97
 
82
- ## [2.0.2](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@2.0.1...@alfalab/core-components-base-modal@2.0.2) (2021-05-28)
98
+ ## [2.0.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@2.0.1...@alfalab/core-components-base-modal@2.0.2) (2021-05-28)
83
99
 
84
100
 
85
101
  ### Bug Fixes
86
102
 
87
- * **base-modal:** restore body styles on unmount ([#671](https://github.com/alfa-laboratory/core-components/issues/671)) ([963a6b1](https://github.com/alfa-laboratory/core-components/commit/963a6b18b13924a09cda672a662d0b402d00e75b))
103
+ * **base-modal:** restore body styles on unmount ([#671](https://github.com/core-ds/core-components/issues/671)) ([963a6b1](https://github.com/core-ds/core-components/commit/963a6b18b13924a09cda672a662d0b402d00e75b))
88
104
 
89
105
 
90
106
 
91
107
 
92
108
 
93
- ## [2.0.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@2.0.0...@alfalab/core-components-base-modal@2.0.1) (2021-05-25)
109
+ ## [2.0.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@2.0.0...@alfalab/core-components-base-modal@2.0.1) (2021-05-25)
94
110
 
95
111
 
96
112
  ### Bug Fixes
97
113
 
98
- * **modal:** fix styles ([#665](https://github.com/alfa-laboratory/core-components/issues/665)) ([06f3615](https://github.com/alfa-laboratory/core-components/commit/06f3615c532f8ec2932d8a4d1fcbb1f5ee6b6a30))
99
- * **modal:** restore styles after exited ([#663](https://github.com/alfa-laboratory/core-components/issues/663)) ([48a8d69](https://github.com/alfa-laboratory/core-components/commit/48a8d6986dcde6c191d8411d51f28e6f399e26e6))
114
+ * **modal:** fix styles ([#665](https://github.com/core-ds/core-components/issues/665)) ([06f3615](https://github.com/core-ds/core-components/commit/06f3615c532f8ec2932d8a4d1fcbb1f5ee6b6a30))
115
+ * **modal:** restore styles after exited ([#663](https://github.com/core-ds/core-components/issues/663)) ([48a8d69](https://github.com/core-ds/core-components/commit/48a8d6986dcde6c191d8411d51f28e6f399e26e6))
100
116
 
101
117
 
102
118
 
103
119
 
104
120
 
105
- # [2.0.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@1.1.2...@alfalab/core-components-base-modal@2.0.0) (2021-04-26)
121
+ # [2.0.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@1.1.2...@alfalab/core-components-base-modal@2.0.0) (2021-04-26)
106
122
 
107
123
 
108
124
  ### Features
109
125
 
110
- * **stack:** add new component ([#612](https://github.com/alfa-laboratory/core-components/issues/612)) ([c520f91](https://github.com/alfa-laboratory/core-components/commit/c520f91cd22bb9e23fd2f428719865b4c7d5a2a6))
126
+ * **stack:** add new component ([#612](https://github.com/core-ds/core-components/issues/612)) ([c520f91](https://github.com/core-ds/core-components/commit/c520f91cd22bb9e23fd2f428719865b4c7d5a2a6))
111
127
 
112
128
 
113
129
  ### BREAKING CHANGES
@@ -166,7 +182,7 @@ remove z-index, add stack component
166
182
 
167
183
 
168
184
 
169
- ## [1.1.2](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@1.1.1...@alfalab/core-components-base-modal@1.1.2) (2021-04-26)
185
+ ## [1.1.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@1.1.1...@alfalab/core-components-base-modal@1.1.2) (2021-04-26)
170
186
 
171
187
  **Note:** Version bump only for package @alfalab/core-components-base-modal
172
188
 
@@ -174,12 +190,12 @@ remove z-index, add stack component
174
190
 
175
191
 
176
192
 
177
- ## [1.1.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@1.1.0...@alfalab/core-components-base-modal@1.1.1) (2021-04-09)
193
+ ## [1.1.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@1.1.0...@alfalab/core-components-base-modal@1.1.1) (2021-04-09)
178
194
 
179
195
 
180
196
  ### Bug Fixes
181
197
 
182
- * **base-modal:** correct cb ([256a142](https://github.com/alfa-laboratory/core-components/commit/256a142398a9ada34386e92d012185763cedef5a))
198
+ * **base-modal:** correct cb ([256a142](https://github.com/core-ds/core-components/commit/256a142398a9ada34386e92d012185763cedef5a))
183
199
 
184
200
 
185
201
 
@@ -190,4 +206,4 @@ remove z-index, add stack component
190
206
 
191
207
  ### Features
192
208
 
193
- * **backdrop:** add component ([948a6c2](https://github.com/alfa-laboratory/core-components/commit/948a6c2fb5ec58edb2d087691ce4713d75da6e35))
209
+ * **backdrop:** add component ([948a6c2](https://github.com/core-ds/core-components/commit/948a6c2fb5ec58edb2d087691ce4713d75da6e35))
package/dist/Component.d.ts CHANGED
@@ -119,6 +119,8 @@ type BaseModalContext = {
119
119
  hasScroll?: boolean;
120
120
  headerHighlighted?: boolean;
121
121
  footerHighlighted?: boolean;
122
+ headerOffset?: number;
123
+ setHeaderOffset: (offset: number) => void;
122
124
  contentRef: Ref<HTMLElement>;
123
125
  setHasHeader: (exists: boolean) => void;
124
126
  setHasFooter: (exists: boolean) => void;
package/dist/Component.js CHANGED
@@ -48,7 +48,7 @@ var __assign = function () {
48
48
  return __assign.apply(this, arguments);
49
49
  };
50
50
 
51
- 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"};
51
+ var styles = {"component":"base-modal__component_1o875","wrapper":"base-modal__wrapper_1o875","content":"base-modal__content_1o875","hidden":"base-modal__hidden_1o875","backdrop":"base-modal__backdrop_1o875","appear":"base-modal__appear_1o875","enter":"base-modal__enter_1o875","appearActive":"base-modal__appearActive_1o875","enterActive":"base-modal__enterActive_1o875","exit":"base-modal__exit_1o875","exitActive":"base-modal__exitActive_1o875","exitDone":"base-modal__exitDone_1o875"};
52
52
  require('./index.css')
53
53
 
54
54
  var BaseModalContext = React__default['default'].createContext({
@@ -57,6 +57,8 @@ var BaseModalContext = React__default['default'].createContext({
57
57
  hasScroll: false,
58
58
  headerHighlighted: false,
59
59
  footerHighlighted: false,
60
+ headerOffset: 0,
61
+ setHeaderOffset: function () { return null; },
60
62
  contentRef: function () { return null; },
61
63
  setHasHeader: function () { return null; },
62
64
  setHasFooter: function () { return null; },
@@ -70,6 +72,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
70
72
  var _r = React.useState(false), hasFooter = _r[0], setHasFooter = _r[1];
71
73
  var _s = React.useState(false), headerHighlighted = _s[0], setHeaderHighlighted = _s[1];
72
74
  var _t = React.useState(false), footerHighlighted = _t[0], setFooterHighlighted = _t[1];
75
+ var _u = React.useState(0), headerOffset = _u[0], setHeaderOffset = _u[1];
73
76
  var componentNodeRef = React.useRef(null);
74
77
  var wrapperRef = React.useRef(null);
75
78
  var scrollableNodeRef = React.useRef(null);
@@ -108,14 +111,14 @@ var BaseModal = React.forwardRef(function (_a, ref) {
108
111
  return;
109
112
  if (hasHeader) {
110
113
  setHeaderHighlighted(!utils.isScrolledToTop(scrollableNodeRef.current) &&
111
- componentNodeRef.current.getBoundingClientRect().top <= 0);
114
+ componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
112
115
  }
113
116
  if (hasFooter) {
114
117
  setFooterHighlighted(!utils.isScrolledToBottom(scrollableNodeRef.current) &&
115
118
  componentNodeRef.current.getBoundingClientRect().bottom >=
116
119
  window.innerHeight);
117
120
  }
118
- }, [hasFooter, hasHeader]);
121
+ }, [hasFooter, hasHeader, headerOffset]);
119
122
  var handleClose = React.useCallback(function (event, reason) {
120
123
  if (onClose) {
121
124
  onClose(event, reason);
@@ -210,6 +213,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
210
213
  hasScroll: hasScroll,
211
214
  headerHighlighted: headerHighlighted,
212
215
  footerHighlighted: footerHighlighted,
216
+ headerOffset: headerOffset,
217
+ setHeaderOffset: setHeaderOffset,
213
218
  contentRef: contentRef,
214
219
  setHasHeader: setHasHeader,
215
220
  setHasFooter: setHasFooter,
@@ -221,6 +226,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
221
226
  hasScroll,
222
227
  headerHighlighted,
223
228
  footerHighlighted,
229
+ headerOffset,
230
+ setHeaderOffset,
224
231
  handleClose,
225
232
  ]);
226
233
  if (!shouldRender)
package/dist/cssm/Component.d.ts CHANGED
@@ -119,6 +119,8 @@ type BaseModalContext = {
119
119
  hasScroll?: boolean;
120
120
  headerHighlighted?: boolean;
121
121
  footerHighlighted?: boolean;
122
+ headerOffset?: number;
123
+ setHeaderOffset: (offset: number) => void;
122
124
  contentRef: Ref<HTMLElement>;
123
125
  setHasHeader: (exists: boolean) => void;
124
126
  setHasFooter: (exists: boolean) => void;
package/dist/cssm/Component.js CHANGED
@@ -56,6 +56,8 @@ var BaseModalContext = React__default['default'].createContext({
56
56
  hasScroll: false,
57
57
  headerHighlighted: false,
58
58
  footerHighlighted: false,
59
+ headerOffset: 0,
60
+ setHeaderOffset: function () { return null; },
59
61
  contentRef: function () { return null; },
60
62
  setHasHeader: function () { return null; },
61
63
  setHasFooter: function () { return null; },
@@ -69,6 +71,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
69
71
  var _r = React.useState(false), hasFooter = _r[0], setHasFooter = _r[1];
70
72
  var _s = React.useState(false), headerHighlighted = _s[0], setHeaderHighlighted = _s[1];
71
73
  var _t = React.useState(false), footerHighlighted = _t[0], setFooterHighlighted = _t[1];
74
+ var _u = React.useState(0), headerOffset = _u[0], setHeaderOffset = _u[1];
72
75
  var componentNodeRef = React.useRef(null);
73
76
  var wrapperRef = React.useRef(null);
74
77
  var scrollableNodeRef = React.useRef(null);
@@ -107,14 +110,14 @@ var BaseModal = React.forwardRef(function (_a, ref) {
107
110
  return;
108
111
  if (hasHeader) {
109
112
  setHeaderHighlighted(!utils.isScrolledToTop(scrollableNodeRef.current) &&
110
- componentNodeRef.current.getBoundingClientRect().top <= 0);
113
+ componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
111
114
  }
112
115
  if (hasFooter) {
113
116
  setFooterHighlighted(!utils.isScrolledToBottom(scrollableNodeRef.current) &&
114
117
  componentNodeRef.current.getBoundingClientRect().bottom >=
115
118
  window.innerHeight);
116
119
  }
117
- }, [hasFooter, hasHeader]);
120
+ }, [hasFooter, hasHeader, headerOffset]);
118
121
  var handleClose = React.useCallback(function (event, reason) {
119
122
  if (onClose) {
120
123
  onClose(event, reason);
@@ -209,6 +212,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
209
212
  hasScroll: hasScroll,
210
213
  headerHighlighted: headerHighlighted,
211
214
  footerHighlighted: footerHighlighted,
215
+ headerOffset: headerOffset,
216
+ setHeaderOffset: setHeaderOffset,
212
217
  contentRef: contentRef,
213
218
  setHasHeader: setHasHeader,
214
219
  setHasFooter: setHasFooter,
@@ -220,6 +225,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
220
225
  hasScroll,
221
226
  headerHighlighted,
222
227
  footerHighlighted,
228
+ headerOffset,
229
+ setHeaderOffset,
223
230
  handleClose,
224
231
  ]);
225
232
  if (!shouldRender)
package/dist/esm/Component.d.ts CHANGED
@@ -119,6 +119,8 @@ type BaseModalContext = {
119
119
  hasScroll?: boolean;
120
120
  headerHighlighted?: boolean;
121
121
  footerHighlighted?: boolean;
122
+ headerOffset?: number;
123
+ setHeaderOffset: (offset: number) => void;
122
124
  contentRef: Ref<HTMLElement>;
123
125
  setHasHeader: (exists: boolean) => void;
124
126
  setHasFooter: (exists: boolean) => void;
package/dist/esm/Component.js CHANGED
@@ -37,7 +37,7 @@ var __assign = function () {
37
37
  return __assign.apply(this, arguments);
38
38
  };
39
39
 
40
- 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"};
40
+ var styles = {"component":"base-modal__component_1o875","wrapper":"base-modal__wrapper_1o875","content":"base-modal__content_1o875","hidden":"base-modal__hidden_1o875","backdrop":"base-modal__backdrop_1o875","appear":"base-modal__appear_1o875","enter":"base-modal__enter_1o875","appearActive":"base-modal__appearActive_1o875","enterActive":"base-modal__enterActive_1o875","exit":"base-modal__exit_1o875","exitActive":"base-modal__exitActive_1o875","exitDone":"base-modal__exitDone_1o875"};
41
41
  require('./index.css')
42
42
 
43
43
  var BaseModalContext = React.createContext({
@@ -46,6 +46,8 @@ var BaseModalContext = React.createContext({
46
46
  hasScroll: false,
47
47
  headerHighlighted: false,
48
48
  footerHighlighted: false,
49
+ headerOffset: 0,
50
+ setHeaderOffset: function () { return null; },
49
51
  contentRef: function () { return null; },
50
52
  setHasHeader: function () { return null; },
51
53
  setHasFooter: function () { return null; },
@@ -59,6 +61,7 @@ var BaseModal = forwardRef(function (_a, ref) {
59
61
  var _r = useState(false), hasFooter = _r[0], setHasFooter = _r[1];
60
62
  var _s = useState(false), headerHighlighted = _s[0], setHeaderHighlighted = _s[1];
61
63
  var _t = useState(false), footerHighlighted = _t[0], setFooterHighlighted = _t[1];
64
+ var _u = useState(0), headerOffset = _u[0], setHeaderOffset = _u[1];
62
65
  var componentNodeRef = useRef(null);
63
66
  var wrapperRef = useRef(null);
64
67
  var scrollableNodeRef = useRef(null);
@@ -97,14 +100,14 @@ var BaseModal = forwardRef(function (_a, ref) {
97
100
  return;
98
101
  if (hasHeader) {
99
102
  setHeaderHighlighted(!isScrolledToTop(scrollableNodeRef.current) &&
100
- componentNodeRef.current.getBoundingClientRect().top <= 0);
103
+ componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
101
104
  }
102
105
  if (hasFooter) {
103
106
  setFooterHighlighted(!isScrolledToBottom(scrollableNodeRef.current) &&
104
107
  componentNodeRef.current.getBoundingClientRect().bottom >=
105
108
  window.innerHeight);
106
109
  }
107
- }, [hasFooter, hasHeader]);
110
+ }, [hasFooter, hasHeader, headerOffset]);
108
111
  var handleClose = useCallback(function (event, reason) {
109
112
  if (onClose) {
110
113
  onClose(event, reason);
@@ -199,6 +202,8 @@ var BaseModal = forwardRef(function (_a, ref) {
199
202
  hasScroll: hasScroll,
200
203
  headerHighlighted: headerHighlighted,
201
204
  footerHighlighted: footerHighlighted,
205
+ headerOffset: headerOffset,
206
+ setHeaderOffset: setHeaderOffset,
202
207
  contentRef: contentRef,
203
208
  setHasHeader: setHasHeader,
204
209
  setHasFooter: setHasFooter,
@@ -210,6 +215,8 @@ var BaseModal = forwardRef(function (_a, ref) {
210
215
  hasScroll,
211
216
  headerHighlighted,
212
217
  footerHighlighted,
218
+ headerOffset,
219
+ setHeaderOffset,
213
220
  handleClose,
214
221
  ]);
215
222
  if (!shouldRender)
package/dist/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: zuxb3 */
1
+ /* hash: 1jd4u */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  }
@@ -10,14 +10,14 @@
10
10
 
11
11
  /* Hard up */
12
12
  }
13
- .base-modal__component_pvkw5 {
13
+ .base-modal__component_1o875 {
14
14
  position: relative;
15
15
  box-sizing: border-box;
16
16
  background: var(--color-light-bg-primary);
17
17
  margin: auto;
18
18
  flex-shrink: 0;
19
19
  }
20
- .base-modal__wrapper_pvkw5 {
20
+ .base-modal__wrapper_1o875 {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  left: 0;
@@ -30,33 +30,33 @@
30
30
  align-items: center;
31
31
  outline: 0;
32
32
  }
33
- .base-modal__content_pvkw5 {
33
+ .base-modal__content_1o875 {
34
34
  width: 100%;
35
35
  height: 100%;
36
36
  display: flex;
37
37
  flex-direction: column;
38
38
  flex: 1;
39
39
  }
40
- .base-modal__hidden_pvkw5 {
40
+ .base-modal__hidden_1o875 {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_pvkw5 {
43
+ .base-modal__backdrop_1o875 {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_pvkw5,
47
- .base-modal__enter_pvkw5 {
46
+ .base-modal__appear_1o875,
47
+ .base-modal__enter_1o875 {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_pvkw5,
51
- .base-modal__enterActive_pvkw5 {
50
+ .base-modal__appearActive_1o875,
51
+ .base-modal__enterActive_1o875 {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_pvkw5 {
55
+ .base-modal__exit_1o875 {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_pvkw5,
59
- .base-modal__exitDone_pvkw5 {
58
+ .base-modal__exitActive_1o875,
59
+ .base-modal__exitDone_1o875 {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: zuxb3 */
1
+ /* hash: 1jd4u */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  }
@@ -10,14 +10,14 @@
10
10
 
11
11
  /* Hard up */
12
12
  }
13
- .base-modal__component_pvkw5 {
13
+ .base-modal__component_1o875 {
14
14
  position: relative;
15
15
  box-sizing: border-box;
16
16
  background: var(--color-light-bg-primary);
17
17
  margin: auto;
18
18
  flex-shrink: 0;
19
19
  }
20
- .base-modal__wrapper_pvkw5 {
20
+ .base-modal__wrapper_1o875 {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  left: 0;
@@ -30,33 +30,33 @@
30
30
  align-items: center;
31
31
  outline: 0;
32
32
  }
33
- .base-modal__content_pvkw5 {
33
+ .base-modal__content_1o875 {
34
34
  width: 100%;
35
35
  height: 100%;
36
36
  display: flex;
37
37
  flex-direction: column;
38
38
  flex: 1;
39
39
  }
40
- .base-modal__hidden_pvkw5 {
40
+ .base-modal__hidden_1o875 {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_pvkw5 {
43
+ .base-modal__backdrop_1o875 {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_pvkw5,
47
- .base-modal__enter_pvkw5 {
46
+ .base-modal__appear_1o875,
47
+ .base-modal__enter_1o875 {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_pvkw5,
51
- .base-modal__enterActive_pvkw5 {
50
+ .base-modal__appearActive_1o875,
51
+ .base-modal__enterActive_1o875 {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_pvkw5 {
55
+ .base-modal__exit_1o875 {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_pvkw5,
59
- .base-modal__exitDone_pvkw5 {
58
+ .base-modal__exitActive_1o875,
59
+ .base-modal__exitDone_1o875 {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
package/dist/modern/Component.d.ts CHANGED
@@ -119,6 +119,8 @@ type BaseModalContext = {
119
119
  hasScroll?: boolean;
120
120
  headerHighlighted?: boolean;
121
121
  footerHighlighted?: boolean;
122
+ headerOffset?: number;
123
+ setHeaderOffset: (offset: number) => void;
122
124
  contentRef: Ref<HTMLElement>;
123
125
  setHasHeader: (exists: boolean) => void;
124
126
  setHasFooter: (exists: boolean) => void;
package/dist/modern/Component.js CHANGED
@@ -10,7 +10,7 @@ import { stackingOrder, Stack } from '@alfalab/core-components-stack/dist/modern
10
10
  import '@alfalab/core-components-global-store/dist/modern';
11
11
  import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
12
12
 
13
- 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"};
13
+ var styles = {"component":"base-modal__component_1o875","wrapper":"base-modal__wrapper_1o875","content":"base-modal__content_1o875","hidden":"base-modal__hidden_1o875","backdrop":"base-modal__backdrop_1o875","appear":"base-modal__appear_1o875","enter":"base-modal__enter_1o875","appearActive":"base-modal__appearActive_1o875","enterActive":"base-modal__enterActive_1o875","exit":"base-modal__exit_1o875","exitActive":"base-modal__exitActive_1o875","exitDone":"base-modal__exitDone_1o875"};
14
14
  require('./index.css')
15
15
 
16
16
  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -20,6 +20,8 @@ const BaseModalContext = React.createContext({
20
20
  hasScroll: false,
21
21
  headerHighlighted: false,
22
22
  footerHighlighted: false,
23
+ headerOffset: 0,
24
+ setHeaderOffset: () => null,
23
25
  contentRef: () => null,
24
26
  setHasHeader: () => null,
25
27
  setHasFooter: () => null,
@@ -32,6 +34,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
32
34
  const [hasFooter, setHasFooter] = useState(false);
33
35
  const [headerHighlighted, setHeaderHighlighted] = useState(false);
34
36
  const [footerHighlighted, setFooterHighlighted] = useState(false);
37
+ const [headerOffset, setHeaderOffset] = useState(0);
35
38
  const componentNodeRef = useRef(null);
36
39
  const wrapperRef = useRef(null);
37
40
  const scrollableNodeRef = useRef(null);
@@ -70,14 +73,14 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
70
73
  return;
71
74
  if (hasHeader) {
72
75
  setHeaderHighlighted(!isScrolledToTop(scrollableNodeRef.current) &&
73
- componentNodeRef.current.getBoundingClientRect().top <= 0);
76
+ componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
74
77
  }
75
78
  if (hasFooter) {
76
79
  setFooterHighlighted(!isScrolledToBottom(scrollableNodeRef.current) &&
77
80
  componentNodeRef.current.getBoundingClientRect().bottom >=
78
81
  window.innerHeight);
79
82
  }
80
- }, [hasFooter, hasHeader]);
83
+ }, [hasFooter, hasHeader, headerOffset]);
81
84
  const handleClose = useCallback((event, reason) => {
82
85
  if (onClose) {
83
86
  onClose(event, reason);
@@ -172,6 +175,8 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
172
175
  hasScroll,
173
176
  headerHighlighted,
174
177
  footerHighlighted,
178
+ headerOffset,
179
+ setHeaderOffset,
175
180
  contentRef,
176
181
  setHasHeader,
177
182
  setHasFooter,
@@ -183,6 +188,8 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
183
188
  hasScroll,
184
189
  headerHighlighted,
185
190
  footerHighlighted,
191
+ headerOffset,
192
+ setHeaderOffset,
186
193
  handleClose,
187
194
  ]);
188
195
  if (!shouldRender)
package/dist/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: zuxb3 */
1
+ /* hash: 1jd4u */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  }
@@ -10,14 +10,14 @@
10
10
 
11
11
  /* Hard up */
12
12
  }
13
- .base-modal__component_pvkw5 {
13
+ .base-modal__component_1o875 {
14
14
  position: relative;
15
15
  box-sizing: border-box;
16
16
  background: var(--color-light-bg-primary);
17
17
  margin: auto;
18
18
  flex-shrink: 0;
19
19
  }
20
- .base-modal__wrapper_pvkw5 {
20
+ .base-modal__wrapper_1o875 {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  left: 0;
@@ -30,33 +30,33 @@
30
30
  align-items: center;
31
31
  outline: 0;
32
32
  }
33
- .base-modal__content_pvkw5 {
33
+ .base-modal__content_1o875 {
34
34
  width: 100%;
35
35
  height: 100%;
36
36
  display: flex;
37
37
  flex-direction: column;
38
38
  flex: 1;
39
39
  }
40
- .base-modal__hidden_pvkw5 {
40
+ .base-modal__hidden_1o875 {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_pvkw5 {
43
+ .base-modal__backdrop_1o875 {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_pvkw5,
47
- .base-modal__enter_pvkw5 {
46
+ .base-modal__appear_1o875,
47
+ .base-modal__enter_1o875 {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_pvkw5,
51
- .base-modal__enterActive_pvkw5 {
50
+ .base-modal__appearActive_1o875,
51
+ .base-modal__enterActive_1o875 {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_pvkw5 {
55
+ .base-modal__exit_1o875 {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_pvkw5,
59
- .base-modal__exitDone_pvkw5 {
58
+ .base-modal__exitActive_1o875,
59
+ .base-modal__exitDone_1o875 {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-base-modal",
3
- "version": "3.2.0",
3
+ "version": "4.0.2",
4
4
  "description": "BaseModal component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,15 +15,15 @@
15
15
  "access": "public"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-backdrop": "^2.0.1",
19
- "@alfalab/core-components-global-store": "^1.1.0",
20
- "@alfalab/core-components-portal": "^2.0.1",
21
- "@alfalab/core-components-stack": "^3.0.1",
22
- "classnames": "^2.2.6",
23
- "react-focus-lock": "^2.5.0",
24
- "react-merge-refs": "^1.1.0",
25
- "react-transition-group": "^4.3.0",
26
- "resize-observer": "^1.0.0"
18
+ "@alfalab/core-components-backdrop": "^2.0.3",
19
+ "@alfalab/core-components-global-store": "^1.1.1",
20
+ "@alfalab/core-components-portal": "^2.0.2",
21
+ "@alfalab/core-components-stack": "^3.0.2",
22
+ "classnames": "2.2.6",
23
+ "react-focus-lock": "2.5.0",
24
+ "react-merge-refs": "1.1.0",
25
+ "react-transition-group": "4.4.1",
26
+ "resize-observer": "1.0.0"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@types/react-transition-group": "^4.2.4"
@@ -31,5 +31,5 @@
31
31
  "peerDependencies": {
32
32
  "react": "^16.9.0 || ^17.0.1"
33
33
  },
34
- "gitHead": "ddf4fab6035139cf412e0acb7174ef388f23e4f2"
34
+ "gitHead": "8d998af881e79e8b524179aa50cdb117c1380c74"
35
35
  }