@gem-sdk/pages 1.53.0-dev.107 → 1.53.0-dev.139

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 (3) hide show
  1. package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js +161 -38
  2. package/dist/esm/components/builder/InteractionSelectOnPageHeader.js +161 -38
  3. package/package.json +2 -2
package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js CHANGED
@@ -5,59 +5,182 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var core = require('@gem-sdk/core');
7
7
  var useSelectModeInteraction = require('../../libs/hooks/useSelectModeInteraction.js');
8
+ var react = require('react');
8
9
 
9
10
  const InteractionSelectOnPageHeader = ()=>{
10
11
  const selectType = core.usePageStore((s)=>s.interactionData?.selectType);
12
+ const settingType = core.usePageStore((s)=>s.interactionData?.settingType);
11
13
  const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
12
14
  const { closeSelectOnPage } = core.useInteraction();
13
15
  const { changeSelectMode } = useSelectModeInteraction.useSelectModeInteraction();
16
+ const [hoverOption, setHoverOption] = react.useState(null);
17
+ const [openDropdown, setOpenDropdown] = react.useState(false);
18
+ const popupRef = react.useRef(null);
14
19
  const handleSetInteraction = (type)=>{
20
+ setOpenDropdown(false);
15
21
  setInteractionSelectType(type);
16
22
  changeSelectMode(type);
23
+ if (type == 'PAGE') closeSelectOnPage();
24
+ };
25
+ const handleClickOutside = react.useCallback((event)=>{
26
+ if (!openDropdown) return;
27
+ if (popupRef.current && !popupRef.current.contains(event.target)) {
28
+ setOpenDropdown(false);
29
+ }
30
+ }, [
31
+ openDropdown
32
+ ]);
33
+ react.useEffect(()=>{
34
+ document.addEventListener('mousedown', handleClickOutside);
35
+ return ()=>{
36
+ document.removeEventListener('mousedown', handleClickOutside);
37
+ };
38
+ }, [
39
+ handleClickOutside
40
+ ]);
41
+ const isShowOverlay = react.useMemo(()=>{
42
+ return hoverOption !== 'ELEMENT' && (selectType === 'PAGE' || selectType === 'ELEMENT' && hoverOption === 'PAGE');
43
+ }, [
44
+ hoverOption,
45
+ selectType
46
+ ]);
47
+ const title = react.useMemo(()=>{
48
+ const type = selectType === 'ELEMENT' ? 'an element' : 'entire page';
49
+ if (settingType === 'TRIGGER') return `Start with triggering ${type}`;
50
+ return `Set ${selectType === 'ELEMENT' ? 'an element' : 'entire page'} as target`;
51
+ }, [
52
+ selectType,
53
+ settingType
54
+ ]);
55
+ const renderIconCheckSvg = ()=>{
56
+ return /*#__PURE__*/ jsxRuntime.jsx("div", {
57
+ className: "gp-w-[21px]",
58
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
59
+ width: "21",
60
+ height: "20",
61
+ viewBox: "0 0 21 20",
62
+ fill: "none",
63
+ xmlns: "http://www.w3.org/2000/svg",
64
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
65
+ "fill-rule": "evenodd",
66
+ "clip-rule": "evenodd",
67
+ d: "M16.3415 5.1766C16.5528 5.41207 16.5528 5.79383 16.3415 6.0293L8.45016 14.8234C8.34869 14.9365 8.21107 15 8.06757 15C7.92408 15 7.78645 14.9365 7.68499 14.8234L4.65846 11.4505C4.44717 11.215 4.44718 10.8333 4.65848 10.5978C4.86978 10.3623 5.21236 10.3623 5.42365 10.5978L8.06759 13.5443L15.5764 5.1766C15.7877 4.94113 16.1302 4.94113 16.3415 5.1766Z",
68
+ fill: "#00C853"
69
+ })
70
+ })
71
+ });
17
72
  };
18
73
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
19
74
  children: [
20
- /*#__PURE__*/ jsxRuntime.jsxs("header", {
21
- className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-[#151515] gp-text-white interaction-select-mode-header",
22
- children: [
23
- /*#__PURE__*/ jsxRuntime.jsx("div", {
24
- className: "gp-ml-4 gp-text-xs gp-mt-1",
25
- children: "Select mode enabled"
26
- }),
27
- /*#__PURE__*/ jsxRuntime.jsxs("section", {
28
- className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
29
- children: [
30
- /*#__PURE__*/ jsxRuntime.jsx("button", {
31
- onClick: ()=>handleSetInteraction('ELEMENT'),
32
- className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'ELEMENT' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
33
- children: "Choose an element on page"
34
- }),
35
- /*#__PURE__*/ jsxRuntime.jsx("button", {
36
- onClick: ()=>handleSetInteraction('PAGE'),
37
- className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'PAGE' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
38
- children: "Use entire page"
39
- })
40
- ]
41
- }),
42
- /*#__PURE__*/ jsxRuntime.jsx("button", {
43
- onClick: closeSelectOnPage,
44
- className: "gp-h-10 gp-w-10 gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
45
- children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
46
- width: "12",
47
- height: "12",
48
- viewBox: "0 0 12 12",
49
- fill: "none",
50
- xmlns: "http://www.w3.org/2000/svg",
51
- children: /*#__PURE__*/ jsxRuntime.jsx("path", {
52
- d: "M9.96967 11.0303C10.2626 11.3232 10.7374 11.3232 11.0303 11.0303C11.3232 10.7374 11.3232 10.2626 11.0303 9.96967L7.06066 6L11.0303 2.03033C11.3232 1.73744 11.3232 1.26256 11.0303 0.96967C10.7374 0.676777 10.2626 0.676777 9.96967 0.96967L6 4.93934L2.03033 0.96967C1.73744 0.676777 1.26256 0.676777 0.96967 0.96967C0.676777 1.26256 0.676777 1.73744 0.96967 2.03033L4.93934 6L0.96967 9.96967C0.676777 10.2626 0.676777 10.7374 0.96967 11.0303C1.26256 11.3232 1.73744 11.3232 2.03033 11.0303L6 7.06066L9.96967 11.0303Z",
53
- fill: "#F9F9F9"
54
- })
75
+ /*#__PURE__*/ jsxRuntime.jsx("header", {
76
+ className: "gp-flex gp-text-[12px] gp-justify-center gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-[1000] gp-bg-[#151515] gp-text-white interaction-select-mode-header",
77
+ children: /*#__PURE__*/ jsxRuntime.jsxs("section", {
78
+ className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-2",
79
+ children: [
80
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
81
+ className: "gp-relative",
82
+ children: [
83
+ /*#__PURE__*/ jsxRuntime.jsxs("button", {
84
+ className: `gp-h-full gp-w-[280px] gp-gap-2 gp-py-2 gp-px-4 gp-items-center gp-justify-center gp-leading-5 gp-font-medium gp-flex gp-rounded-b-[8px] gp-bg-[#3C67FF] gp-text-[#F9F9F9]`,
85
+ onClick: ()=>setOpenDropdown((prev)=>!prev),
86
+ children: [
87
+ /*#__PURE__*/ jsxRuntime.jsx("p", {
88
+ className: "gp-grow",
89
+ children: title
90
+ }),
91
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
92
+ className: "gp-w-[21px]",
93
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
94
+ width: "16",
95
+ height: "16",
96
+ viewBox: "0 0 16 16",
97
+ fill: "currentColor",
98
+ xmlns: "http://www.w3.org/2000/svg",
99
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
100
+ "fill-rule": "evenodd",
101
+ "clip-rule": "evenodd",
102
+ d: "M4.13017 6.11716C4.30374 5.96095 4.58515 5.96095 4.75871 6.11716L8 9.03431L11.2413 6.11716C11.4149 5.96095 11.6963 5.96095 11.8698 6.11716C12.0434 6.27337 12.0434 6.52663 11.8698 6.68284L8.31427 9.88284C8.1407 10.0391 7.8593 10.0391 7.68573 9.88284L4.13017 6.68284C3.95661 6.52663 3.95661 6.27337 4.13017 6.11716Z",
103
+ fill: "currentColor"
104
+ })
105
+ })
106
+ })
107
+ ]
108
+ }),
109
+ openDropdown && /*#__PURE__*/ jsxRuntime.jsxs("div", {
110
+ ref: popupRef,
111
+ className: "gp-p-2 gp-flex gp-flex-col gp-absolute gp-top-[calc(100%_+_4px)] gp-w-[280px] gp-bg-[#151515] gp-rounded-xl gp-text-white",
112
+ children: [
113
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
114
+ className: "gp-p-2 gp-flex gp-gap-2 gp-cursor-pointer hover:gp-bg-[#3b3b3b] gp-rounded-lg",
115
+ "aria-hidden": true,
116
+ onClick: ()=>handleSetInteraction('ELEMENT'),
117
+ onMouseOver: ()=>setHoverOption('ELEMENT'),
118
+ onFocus: ()=>setHoverOption('ELEMENT'),
119
+ onMouseLeave: ()=>setHoverOption(null),
120
+ children: [
121
+ selectType === 'ELEMENT' ? renderIconCheckSvg() : /*#__PURE__*/ jsxRuntime.jsx("div", {
122
+ className: "gp-w-[21px]",
123
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
124
+ width: "18",
125
+ height: "18",
126
+ viewBox: "0 0 18 18",
127
+ fill: "none",
128
+ xmlns: "http://www.w3.org/2000/svg",
129
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
130
+ "fill-rule": "evenodd",
131
+ "clip-rule": "evenodd",
132
+ d: "M8.99983 0.351562C9.34501 0.351562 9.62483 0.631385 9.62483 0.976562V2.15278C12.923 2.45 15.5496 5.07654 15.8468 8.37476H17.0233C17.3684 8.37476 17.6483 8.65458 17.6483 8.99976C17.6483 9.34493 17.3684 9.62476 17.0233 9.62476H15.8468C15.5496 12.923 12.923 15.5495 9.62483 15.8467V17.0232C9.62483 17.3683 9.34501 17.6482 8.99983 17.6482C8.65465 17.6482 8.37483 17.3683 8.37483 17.0232V15.8467C5.07662 15.5495 2.45007 12.923 2.15286 9.62476H0.976562C0.631385 9.62476 0.351562 9.34493 0.351562 8.99976C0.351562 8.65458 0.631385 8.37476 0.976562 8.37476H2.15286C2.45007 5.07654 5.07662 2.45 8.37483 2.15278V0.976562C8.37483 0.631385 8.65465 0.351562 8.99983 0.351562ZM3.40916 9.62476H5.97656C6.32174 9.62476 6.60156 9.34493 6.60156 8.99976C6.60156 8.65458 6.32174 8.37476 5.97656 8.37476H3.40916C3.69738 5.7675 5.76757 3.6973 8.37483 3.40909V5.97656C8.37483 6.32174 8.65465 6.60156 8.99983 6.60156C9.34501 6.60156 9.62483 6.32174 9.62483 5.97656V3.40909C12.2321 3.6973 14.3023 5.7675 14.5905 8.37476H12.0233C11.6781 8.37476 11.3983 8.65458 11.3983 8.99976C11.3983 9.34493 11.6781 9.62476 12.0233 9.62476H14.5905C14.3023 12.232 12.2321 14.3022 9.62483 14.5904V12.0232C9.62483 11.678 9.34501 11.3982 8.99983 11.3982C8.65465 11.3982 8.37483 11.678 8.37483 12.0232V14.5904C5.76757 14.3022 3.69738 12.232 3.40916 9.62476Z",
133
+ fill: "#AAAAAA"
134
+ })
135
+ })
136
+ }),
137
+ /*#__PURE__*/ jsxRuntime.jsx("p", {
138
+ className: "gp-h-[21px]",
139
+ children: "An element"
140
+ })
141
+ ]
142
+ }),
143
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
144
+ className: "gp-p-2 gp-flex gp-gap-2 gp-cursor-pointer hover:gp-bg-[#3b3b3b] gp-rounded-lg",
145
+ onClick: ()=>handleSetInteraction('PAGE'),
146
+ onMouseOver: ()=>setHoverOption('PAGE'),
147
+ onFocus: ()=>setHoverOption('PAGE'),
148
+ onMouseLeave: ()=>setHoverOption(null),
149
+ "aria-hidden": true,
150
+ children: [
151
+ selectType === 'PAGE' ? renderIconCheckSvg() : /*#__PURE__*/ jsxRuntime.jsx("svg", {
152
+ width: "21",
153
+ height: "20",
154
+ viewBox: "0 0 21 20",
155
+ fill: "none",
156
+ xmlns: "http://www.w3.org/2000/svg",
157
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
158
+ "fill-rule": "evenodd",
159
+ "clip-rule": "evenodd",
160
+ d: "M7.25 4.5C6.55964 4.5 6 5.05964 6 5.75V14.25C6 14.9404 6.55964 15.5 7.25 15.5H13.75C14.4404 15.5 15 14.9404 15 14.25V9.5H11.75C10.7835 9.5 10 8.7165 10 7.75V4.5H7.25ZM11.5 5.56066L13.9393 8H11.75C11.6119 8 11.5 7.88807 11.5 7.75V5.56066ZM4.5 5.75C4.5 4.23122 5.73122 3 7.25 3H10.75C10.9489 3 11.1397 3.07902 11.2803 3.21967L16.2803 8.21967C16.421 8.36032 16.5 8.55109 16.5 8.75V14.25C16.5 15.7688 15.2688 17 13.75 17H7.25C5.73122 17 4.5 15.7688 4.5 14.25V5.75Z",
161
+ fill: "#AAAAAA"
162
+ })
163
+ }),
164
+ /*#__PURE__*/ jsxRuntime.jsx("p", {
165
+ className: "gp-h-[21px]",
166
+ children: "Entire page"
167
+ })
168
+ ]
169
+ })
170
+ ]
171
+ })
172
+ ]
173
+ }),
174
+ /*#__PURE__*/ jsxRuntime.jsx("button", {
175
+ className: "",
176
+ onClick: closeSelectOnPage,
177
+ children: "Cancel"
55
178
  })
56
- })
57
- ]
179
+ ]
180
+ })
58
181
  }),
59
182
  /*#__PURE__*/ jsxRuntime.jsx("div", {
60
- className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-mt-[40px] gp-z-[999] ${selectType === 'PAGE' ? 'gp-z-[999] gp-border-[4px] gp-bg-[#3c67ff]/[0.25]' : 'gp-border-[2px] gp-pointer-events-none'}`,
183
+ className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-mt-[40px] gp-z-[999] ${isShowOverlay ? 'gp-z-[999] gp-bg-[#3c67ff]/[0.25]' : 'gp-pointer-events-none'}`,
61
184
  style: {
62
185
  height: 'calc(100% - 40px)'
63
186
  }
package/dist/esm/components/builder/InteractionSelectOnPageHeader.js CHANGED
@@ -1,59 +1,182 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { usePageStore, useInteraction } from '@gem-sdk/core';
3
3
  import { useSelectModeInteraction } from '../../libs/hooks/useSelectModeInteraction.js';
4
+ import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
4
5
 
5
6
  const InteractionSelectOnPageHeader = ()=>{
6
7
  const selectType = usePageStore((s)=>s.interactionData?.selectType);
8
+ const settingType = usePageStore((s)=>s.interactionData?.settingType);
7
9
  const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
8
10
  const { closeSelectOnPage } = useInteraction();
9
11
  const { changeSelectMode } = useSelectModeInteraction();
12
+ const [hoverOption, setHoverOption] = useState(null);
13
+ const [openDropdown, setOpenDropdown] = useState(false);
14
+ const popupRef = useRef(null);
10
15
  const handleSetInteraction = (type)=>{
16
+ setOpenDropdown(false);
11
17
  setInteractionSelectType(type);
12
18
  changeSelectMode(type);
19
+ if (type == 'PAGE') closeSelectOnPage();
20
+ };
21
+ const handleClickOutside = useCallback((event)=>{
22
+ if (!openDropdown) return;
23
+ if (popupRef.current && !popupRef.current.contains(event.target)) {
24
+ setOpenDropdown(false);
25
+ }
26
+ }, [
27
+ openDropdown
28
+ ]);
29
+ useEffect(()=>{
30
+ document.addEventListener('mousedown', handleClickOutside);
31
+ return ()=>{
32
+ document.removeEventListener('mousedown', handleClickOutside);
33
+ };
34
+ }, [
35
+ handleClickOutside
36
+ ]);
37
+ const isShowOverlay = useMemo(()=>{
38
+ return hoverOption !== 'ELEMENT' && (selectType === 'PAGE' || selectType === 'ELEMENT' && hoverOption === 'PAGE');
39
+ }, [
40
+ hoverOption,
41
+ selectType
42
+ ]);
43
+ const title = useMemo(()=>{
44
+ const type = selectType === 'ELEMENT' ? 'an element' : 'entire page';
45
+ if (settingType === 'TRIGGER') return `Start with triggering ${type}`;
46
+ return `Set ${selectType === 'ELEMENT' ? 'an element' : 'entire page'} as target`;
47
+ }, [
48
+ selectType,
49
+ settingType
50
+ ]);
51
+ const renderIconCheckSvg = ()=>{
52
+ return /*#__PURE__*/ jsx("div", {
53
+ className: "gp-w-[21px]",
54
+ children: /*#__PURE__*/ jsx("svg", {
55
+ width: "21",
56
+ height: "20",
57
+ viewBox: "0 0 21 20",
58
+ fill: "none",
59
+ xmlns: "http://www.w3.org/2000/svg",
60
+ children: /*#__PURE__*/ jsx("path", {
61
+ "fill-rule": "evenodd",
62
+ "clip-rule": "evenodd",
63
+ d: "M16.3415 5.1766C16.5528 5.41207 16.5528 5.79383 16.3415 6.0293L8.45016 14.8234C8.34869 14.9365 8.21107 15 8.06757 15C7.92408 15 7.78645 14.9365 7.68499 14.8234L4.65846 11.4505C4.44717 11.215 4.44718 10.8333 4.65848 10.5978C4.86978 10.3623 5.21236 10.3623 5.42365 10.5978L8.06759 13.5443L15.5764 5.1766C15.7877 4.94113 16.1302 4.94113 16.3415 5.1766Z",
64
+ fill: "#00C853"
65
+ })
66
+ })
67
+ });
13
68
  };
14
69
  return /*#__PURE__*/ jsxs(Fragment, {
15
70
  children: [
16
- /*#__PURE__*/ jsxs("header", {
17
- className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-[#151515] gp-text-white interaction-select-mode-header",
18
- children: [
19
- /*#__PURE__*/ jsx("div", {
20
- className: "gp-ml-4 gp-text-xs gp-mt-1",
21
- children: "Select mode enabled"
22
- }),
23
- /*#__PURE__*/ jsxs("section", {
24
- className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
25
- children: [
26
- /*#__PURE__*/ jsx("button", {
27
- onClick: ()=>handleSetInteraction('ELEMENT'),
28
- className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'ELEMENT' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
29
- children: "Choose an element on page"
30
- }),
31
- /*#__PURE__*/ jsx("button", {
32
- onClick: ()=>handleSetInteraction('PAGE'),
33
- className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'PAGE' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
34
- children: "Use entire page"
35
- })
36
- ]
37
- }),
38
- /*#__PURE__*/ jsx("button", {
39
- onClick: closeSelectOnPage,
40
- className: "gp-h-10 gp-w-10 gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
41
- children: /*#__PURE__*/ jsx("svg", {
42
- width: "12",
43
- height: "12",
44
- viewBox: "0 0 12 12",
45
- fill: "none",
46
- xmlns: "http://www.w3.org/2000/svg",
47
- children: /*#__PURE__*/ jsx("path", {
48
- d: "M9.96967 11.0303C10.2626 11.3232 10.7374 11.3232 11.0303 11.0303C11.3232 10.7374 11.3232 10.2626 11.0303 9.96967L7.06066 6L11.0303 2.03033C11.3232 1.73744 11.3232 1.26256 11.0303 0.96967C10.7374 0.676777 10.2626 0.676777 9.96967 0.96967L6 4.93934L2.03033 0.96967C1.73744 0.676777 1.26256 0.676777 0.96967 0.96967C0.676777 1.26256 0.676777 1.73744 0.96967 2.03033L4.93934 6L0.96967 9.96967C0.676777 10.2626 0.676777 10.7374 0.96967 11.0303C1.26256 11.3232 1.73744 11.3232 2.03033 11.0303L6 7.06066L9.96967 11.0303Z",
49
- fill: "#F9F9F9"
50
- })
71
+ /*#__PURE__*/ jsx("header", {
72
+ className: "gp-flex gp-text-[12px] gp-justify-center gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-[1000] gp-bg-[#151515] gp-text-white interaction-select-mode-header",
73
+ children: /*#__PURE__*/ jsxs("section", {
74
+ className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-2",
75
+ children: [
76
+ /*#__PURE__*/ jsxs("div", {
77
+ className: "gp-relative",
78
+ children: [
79
+ /*#__PURE__*/ jsxs("button", {
80
+ className: `gp-h-full gp-w-[280px] gp-gap-2 gp-py-2 gp-px-4 gp-items-center gp-justify-center gp-leading-5 gp-font-medium gp-flex gp-rounded-b-[8px] gp-bg-[#3C67FF] gp-text-[#F9F9F9]`,
81
+ onClick: ()=>setOpenDropdown((prev)=>!prev),
82
+ children: [
83
+ /*#__PURE__*/ jsx("p", {
84
+ className: "gp-grow",
85
+ children: title
86
+ }),
87
+ /*#__PURE__*/ jsx("div", {
88
+ className: "gp-w-[21px]",
89
+ children: /*#__PURE__*/ jsx("svg", {
90
+ width: "16",
91
+ height: "16",
92
+ viewBox: "0 0 16 16",
93
+ fill: "currentColor",
94
+ xmlns: "http://www.w3.org/2000/svg",
95
+ children: /*#__PURE__*/ jsx("path", {
96
+ "fill-rule": "evenodd",
97
+ "clip-rule": "evenodd",
98
+ d: "M4.13017 6.11716C4.30374 5.96095 4.58515 5.96095 4.75871 6.11716L8 9.03431L11.2413 6.11716C11.4149 5.96095 11.6963 5.96095 11.8698 6.11716C12.0434 6.27337 12.0434 6.52663 11.8698 6.68284L8.31427 9.88284C8.1407 10.0391 7.8593 10.0391 7.68573 9.88284L4.13017 6.68284C3.95661 6.52663 3.95661 6.27337 4.13017 6.11716Z",
99
+ fill: "currentColor"
100
+ })
101
+ })
102
+ })
103
+ ]
104
+ }),
105
+ openDropdown && /*#__PURE__*/ jsxs("div", {
106
+ ref: popupRef,
107
+ className: "gp-p-2 gp-flex gp-flex-col gp-absolute gp-top-[calc(100%_+_4px)] gp-w-[280px] gp-bg-[#151515] gp-rounded-xl gp-text-white",
108
+ children: [
109
+ /*#__PURE__*/ jsxs("div", {
110
+ className: "gp-p-2 gp-flex gp-gap-2 gp-cursor-pointer hover:gp-bg-[#3b3b3b] gp-rounded-lg",
111
+ "aria-hidden": true,
112
+ onClick: ()=>handleSetInteraction('ELEMENT'),
113
+ onMouseOver: ()=>setHoverOption('ELEMENT'),
114
+ onFocus: ()=>setHoverOption('ELEMENT'),
115
+ onMouseLeave: ()=>setHoverOption(null),
116
+ children: [
117
+ selectType === 'ELEMENT' ? renderIconCheckSvg() : /*#__PURE__*/ jsx("div", {
118
+ className: "gp-w-[21px]",
119
+ children: /*#__PURE__*/ jsx("svg", {
120
+ width: "18",
121
+ height: "18",
122
+ viewBox: "0 0 18 18",
123
+ fill: "none",
124
+ xmlns: "http://www.w3.org/2000/svg",
125
+ children: /*#__PURE__*/ jsx("path", {
126
+ "fill-rule": "evenodd",
127
+ "clip-rule": "evenodd",
128
+ d: "M8.99983 0.351562C9.34501 0.351562 9.62483 0.631385 9.62483 0.976562V2.15278C12.923 2.45 15.5496 5.07654 15.8468 8.37476H17.0233C17.3684 8.37476 17.6483 8.65458 17.6483 8.99976C17.6483 9.34493 17.3684 9.62476 17.0233 9.62476H15.8468C15.5496 12.923 12.923 15.5495 9.62483 15.8467V17.0232C9.62483 17.3683 9.34501 17.6482 8.99983 17.6482C8.65465 17.6482 8.37483 17.3683 8.37483 17.0232V15.8467C5.07662 15.5495 2.45007 12.923 2.15286 9.62476H0.976562C0.631385 9.62476 0.351562 9.34493 0.351562 8.99976C0.351562 8.65458 0.631385 8.37476 0.976562 8.37476H2.15286C2.45007 5.07654 5.07662 2.45 8.37483 2.15278V0.976562C8.37483 0.631385 8.65465 0.351562 8.99983 0.351562ZM3.40916 9.62476H5.97656C6.32174 9.62476 6.60156 9.34493 6.60156 8.99976C6.60156 8.65458 6.32174 8.37476 5.97656 8.37476H3.40916C3.69738 5.7675 5.76757 3.6973 8.37483 3.40909V5.97656C8.37483 6.32174 8.65465 6.60156 8.99983 6.60156C9.34501 6.60156 9.62483 6.32174 9.62483 5.97656V3.40909C12.2321 3.6973 14.3023 5.7675 14.5905 8.37476H12.0233C11.6781 8.37476 11.3983 8.65458 11.3983 8.99976C11.3983 9.34493 11.6781 9.62476 12.0233 9.62476H14.5905C14.3023 12.232 12.2321 14.3022 9.62483 14.5904V12.0232C9.62483 11.678 9.34501 11.3982 8.99983 11.3982C8.65465 11.3982 8.37483 11.678 8.37483 12.0232V14.5904C5.76757 14.3022 3.69738 12.232 3.40916 9.62476Z",
129
+ fill: "#AAAAAA"
130
+ })
131
+ })
132
+ }),
133
+ /*#__PURE__*/ jsx("p", {
134
+ className: "gp-h-[21px]",
135
+ children: "An element"
136
+ })
137
+ ]
138
+ }),
139
+ /*#__PURE__*/ jsxs("div", {
140
+ className: "gp-p-2 gp-flex gp-gap-2 gp-cursor-pointer hover:gp-bg-[#3b3b3b] gp-rounded-lg",
141
+ onClick: ()=>handleSetInteraction('PAGE'),
142
+ onMouseOver: ()=>setHoverOption('PAGE'),
143
+ onFocus: ()=>setHoverOption('PAGE'),
144
+ onMouseLeave: ()=>setHoverOption(null),
145
+ "aria-hidden": true,
146
+ children: [
147
+ selectType === 'PAGE' ? renderIconCheckSvg() : /*#__PURE__*/ jsx("svg", {
148
+ width: "21",
149
+ height: "20",
150
+ viewBox: "0 0 21 20",
151
+ fill: "none",
152
+ xmlns: "http://www.w3.org/2000/svg",
153
+ children: /*#__PURE__*/ jsx("path", {
154
+ "fill-rule": "evenodd",
155
+ "clip-rule": "evenodd",
156
+ d: "M7.25 4.5C6.55964 4.5 6 5.05964 6 5.75V14.25C6 14.9404 6.55964 15.5 7.25 15.5H13.75C14.4404 15.5 15 14.9404 15 14.25V9.5H11.75C10.7835 9.5 10 8.7165 10 7.75V4.5H7.25ZM11.5 5.56066L13.9393 8H11.75C11.6119 8 11.5 7.88807 11.5 7.75V5.56066ZM4.5 5.75C4.5 4.23122 5.73122 3 7.25 3H10.75C10.9489 3 11.1397 3.07902 11.2803 3.21967L16.2803 8.21967C16.421 8.36032 16.5 8.55109 16.5 8.75V14.25C16.5 15.7688 15.2688 17 13.75 17H7.25C5.73122 17 4.5 15.7688 4.5 14.25V5.75Z",
157
+ fill: "#AAAAAA"
158
+ })
159
+ }),
160
+ /*#__PURE__*/ jsx("p", {
161
+ className: "gp-h-[21px]",
162
+ children: "Entire page"
163
+ })
164
+ ]
165
+ })
166
+ ]
167
+ })
168
+ ]
169
+ }),
170
+ /*#__PURE__*/ jsx("button", {
171
+ className: "",
172
+ onClick: closeSelectOnPage,
173
+ children: "Cancel"
51
174
  })
52
- })
53
- ]
175
+ ]
176
+ })
54
177
  }),
55
178
  /*#__PURE__*/ jsx("div", {
56
- className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-mt-[40px] gp-z-[999] ${selectType === 'PAGE' ? 'gp-z-[999] gp-border-[4px] gp-bg-[#3c67ff]/[0.25]' : 'gp-border-[2px] gp-pointer-events-none'}`,
179
+ className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-mt-[40px] gp-z-[999] ${isShowOverlay ? 'gp-z-[999] gp-bg-[#3c67ff]/[0.25]' : 'gp-pointer-events-none'}`,
57
180
  style: {
58
181
  height: 'calc(100% - 40px)'
59
182
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.53.0-dev.107",
3
+ "version": "1.53.0-dev.139",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -26,7 +26,7 @@
26
26
  "next": "latest"
27
27
  },
28
28
  "devDependencies": {
29
- "@gem-sdk/core": "1.53.0-dev.107",
29
+ "@gem-sdk/core": "1.53.0-dev.139",
30
30
  "@gem-sdk/plugin-cookie-bar": "1.53.0-dev.105",
31
31
  "@gem-sdk/plugin-quick-view": "1.53.0-dev.105",
32
32
  "@gem-sdk/plugin-sticky-add-to-cart": "1.53.0-dev.105"