@gem-sdk/core 1.41.0-dev.39 → 1.41.0-dev.42

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 (7) hide show
  1. package/dist/cjs/components/ai-generator/AIContentGenerator.js +21 -13
  2. package/dist/cjs/components/ai-generator/AIGenContentLoading.js +39 -15
  3. package/dist/cjs/components/ai-generator/hooks/useFlipPopup.js +25 -15
  4. package/dist/esm/components/ai-generator/AIContentGenerator.js +21 -13
  5. package/dist/esm/components/ai-generator/AIGenContentLoading.js +39 -15
  6. package/dist/esm/components/ai-generator/hooks/useFlipPopup.js +25 -15
  7. package/package.json +1 -1
package/dist/cjs/components/ai-generator/AIContentGenerator.js CHANGED
@@ -19,10 +19,12 @@ const AIContentGenerator = ({ ...props })=>{
19
19
  const genTool = react.useRef(null);
20
20
  const genPopup = react.useRef(null);
21
21
  const genPopupHeader = react.useRef(null);
22
- const { popupPositionX, popupPositionY, isValidating: isValidatingFlipPopup, maxHeight: popupMaxHeight } = useFlipPopup.useFlipPopup(isShowPopup, {
22
+ const genButtonWrapper = react.useRef(null);
23
+ const { popupPositionX, popupPositionY, isValidating: isValidatingFlipPopup, bodyMaxHeight: popupBodyMaxHeight } = useFlipPopup.useFlipPopup(isShowPopup, {
23
24
  genTool,
24
25
  genPopup,
25
- genPopupHeader
26
+ genPopupHeader,
27
+ genButtonWrapper
26
28
  });
27
29
  const { isGenerating, onGenerate, onOpenProductElementSettings } = useListenEventGenerate.useListenEventGenerate({
28
30
  uid: props.uid,
@@ -56,6 +58,7 @@ const AIContentGenerator = ({ ...props })=>{
56
58
  const handleGenerateContent = ()=>{
57
59
  const body = getRequestBody();
58
60
  onGenerate(body);
61
+ hidePopup();
59
62
  };
60
63
  const handleOpenProductSetting = ()=>{
61
64
  onOpenProductElementSettings(productElement.uid ?? '');
@@ -91,7 +94,9 @@ const AIContentGenerator = ({ ...props })=>{
91
94
  /*#__PURE__*/ jsxRuntime.jsx("div", {
92
95
  className: "gp-gen-content-toolbar gp-border-r-[#6a6a6a] gp-border-r gp-pr-1 gp-mr-1",
93
96
  children: /*#__PURE__*/ jsxRuntime.jsxs("button", {
94
- className: "gp-p-1 gp-text-xs gp-flex gp-gap-1 gp-items-center gp-rounded-md hover:gp-bg-[#3B3B3B] gp-font-medium",
97
+ className: classNames({
98
+ 'gp-bg-[#3B3B3B]': isShowPopup
99
+ }, 'gp-p-1 gp-text-xs gp-flex gp-gap-1 gp-items-center gp-rounded-md hover:gp-bg-[#3B3B3B] gp-font-medium'),
95
100
  onClick: togglePopup,
96
101
  children: [
97
102
  /*#__PURE__*/ jsxRuntime.jsx(AIIcon.AIIcon, {}),
@@ -127,10 +132,10 @@ const AIContentGenerator = ({ ...props })=>{
127
132
  }),
128
133
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
129
134
  className: classNames({
130
- 'gp-overflow-auto': popupMaxHeight
131
- }, 'gp-pt-2 gp-pb-4 gp-text-left gp-px-4 scrollbar:gp-w-1 scrollbar-thumb:gp-bg-[#999] scrollbar-thumb:gp-rounded-xl'),
135
+ 'gp-overflow-auto': popupBodyMaxHeight !== null
136
+ }, 'gp-pt-2 gp-text-left gp-px-4 scrollbar:gp-w-1 scrollbar-thumb:gp-bg-[#999] scrollbar-thumb:gp-rounded-xl'),
132
137
  style: {
133
- maxHeight: popupMaxHeight ? `${popupMaxHeight}px` : 'auto'
138
+ maxHeight: popupBodyMaxHeight !== null ? `${popupBodyMaxHeight}px` : 'auto'
134
139
  },
135
140
  children: [
136
141
  /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -144,7 +149,7 @@ const AIContentGenerator = ({ ...props })=>{
144
149
  className: "gp-mb-4 gp-flex",
145
150
  children: /*#__PURE__*/ jsxRuntime.jsx("textarea", {
146
151
  className: "gp-p-2 gp-bg-[#333333] gp-rounded-lg gp-w-full gp-text-xs gp-text-white placeholder:gp-text-[#AAAAAA] gp-resize-none focus-visible:gp-outline-none",
147
- placeholder: "e.g: Generate feature benefits",
152
+ placeholder: "e.g: generate feature benefits",
148
153
  rows: 4,
149
154
  value: prompt,
150
155
  onChange: onChangePrompt
@@ -166,7 +171,6 @@ const AIContentGenerator = ({ ...props })=>{
166
171
  ]
167
172
  }),
168
173
  /*#__PURE__*/ jsxRuntime.jsx("div", {
169
- className: "gp-mb-4",
170
174
  children: /*#__PURE__*/ jsxRuntime.jsxs("button", {
171
175
  className: "gp-flex gp-justify-center gp-items-center gp-w-full gp-bg-[#333333] gp-py-2 gp-rounded-lg gp-gap-2 gp-text-xs gp-font-medium",
172
176
  onClick: toggleShowMore,
@@ -180,13 +184,17 @@ const AIContentGenerator = ({ ...props })=>{
180
184
  })
181
185
  ]
182
186
  })
183
- }),
184
- /*#__PURE__*/ jsxRuntime.jsx("button", {
185
- className: "gp-rounded-lg gp-w-full gp-text-xs gp-font-medium gp-bg-gradient-to-tl gp-from-[#3C38E1] gp-to-[#874CFD] gp-py-2",
186
- onClick: handleGenerateContent,
187
- children: isGenerating ? 'Generating...' : 'Generate'
188
187
  })
189
188
  ]
189
+ }),
190
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
191
+ className: "gp-p-4",
192
+ ref: genButtonWrapper,
193
+ children: /*#__PURE__*/ jsxRuntime.jsx("button", {
194
+ className: "gp-rounded-lg gp-w-full gp-text-xs gp-font-medium gp-bg-gradient-to-tl gp-from-[#3C38E1] gp-to-[#874CFD] gp-py-2",
195
+ onClick: handleGenerateContent,
196
+ children: isGenerating ? 'Generating...' : 'Generate'
197
+ })
190
198
  })
191
199
  ]
192
200
  })
package/dist/cjs/components/ai-generator/AIGenContentLoading.js CHANGED
@@ -4,10 +4,14 @@ var jsxRuntime = require('react/jsx-runtime');
4
4
  var react = require('react');
5
5
  var AIIcon = require('./icons/AIIcon.js');
6
6
 
7
+ function getRandomArbitrary(min, max) {
8
+ const randomNum = Math.random();
9
+ return randomNum * (max - min) + min;
10
+ }
7
11
  const AIGenContentLoading = ({ ...props })=>{
8
12
  const [isGenerating, setIsGenerating] = react.useState(false);
9
- const [numDots, setNumDots] = react.useState(1);
10
- const dotIncreaseInterval = react.useRef(null);
13
+ const [time, setTime] = react.useState(0);
14
+ const interval = react.useRef(null);
11
15
  const onGenerateContentStatus = react.useCallback((e)=>{
12
16
  const detail = e.detail;
13
17
  if (detail?.generatingUid !== props.uid) {
@@ -26,15 +30,25 @@ const AIGenContentLoading = ({ ...props })=>{
26
30
  ]);
27
31
  react.useEffect(()=>{
28
32
  if (isGenerating) {
29
- dotIncreaseInterval.current = setInterval(()=>{
30
- setNumDots((prev)=>prev === 3 ? 1 : prev + 1);
31
- }, 500);
32
- return;
33
+ handleFakeLoading();
34
+ } else {
35
+ setTime(0);
33
36
  }
34
- if (dotIncreaseInterval.current) clearInterval(dotIncreaseInterval.current);
37
+ return ()=>{
38
+ interval.current && clearInterval(interval.current);
39
+ };
35
40
  }, [
36
41
  isGenerating
37
42
  ]);
43
+ const handleFakeLoading = ()=>{
44
+ setTime(0);
45
+ interval.current = setInterval(()=>{
46
+ setTime((time)=>{
47
+ const randomNum = getRandomArbitrary(0, 6);
48
+ return time >= 580 ? time : time + randomNum;
49
+ });
50
+ }, 50);
51
+ };
38
52
  react.useEffect(()=>{
39
53
  window.addEventListener('editor:ai-generate-content-status', onGenerateContentStatus);
40
54
  return ()=>{
@@ -46,14 +60,24 @@ const AIGenContentLoading = ({ ...props })=>{
46
60
  return isGenerating ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
47
61
  className: "gp-absolute gp-top-0 gp-left-0 gp-w-full gp-h-full gp-bg-white gp-bg-opacity-70 gp-flex gp-justify-center gp-items-center gp-z-100 gp-gap-2",
48
62
  children: [
49
- /*#__PURE__*/ jsxRuntime.jsx(AIIcon.AIIcon, {}),
50
- /*#__PURE__*/ jsxRuntime.jsxs("span", {
51
- className: "gp-font-medium",
52
- children: [
53
- "Generating",
54
- Array.from(Array(numDots).keys()).map(()=>'.')
55
- ]
56
- })
63
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
64
+ className: "gp-absolute gp-left-0 gp-top-0 gp-z-2 gp-flex gp-h-full gp-w-full",
65
+ children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
66
+ className: `gp-relative gp-h-[2px] gp-w-full gp-overflow-hidden gp-rounded-md`,
67
+ children: [
68
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
69
+ className: "gp-absolute gp-h-full gp-w-full gp-rounded-md gp-bg-[#F4F4F4]"
70
+ }),
71
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
72
+ className: "gps-image-to-layout-progress-bar gp-absolute gp-h-full gp-rounded-md gp-transition-all",
73
+ style: {
74
+ width: `${time / 600 * 100}%`
75
+ }
76
+ })
77
+ ]
78
+ })
79
+ }),
80
+ /*#__PURE__*/ jsxRuntime.jsx(AIIcon.AIIcon, {})
57
81
  ]
58
82
  }) : null;
59
83
  };
package/dist/cjs/components/ai-generator/hooks/useFlipPopup.js CHANGED
@@ -3,35 +3,45 @@
3
3
  var react = require('react');
4
4
 
5
5
  const useFlipPopup = (isShowPopup, dom)=>{
6
- const { genTool, genPopup, genPopupHeader } = dom;
6
+ const { genTool, genPopup, genPopupHeader, genButtonWrapper } = dom;
7
7
  const [popupPositionY, setPopupPositionY] = react.useState('top');
8
8
  const [popupPositionX, setPopupPositionX] = react.useState('left');
9
- const [maxHeight, setMaxHeight] = react.useState(null);
9
+ const [bodyMaxHeight, setBodyMaxHeight] = react.useState(null);
10
10
  const [isValidating, setIsValidating] = react.useState(true);
11
- const calculateMaxHeight = react.useCallback((popupPositionY)=>{
11
+ const calculateMaxHeight = react.useCallback((currentPopupPositionY)=>{
12
12
  const parentOverflow = genTool.current?.closest("[class~='gp-overflow-hidden']");
13
13
  if (!parentOverflow || !genTool.current) {
14
- setMaxHeight(null);
15
- return;
14
+ return {
15
+ positionY: currentPopupPositionY,
16
+ maxHeight: null
17
+ };
16
18
  }
17
19
  const parentOverflowPos = parentOverflow.getBoundingClientRect();
18
20
  const genToolPos = genTool.current.getBoundingClientRect();
19
21
  const genToolHeaderHeight = genPopupHeader.current?.getBoundingClientRect().height || 0;
22
+ const genButtonHeight = genButtonWrapper.current?.getBoundingClientRect().height || 0;
20
23
  const DISTANCE = 8;
21
- if (popupPositionY === 'top') {
22
- const maxHeight = Math.max(parentOverflowPos.bottom - genToolPos.bottom - genToolHeaderHeight - DISTANCE, 0);
23
- setMaxHeight(maxHeight);
24
- } else {
25
- const maxHeight = Math.max(genToolPos.top - parentOverflowPos.top - genToolHeaderHeight - DISTANCE, 0);
26
- setMaxHeight(maxHeight);
24
+ const maxHeightForPositionTop = Math.max(parentOverflowPos.bottom - genToolPos.bottom - genToolHeaderHeight - genButtonHeight - DISTANCE, 0);
25
+ const maxHeightForPositionBottom = Math.max(genToolPos.top - parentOverflowPos.top - genToolHeaderHeight - genButtonHeight - DISTANCE, 0);
26
+ if (maxHeightForPositionBottom > maxHeightForPositionTop) {
27
+ return {
28
+ positionY: 'bottom',
29
+ maxHeight: maxHeightForPositionBottom
30
+ };
27
31
  }
32
+ return {
33
+ positionY: 'top',
34
+ maxHeight: maxHeightForPositionTop
35
+ };
28
36
  }, [
29
37
  genTool,
30
- genPopupHeader
38
+ genPopupHeader,
39
+ genButtonWrapper
31
40
  ]);
32
41
  const handleChangePopupPositionY = react.useCallback((posY)=>{
33
- setPopupPositionY(posY);
34
- calculateMaxHeight(posY);
42
+ const { positionY: calcPosY, maxHeight } = calculateMaxHeight(posY);
43
+ setPopupPositionY(calcPosY);
44
+ setBodyMaxHeight(maxHeight);
35
45
  }, [
36
46
  calculateMaxHeight
37
47
  ]);
@@ -91,7 +101,7 @@ const useFlipPopup = (isShowPopup, dom)=>{
91
101
  ]);
92
102
  return {
93
103
  isValidating,
94
- maxHeight,
104
+ bodyMaxHeight,
95
105
  popupPositionY,
96
106
  popupPositionX
97
107
  };
package/dist/esm/components/ai-generator/AIContentGenerator.js CHANGED
@@ -17,10 +17,12 @@ const AIContentGenerator = ({ ...props })=>{
17
17
  const genTool = useRef(null);
18
18
  const genPopup = useRef(null);
19
19
  const genPopupHeader = useRef(null);
20
- const { popupPositionX, popupPositionY, isValidating: isValidatingFlipPopup, maxHeight: popupMaxHeight } = useFlipPopup(isShowPopup, {
20
+ const genButtonWrapper = useRef(null);
21
+ const { popupPositionX, popupPositionY, isValidating: isValidatingFlipPopup, bodyMaxHeight: popupBodyMaxHeight } = useFlipPopup(isShowPopup, {
21
22
  genTool,
22
23
  genPopup,
23
- genPopupHeader
24
+ genPopupHeader,
25
+ genButtonWrapper
24
26
  });
25
27
  const { isGenerating, onGenerate, onOpenProductElementSettings } = useListenEventGenerate({
26
28
  uid: props.uid,
@@ -54,6 +56,7 @@ const AIContentGenerator = ({ ...props })=>{
54
56
  const handleGenerateContent = ()=>{
55
57
  const body = getRequestBody();
56
58
  onGenerate(body);
59
+ hidePopup();
57
60
  };
58
61
  const handleOpenProductSetting = ()=>{
59
62
  onOpenProductElementSettings(productElement.uid ?? '');
@@ -89,7 +92,9 @@ const AIContentGenerator = ({ ...props })=>{
89
92
  /*#__PURE__*/ jsx("div", {
90
93
  className: "gp-gen-content-toolbar gp-border-r-[#6a6a6a] gp-border-r gp-pr-1 gp-mr-1",
91
94
  children: /*#__PURE__*/ jsxs("button", {
92
- className: "gp-p-1 gp-text-xs gp-flex gp-gap-1 gp-items-center gp-rounded-md hover:gp-bg-[#3B3B3B] gp-font-medium",
95
+ className: classNames({
96
+ 'gp-bg-[#3B3B3B]': isShowPopup
97
+ }, 'gp-p-1 gp-text-xs gp-flex gp-gap-1 gp-items-center gp-rounded-md hover:gp-bg-[#3B3B3B] gp-font-medium'),
93
98
  onClick: togglePopup,
94
99
  children: [
95
100
  /*#__PURE__*/ jsx(AIIcon, {}),
@@ -125,10 +130,10 @@ const AIContentGenerator = ({ ...props })=>{
125
130
  }),
126
131
  /*#__PURE__*/ jsxs("div", {
127
132
  className: classNames({
128
- 'gp-overflow-auto': popupMaxHeight
129
- }, 'gp-pt-2 gp-pb-4 gp-text-left gp-px-4 scrollbar:gp-w-1 scrollbar-thumb:gp-bg-[#999] scrollbar-thumb:gp-rounded-xl'),
133
+ 'gp-overflow-auto': popupBodyMaxHeight !== null
134
+ }, 'gp-pt-2 gp-text-left gp-px-4 scrollbar:gp-w-1 scrollbar-thumb:gp-bg-[#999] scrollbar-thumb:gp-rounded-xl'),
130
135
  style: {
131
- maxHeight: popupMaxHeight ? `${popupMaxHeight}px` : 'auto'
136
+ maxHeight: popupBodyMaxHeight !== null ? `${popupBodyMaxHeight}px` : 'auto'
132
137
  },
133
138
  children: [
134
139
  /*#__PURE__*/ jsx("div", {
@@ -142,7 +147,7 @@ const AIContentGenerator = ({ ...props })=>{
142
147
  className: "gp-mb-4 gp-flex",
143
148
  children: /*#__PURE__*/ jsx("textarea", {
144
149
  className: "gp-p-2 gp-bg-[#333333] gp-rounded-lg gp-w-full gp-text-xs gp-text-white placeholder:gp-text-[#AAAAAA] gp-resize-none focus-visible:gp-outline-none",
145
- placeholder: "e.g: Generate feature benefits",
150
+ placeholder: "e.g: generate feature benefits",
146
151
  rows: 4,
147
152
  value: prompt,
148
153
  onChange: onChangePrompt
@@ -164,7 +169,6 @@ const AIContentGenerator = ({ ...props })=>{
164
169
  ]
165
170
  }),
166
171
  /*#__PURE__*/ jsx("div", {
167
- className: "gp-mb-4",
168
172
  children: /*#__PURE__*/ jsxs("button", {
169
173
  className: "gp-flex gp-justify-center gp-items-center gp-w-full gp-bg-[#333333] gp-py-2 gp-rounded-lg gp-gap-2 gp-text-xs gp-font-medium",
170
174
  onClick: toggleShowMore,
@@ -178,13 +182,17 @@ const AIContentGenerator = ({ ...props })=>{
178
182
  })
179
183
  ]
180
184
  })
181
- }),
182
- /*#__PURE__*/ jsx("button", {
183
- className: "gp-rounded-lg gp-w-full gp-text-xs gp-font-medium gp-bg-gradient-to-tl gp-from-[#3C38E1] gp-to-[#874CFD] gp-py-2",
184
- onClick: handleGenerateContent,
185
- children: isGenerating ? 'Generating...' : 'Generate'
186
185
  })
187
186
  ]
187
+ }),
188
+ /*#__PURE__*/ jsx("div", {
189
+ className: "gp-p-4",
190
+ ref: genButtonWrapper,
191
+ children: /*#__PURE__*/ jsx("button", {
192
+ className: "gp-rounded-lg gp-w-full gp-text-xs gp-font-medium gp-bg-gradient-to-tl gp-from-[#3C38E1] gp-to-[#874CFD] gp-py-2",
193
+ onClick: handleGenerateContent,
194
+ children: isGenerating ? 'Generating...' : 'Generate'
195
+ })
188
196
  })
189
197
  ]
190
198
  })
package/dist/esm/components/ai-generator/AIGenContentLoading.js CHANGED
@@ -2,10 +2,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { useState, useRef, useCallback, useEffect } from 'react';
3
3
  import { AIIcon } from './icons/AIIcon.js';
4
4
 
5
+ function getRandomArbitrary(min, max) {
6
+ const randomNum = Math.random();
7
+ return randomNum * (max - min) + min;
8
+ }
5
9
  const AIGenContentLoading = ({ ...props })=>{
6
10
  const [isGenerating, setIsGenerating] = useState(false);
7
- const [numDots, setNumDots] = useState(1);
8
- const dotIncreaseInterval = useRef(null);
11
+ const [time, setTime] = useState(0);
12
+ const interval = useRef(null);
9
13
  const onGenerateContentStatus = useCallback((e)=>{
10
14
  const detail = e.detail;
11
15
  if (detail?.generatingUid !== props.uid) {
@@ -24,15 +28,25 @@ const AIGenContentLoading = ({ ...props })=>{
24
28
  ]);
25
29
  useEffect(()=>{
26
30
  if (isGenerating) {
27
- dotIncreaseInterval.current = setInterval(()=>{
28
- setNumDots((prev)=>prev === 3 ? 1 : prev + 1);
29
- }, 500);
30
- return;
31
+ handleFakeLoading();
32
+ } else {
33
+ setTime(0);
31
34
  }
32
- if (dotIncreaseInterval.current) clearInterval(dotIncreaseInterval.current);
35
+ return ()=>{
36
+ interval.current && clearInterval(interval.current);
37
+ };
33
38
  }, [
34
39
  isGenerating
35
40
  ]);
41
+ const handleFakeLoading = ()=>{
42
+ setTime(0);
43
+ interval.current = setInterval(()=>{
44
+ setTime((time)=>{
45
+ const randomNum = getRandomArbitrary(0, 6);
46
+ return time >= 580 ? time : time + randomNum;
47
+ });
48
+ }, 50);
49
+ };
36
50
  useEffect(()=>{
37
51
  window.addEventListener('editor:ai-generate-content-status', onGenerateContentStatus);
38
52
  return ()=>{
@@ -44,14 +58,24 @@ const AIGenContentLoading = ({ ...props })=>{
44
58
  return isGenerating ? /*#__PURE__*/ jsxs("div", {
45
59
  className: "gp-absolute gp-top-0 gp-left-0 gp-w-full gp-h-full gp-bg-white gp-bg-opacity-70 gp-flex gp-justify-center gp-items-center gp-z-100 gp-gap-2",
46
60
  children: [
47
- /*#__PURE__*/ jsx(AIIcon, {}),
48
- /*#__PURE__*/ jsxs("span", {
49
- className: "gp-font-medium",
50
- children: [
51
- "Generating",
52
- Array.from(Array(numDots).keys()).map(()=>'.')
53
- ]
54
- })
61
+ /*#__PURE__*/ jsx("div", {
62
+ className: "gp-absolute gp-left-0 gp-top-0 gp-z-2 gp-flex gp-h-full gp-w-full",
63
+ children: /*#__PURE__*/ jsxs("div", {
64
+ className: `gp-relative gp-h-[2px] gp-w-full gp-overflow-hidden gp-rounded-md`,
65
+ children: [
66
+ /*#__PURE__*/ jsx("div", {
67
+ className: "gp-absolute gp-h-full gp-w-full gp-rounded-md gp-bg-[#F4F4F4]"
68
+ }),
69
+ /*#__PURE__*/ jsx("div", {
70
+ className: "gps-image-to-layout-progress-bar gp-absolute gp-h-full gp-rounded-md gp-transition-all",
71
+ style: {
72
+ width: `${time / 600 * 100}%`
73
+ }
74
+ })
75
+ ]
76
+ })
77
+ }),
78
+ /*#__PURE__*/ jsx(AIIcon, {})
55
79
  ]
56
80
  }) : null;
57
81
  };
package/dist/esm/components/ai-generator/hooks/useFlipPopup.js CHANGED
@@ -1,35 +1,45 @@
1
1
  import { useState, useCallback, useEffect } from 'react';
2
2
 
3
3
  const useFlipPopup = (isShowPopup, dom)=>{
4
- const { genTool, genPopup, genPopupHeader } = dom;
4
+ const { genTool, genPopup, genPopupHeader, genButtonWrapper } = dom;
5
5
  const [popupPositionY, setPopupPositionY] = useState('top');
6
6
  const [popupPositionX, setPopupPositionX] = useState('left');
7
- const [maxHeight, setMaxHeight] = useState(null);
7
+ const [bodyMaxHeight, setBodyMaxHeight] = useState(null);
8
8
  const [isValidating, setIsValidating] = useState(true);
9
- const calculateMaxHeight = useCallback((popupPositionY)=>{
9
+ const calculateMaxHeight = useCallback((currentPopupPositionY)=>{
10
10
  const parentOverflow = genTool.current?.closest("[class~='gp-overflow-hidden']");
11
11
  if (!parentOverflow || !genTool.current) {
12
- setMaxHeight(null);
13
- return;
12
+ return {
13
+ positionY: currentPopupPositionY,
14
+ maxHeight: null
15
+ };
14
16
  }
15
17
  const parentOverflowPos = parentOverflow.getBoundingClientRect();
16
18
  const genToolPos = genTool.current.getBoundingClientRect();
17
19
  const genToolHeaderHeight = genPopupHeader.current?.getBoundingClientRect().height || 0;
20
+ const genButtonHeight = genButtonWrapper.current?.getBoundingClientRect().height || 0;
18
21
  const DISTANCE = 8;
19
- if (popupPositionY === 'top') {
20
- const maxHeight = Math.max(parentOverflowPos.bottom - genToolPos.bottom - genToolHeaderHeight - DISTANCE, 0);
21
- setMaxHeight(maxHeight);
22
- } else {
23
- const maxHeight = Math.max(genToolPos.top - parentOverflowPos.top - genToolHeaderHeight - DISTANCE, 0);
24
- setMaxHeight(maxHeight);
22
+ const maxHeightForPositionTop = Math.max(parentOverflowPos.bottom - genToolPos.bottom - genToolHeaderHeight - genButtonHeight - DISTANCE, 0);
23
+ const maxHeightForPositionBottom = Math.max(genToolPos.top - parentOverflowPos.top - genToolHeaderHeight - genButtonHeight - DISTANCE, 0);
24
+ if (maxHeightForPositionBottom > maxHeightForPositionTop) {
25
+ return {
26
+ positionY: 'bottom',
27
+ maxHeight: maxHeightForPositionBottom
28
+ };
25
29
  }
30
+ return {
31
+ positionY: 'top',
32
+ maxHeight: maxHeightForPositionTop
33
+ };
26
34
  }, [
27
35
  genTool,
28
- genPopupHeader
36
+ genPopupHeader,
37
+ genButtonWrapper
29
38
  ]);
30
39
  const handleChangePopupPositionY = useCallback((posY)=>{
31
- setPopupPositionY(posY);
32
- calculateMaxHeight(posY);
40
+ const { positionY: calcPosY, maxHeight } = calculateMaxHeight(posY);
41
+ setPopupPositionY(calcPosY);
42
+ setBodyMaxHeight(maxHeight);
33
43
  }, [
34
44
  calculateMaxHeight
35
45
  ]);
@@ -89,7 +99,7 @@ const useFlipPopup = (isShowPopup, dom)=>{
89
99
  ]);
90
100
  return {
91
101
  isValidating,
92
- maxHeight,
102
+ bodyMaxHeight,
93
103
  popupPositionY,
94
104
  popupPositionX
95
105
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.41.0-dev.39",
3
+ "version": "1.41.0-dev.42",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",