@gem-sdk/core 1.41.0-dev.29 → 1.41.0-dev.31

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 +13 -5
  2. package/dist/cjs/components/ai-generator/AIGenContentLoading.js +13 -9
  3. package/dist/cjs/components/ai-generator/hooks/useFlipPopup.js +36 -6
  4. package/dist/esm/components/ai-generator/AIContentGenerator.js +13 -5
  5. package/dist/esm/components/ai-generator/AIGenContentLoading.js +14 -10
  6. package/dist/esm/components/ai-generator/hooks/useFlipPopup.js +36 -6
  7. package/package.json +1 -1
package/dist/cjs/components/ai-generator/AIContentGenerator.js CHANGED
@@ -18,9 +18,11 @@ const AIContentGenerator = ({ ...props })=>{
18
18
  const [isShowMore, setIsShowMore] = react.useState(false);
19
19
  const genTool = react.useRef(null);
20
20
  const genPopup = react.useRef(null);
21
- const { popupPositionX, popupPositionY, isValidating: isValidatingFlipPopup } = useFlipPopup.useFlipPopup(isShowPopup, {
21
+ const genPopupHeader = react.useRef(null);
22
+ const { popupPositionX, popupPositionY, isValidating: isValidatingFlipPopup, maxHeight: popupMaxHeight } = useFlipPopup.useFlipPopup(isShowPopup, {
22
23
  genTool,
23
- genPopup
24
+ genPopup,
25
+ genPopupHeader
24
26
  });
25
27
  const { isGenerating, onGenerate, onOpenProductElementSettings } = useListenEventGenerate.useListenEventGenerate({
26
28
  uid: props.uid,
@@ -105,11 +107,12 @@ const AIContentGenerator = ({ ...props })=>{
105
107
  'gp-top-8': popupPositionY === 'top',
106
108
  'gp-bottom-8': popupPositionY === 'bottom',
107
109
  '!gp-visible': !isValidatingFlipPopup
108
- }, 'gp-absolute gp-invisible gp-rounded-lg gp-bg-[#151515] gp-p-4 gp-w-[312px] !gp-max-w-[312px] !gp-cursor-default'),
110
+ }, 'gp-absolute gp-invisible gp-rounded-lg gp-bg-[#151515] gp-w-[312px] !gp-max-w-[312px] !gp-cursor-default'),
109
111
  ref: genPopup,
110
112
  children: [
111
113
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
112
- className: "gp-flex gp-items-center gp-justify-between gp-mb-4",
114
+ className: "gp-flex gp-items-center gp-justify-between gp-px-4 gp-py-[10px]",
115
+ ref: genPopupHeader,
113
116
  children: [
114
117
  /*#__PURE__*/ jsxRuntime.jsx("span", {
115
118
  className: "gp-font-medium gp-text-sm",
@@ -123,7 +126,12 @@ const AIContentGenerator = ({ ...props })=>{
123
126
  ]
124
127
  }),
125
128
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
126
- className: "gp-mt-2 gp-text-left",
129
+ 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'),
132
+ style: {
133
+ maxHeight: popupMaxHeight ? `${popupMaxHeight}px` : 'auto'
134
+ },
127
135
  children: [
128
136
  /*#__PURE__*/ jsxRuntime.jsx("div", {
129
137
  className: "gp-mb-4",
package/dist/cjs/components/ai-generator/AIGenContentLoading.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var react = require('react');
5
+ var AIIcon = require('./icons/AIIcon.js');
5
6
 
6
7
  const AIGenContentLoading = ({ ...props })=>{
7
8
  const [isGenerating, setIsGenerating] = react.useState(false);
@@ -42,15 +43,18 @@ const AIGenContentLoading = ({ ...props })=>{
42
43
  }, [
43
44
  onGenerateContentStatus
44
45
  ]);
45
- return isGenerating ? /*#__PURE__*/ jsxRuntime.jsx("div", {
46
- 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",
47
- children: /*#__PURE__*/ jsxRuntime.jsxs("span", {
48
- className: "gp-font-medium",
49
- children: [
50
- "Generating",
51
- Array.from(Array(numDots).keys()).map(()=>'.')
52
- ]
53
- })
46
+ return isGenerating ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
47
+ 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
+ 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
+ })
57
+ ]
54
58
  }) : null;
55
59
  };
56
60
 
package/dist/cjs/components/ai-generator/hooks/useFlipPopup.js CHANGED
@@ -3,10 +3,38 @@
3
3
  var react = require('react');
4
4
 
5
5
  const useFlipPopup = (isShowPopup, dom)=>{
6
- const { genTool, genPopup } = dom;
6
+ const { genTool, genPopup, genPopupHeader } = 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
10
  const [isValidating, setIsValidating] = react.useState(true);
11
+ const calculateMaxHeight = react.useCallback((popupPositionY)=>{
12
+ const parentOverflow = genTool.current?.closest("[class~='gp-overflow-hidden']");
13
+ if (!parentOverflow || !genTool.current) {
14
+ setMaxHeight(null);
15
+ return;
16
+ }
17
+ const parentOverflowPos = parentOverflow.getBoundingClientRect();
18
+ const genToolPos = genTool.current.getBoundingClientRect();
19
+ const genToolHeaderHeight = genPopupHeader.current?.getBoundingClientRect().height || 0;
20
+ 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);
27
+ }
28
+ }, [
29
+ genTool,
30
+ genPopupHeader
31
+ ]);
32
+ const handleChangePopupPositionY = react.useCallback((posY)=>{
33
+ setPopupPositionY(posY);
34
+ calculateMaxHeight(posY);
35
+ }, [
36
+ calculateMaxHeight
37
+ ]);
10
38
  const calculatePopupPositionY = react.useCallback(()=>{
11
39
  if (!genTool.current || !genPopup.current) return;
12
40
  const viewHeight = window.innerHeight;
@@ -16,21 +44,22 @@ const useFlipPopup = (isShowPopup, dom)=>{
16
44
  const genPopupHeight = genPopup.current?.getBoundingClientRect().height;
17
45
  const MIN_DISTANCE = 50;
18
46
  if (scrollTop + toolPos.top + genPopupHeight >= scrollHeight - MIN_DISTANCE) {
19
- setPopupPositionY('bottom');
47
+ handleChangePopupPositionY('bottom');
20
48
  return;
21
49
  }
22
50
  if (toolPos.bottom + genPopupHeight > viewHeight) {
23
51
  if (toolPos.top - genPopupHeight < 0) {
24
- setPopupPositionY('top');
52
+ handleChangePopupPositionY('top');
25
53
  return;
26
54
  }
27
- setPopupPositionY('bottom');
55
+ handleChangePopupPositionY('bottom');
28
56
  return;
29
57
  }
30
- setPopupPositionY('top');
58
+ handleChangePopupPositionY('top');
31
59
  }, [
32
60
  genPopup,
33
- genTool
61
+ genTool,
62
+ handleChangePopupPositionY
34
63
  ]);
35
64
  const calculatePopupPositionX = react.useCallback(()=>{
36
65
  if (!genTool.current || !genPopup.current) return;
@@ -62,6 +91,7 @@ const useFlipPopup = (isShowPopup, dom)=>{
62
91
  ]);
63
92
  return {
64
93
  isValidating,
94
+ maxHeight,
65
95
  popupPositionY,
66
96
  popupPositionX
67
97
  };
package/dist/esm/components/ai-generator/AIContentGenerator.js CHANGED
@@ -16,9 +16,11 @@ const AIContentGenerator = ({ ...props })=>{
16
16
  const [isShowMore, setIsShowMore] = useState(false);
17
17
  const genTool = useRef(null);
18
18
  const genPopup = useRef(null);
19
- const { popupPositionX, popupPositionY, isValidating: isValidatingFlipPopup } = useFlipPopup(isShowPopup, {
19
+ const genPopupHeader = useRef(null);
20
+ const { popupPositionX, popupPositionY, isValidating: isValidatingFlipPopup, maxHeight: popupMaxHeight } = useFlipPopup(isShowPopup, {
20
21
  genTool,
21
- genPopup
22
+ genPopup,
23
+ genPopupHeader
22
24
  });
23
25
  const { isGenerating, onGenerate, onOpenProductElementSettings } = useListenEventGenerate({
24
26
  uid: props.uid,
@@ -103,11 +105,12 @@ const AIContentGenerator = ({ ...props })=>{
103
105
  'gp-top-8': popupPositionY === 'top',
104
106
  'gp-bottom-8': popupPositionY === 'bottom',
105
107
  '!gp-visible': !isValidatingFlipPopup
106
- }, 'gp-absolute gp-invisible gp-rounded-lg gp-bg-[#151515] gp-p-4 gp-w-[312px] !gp-max-w-[312px] !gp-cursor-default'),
108
+ }, 'gp-absolute gp-invisible gp-rounded-lg gp-bg-[#151515] gp-w-[312px] !gp-max-w-[312px] !gp-cursor-default'),
107
109
  ref: genPopup,
108
110
  children: [
109
111
  /*#__PURE__*/ jsxs("div", {
110
- className: "gp-flex gp-items-center gp-justify-between gp-mb-4",
112
+ className: "gp-flex gp-items-center gp-justify-between gp-px-4 gp-py-[10px]",
113
+ ref: genPopupHeader,
111
114
  children: [
112
115
  /*#__PURE__*/ jsx("span", {
113
116
  className: "gp-font-medium gp-text-sm",
@@ -121,7 +124,12 @@ const AIContentGenerator = ({ ...props })=>{
121
124
  ]
122
125
  }),
123
126
  /*#__PURE__*/ jsxs("div", {
124
- className: "gp-mt-2 gp-text-left",
127
+ 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'),
130
+ style: {
131
+ maxHeight: popupMaxHeight ? `${popupMaxHeight}px` : 'auto'
132
+ },
125
133
  children: [
126
134
  /*#__PURE__*/ jsx("div", {
127
135
  className: "gp-mb-4",
package/dist/esm/components/ai-generator/AIGenContentLoading.js CHANGED
@@ -1,5 +1,6 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { useState, useRef, useCallback, useEffect } from 'react';
3
+ import { AIIcon } from './icons/AIIcon.js';
3
4
 
4
5
  const AIGenContentLoading = ({ ...props })=>{
5
6
  const [isGenerating, setIsGenerating] = useState(false);
@@ -40,15 +41,18 @@ const AIGenContentLoading = ({ ...props })=>{
40
41
  }, [
41
42
  onGenerateContentStatus
42
43
  ]);
43
- return isGenerating ? /*#__PURE__*/ jsx("div", {
44
- 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",
45
- children: /*#__PURE__*/ jsxs("span", {
46
- className: "gp-font-medium",
47
- children: [
48
- "Generating",
49
- Array.from(Array(numDots).keys()).map(()=>'.')
50
- ]
51
- })
44
+ return isGenerating ? /*#__PURE__*/ jsxs("div", {
45
+ 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
+ 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
+ })
55
+ ]
52
56
  }) : null;
53
57
  };
54
58
 
package/dist/esm/components/ai-generator/hooks/useFlipPopup.js CHANGED
@@ -1,10 +1,38 @@
1
1
  import { useState, useCallback, useEffect } from 'react';
2
2
 
3
3
  const useFlipPopup = (isShowPopup, dom)=>{
4
- const { genTool, genPopup } = dom;
4
+ const { genTool, genPopup, genPopupHeader } = dom;
5
5
  const [popupPositionY, setPopupPositionY] = useState('top');
6
6
  const [popupPositionX, setPopupPositionX] = useState('left');
7
+ const [maxHeight, setMaxHeight] = useState(null);
7
8
  const [isValidating, setIsValidating] = useState(true);
9
+ const calculateMaxHeight = useCallback((popupPositionY)=>{
10
+ const parentOverflow = genTool.current?.closest("[class~='gp-overflow-hidden']");
11
+ if (!parentOverflow || !genTool.current) {
12
+ setMaxHeight(null);
13
+ return;
14
+ }
15
+ const parentOverflowPos = parentOverflow.getBoundingClientRect();
16
+ const genToolPos = genTool.current.getBoundingClientRect();
17
+ const genToolHeaderHeight = genPopupHeader.current?.getBoundingClientRect().height || 0;
18
+ 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);
25
+ }
26
+ }, [
27
+ genTool,
28
+ genPopupHeader
29
+ ]);
30
+ const handleChangePopupPositionY = useCallback((posY)=>{
31
+ setPopupPositionY(posY);
32
+ calculateMaxHeight(posY);
33
+ }, [
34
+ calculateMaxHeight
35
+ ]);
8
36
  const calculatePopupPositionY = useCallback(()=>{
9
37
  if (!genTool.current || !genPopup.current) return;
10
38
  const viewHeight = window.innerHeight;
@@ -14,21 +42,22 @@ const useFlipPopup = (isShowPopup, dom)=>{
14
42
  const genPopupHeight = genPopup.current?.getBoundingClientRect().height;
15
43
  const MIN_DISTANCE = 50;
16
44
  if (scrollTop + toolPos.top + genPopupHeight >= scrollHeight - MIN_DISTANCE) {
17
- setPopupPositionY('bottom');
45
+ handleChangePopupPositionY('bottom');
18
46
  return;
19
47
  }
20
48
  if (toolPos.bottom + genPopupHeight > viewHeight) {
21
49
  if (toolPos.top - genPopupHeight < 0) {
22
- setPopupPositionY('top');
50
+ handleChangePopupPositionY('top');
23
51
  return;
24
52
  }
25
- setPopupPositionY('bottom');
53
+ handleChangePopupPositionY('bottom');
26
54
  return;
27
55
  }
28
- setPopupPositionY('top');
56
+ handleChangePopupPositionY('top');
29
57
  }, [
30
58
  genPopup,
31
- genTool
59
+ genTool,
60
+ handleChangePopupPositionY
32
61
  ]);
33
62
  const calculatePopupPositionX = useCallback(()=>{
34
63
  if (!genTool.current || !genPopup.current) return;
@@ -60,6 +89,7 @@ const useFlipPopup = (isShowPopup, dom)=>{
60
89
  ]);
61
90
  return {
62
91
  isValidating,
92
+ maxHeight,
63
93
  popupPositionY,
64
94
  popupPositionX
65
95
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.41.0-dev.29",
3
+ "version": "1.41.0-dev.31",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",