@gem-sdk/core 1.53.0-dev.33 → 1.53.0-dev.39

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 (12) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +60 -3
  2. package/dist/cjs/components/InteractionSuffix.js +9 -70
  3. package/dist/cjs/contexts/PageContext.js +8 -0
  4. package/dist/cjs/hooks/animation/useAnimationConfig.js +2 -1
  5. package/dist/cjs/hooks/animation/useApplyAnimation.js +5 -5
  6. package/dist/esm/components/ComponentToolbarPreview.js +60 -3
  7. package/dist/esm/components/InteractionSuffix.js +10 -71
  8. package/dist/esm/contexts/PageContext.js +8 -0
  9. package/dist/esm/hooks/animation/useAnimationConfig.js +2 -1
  10. package/dist/esm/hooks/animation/useApplyAnimation.js +5 -5
  11. package/dist/types/index.d.ts +4 -2
  12. package/package.json +2 -2
package/dist/cjs/components/ComponentToolbarPreview.js CHANGED
@@ -60,7 +60,33 @@ const ComponentToolbarPreview = (props)=>{
60
60
  editingPageType
61
61
  ]);
62
62
  const isSelectOnPage = react.useMemo(()=>interactionData?.isSelectOnPage, [
63
- interactionData
63
+ interactionData?.isSelectOnPage
64
+ ]);
65
+ const settingType = react.useMemo(()=>interactionData?.settingType, [
66
+ interactionData?.settingType
67
+ ]);
68
+ const isShowIconInteractionTarget = react.useMemo(()=>{
69
+ return interactionData?.item?.targets?.find((t)=>t.uid === props.uid && t?.type !== 'PAGE') && isSelectOnPage && settingType === 'TARGET';
70
+ }, [
71
+ interactionData?.item?.targets,
72
+ isSelectOnPage,
73
+ props.uid,
74
+ settingType
75
+ ]);
76
+ const isShowIconInteractionTrigger = react.useMemo(()=>{
77
+ return interactionData?.item?.self?.uid === props.uid && interactionData?.item?.self.type !== 'PAGE' && isSelectOnPage && settingType === 'TRIGGER';
78
+ }, [
79
+ interactionData?.item?.self?.type,
80
+ interactionData?.item?.self?.uid,
81
+ isSelectOnPage,
82
+ props.uid,
83
+ settingType
84
+ ]);
85
+ const isDisplayIconDrag = react.useMemo(()=>{
86
+ return !isShowIconInteractionTarget && !isShowIconInteractionTrigger;
87
+ }, [
88
+ isShowIconInteractionTarget,
89
+ isShowIconInteractionTrigger
64
90
  ]);
65
91
  const { checkDisableDelete, getTooltipText, checkDisableDuplicate } = useToolbarPostPurchase.usePostPurchase(props.uid, props.tag || '');
66
92
  const editProductElementList = [
@@ -338,7 +364,6 @@ const ComponentToolbarPreview = (props)=>{
338
364
  if (isShopifySection || isThemeSection && !isThemeSectionEditor) return false;
339
365
  return constant.ableGenerateContentElements.includes(tag);
340
366
  };
341
- // if (!isActive) return null;
342
367
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
343
368
  children: [
344
369
  !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -353,7 +378,39 @@ const ComponentToolbarPreview = (props)=>{
353
378
  onClick: (e)=>onShowParent(e),
354
379
  "aria-hidden": "true",
355
380
  children: [
356
- /*#__PURE__*/ jsxRuntime.jsx("div", {
381
+ isShowIconInteractionTrigger && /*#__PURE__*/ jsxRuntime.jsx("div", {
382
+ className: "gp-hidden interaction-use-custom-element",
383
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
384
+ width: "12",
385
+ height: "13",
386
+ viewBox: "0 0 12 13",
387
+ fill: "none",
388
+ xmlns: "http://www.w3.org/2000/svg",
389
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
390
+ "fill-rule": "evenodd",
391
+ "clip-rule": "evenodd",
392
+ d: "M4.36823 0.430157C4.51621 0.205309 4.76733 0.0699463 5.0365 0.0699463H9.886C10.2045 0.0699463 10.3952 0.424012 10.2201 0.689974L8.36993 3.49883C8.28234 3.63182 8.37772 3.80885 8.53695 3.80885H10.7492C11.1114 3.80885 11.2871 4.25167 11.0235 4.5L3.03995 12.0213C2.75745 12.2874 2.29956 12.0357 2.37286 11.6546L3.28019 6.93662C3.30391 6.81327 3.20939 6.69885 3.08379 6.69885H0.984895C0.666494 6.69885 0.475723 6.34493 0.650759 6.07895L4.36823 0.430157ZM5.48883 1.20046C5.35424 1.20046 5.22868 1.26814 5.15469 1.38057L2.6027 5.25839C2.51518 5.39137 2.61056 5.56833 2.76976 5.56833H4.27861C4.52982 5.56833 4.71885 5.79718 4.67141 6.04387L4.12087 8.9066C4.08422 9.09717 4.31317 9.22301 4.45442 9.08994L8.49328 5.28494C8.62508 5.16077 8.53721 4.93936 8.35614 4.93936H6.75127C6.4328 4.93936 6.24204 4.5853 6.41722 4.31934L8.26734 1.51048C8.35494 1.37749 8.25956 1.20046 8.10032 1.20046H5.48883Z",
393
+ fill: "#F9F9F9"
394
+ })
395
+ })
396
+ }),
397
+ isShowIconInteractionTarget && /*#__PURE__*/ jsxRuntime.jsx("div", {
398
+ className: "gp-hidden interaction-use-custom-element",
399
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
400
+ width: "14",
401
+ height: "14",
402
+ viewBox: "0 0 14 14",
403
+ fill: "none",
404
+ xmlns: "http://www.w3.org/2000/svg",
405
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
406
+ "fill-rule": "evenodd",
407
+ "clip-rule": "evenodd",
408
+ d: "M6.2941 2.19513C6.70415 2.13657 6.9891 1.75669 6.93054 1.34663C6.87198 0.936581 6.49209 0.651638 6.08204 0.710196C2.98687 1.15221 0.607666 3.8125 0.607666 7.02978C0.607666 10.5556 3.46588 13.4138 6.99166 13.4138C10.1798 13.4138 12.8209 11.0775 13.2987 8.02354C13.3627 7.61431 13.0828 7.23065 12.6736 7.16663C12.2644 7.1026 11.8807 7.38245 11.8167 7.79169C11.4513 10.127 9.42946 11.9138 6.99166 11.9138C4.2943 11.9138 2.10767 9.72714 2.10767 7.02978C2.10767 4.56958 3.92742 2.53311 6.2941 2.19513ZM9.32325 0.978487C9.59794 0.703796 10.0673 0.833594 10.1618 1.21039L10.648 3.14898C10.6705 3.2384 10.7403 3.30822 10.8297 3.33065L12.7683 3.81691C13.1451 3.91143 13.2749 4.38075 13.0002 4.65544L11.3265 6.32911C11.099 6.55668 10.7758 6.66082 10.4581 6.60891L9.03886 6.37696C8.72123 6.32505 8.39804 6.42918 8.17046 6.65676L7.40064 7.42658C7.16633 7.66089 6.78643 7.66089 6.55211 7.42658C6.3178 7.19227 6.3178 6.81237 6.55211 6.57805L7.32193 5.80823C7.54951 5.58066 7.65364 5.25746 7.60173 4.93983L7.36978 3.52055C7.31787 3.20293 7.42201 2.87973 7.64958 2.65216L9.32325 0.978487ZM8.79074 4.77514C8.82538 4.98713 8.99156 5.15331 9.20355 5.18795L10.2975 5.36674C10.4564 5.3927 10.618 5.34063 10.7317 5.22684L10.9663 4.99227C11.1037 4.85492 11.0388 4.62026 10.8504 4.573L9.98586 4.35615C9.80703 4.3113 9.66739 4.17166 9.62254 3.99283L9.40569 3.12832C9.35843 2.93992 9.12377 2.87502 8.98642 3.01237L8.75185 3.24695C8.63806 3.36073 8.58599 3.52233 8.61195 3.68114L8.79074 4.77514ZM7.02213 4.44284C7.14103 4.83962 6.91577 5.25766 6.51899 5.37657C5.8172 5.58687 5.30708 6.2382 5.30708 7.00672C5.30708 7.94638 6.06883 8.70813 7.00849 8.70813C7.77819 8.70813 8.43033 8.19644 8.6396 7.49302C8.75772 7.096 9.17531 6.86991 9.57233 6.98802C9.96934 7.10614 10.1954 7.52373 10.0773 7.92075C9.68401 9.24279 8.45997 10.2081 7.00849 10.2081C5.2404 10.2081 3.80708 8.77481 3.80708 7.00672C3.80708 5.55746 4.76949 4.33493 6.0884 3.9397C6.48518 3.82079 6.90323 4.04606 7.02213 4.44284Z",
409
+ fill: "#F9F9F9"
410
+ })
411
+ })
412
+ }),
413
+ isDisplayIconDrag && /*#__PURE__*/ jsxRuntime.jsx("div", {
357
414
  "data-toolbar-icon-drag": true,
358
415
  children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
359
416
  width: "16",
package/dist/cjs/components/InteractionSuffix.js CHANGED
@@ -17,18 +17,18 @@ require('dayjs');
17
17
  var index = require('../helpers/interaction/index.js');
18
18
  require('../helpers/convert.js');
19
19
 
20
- const InteractionSuffix = ({ tag, uid })=>{
20
+ const InteractionSuffix = ({ uid })=>{
21
21
  const { closeSelectOnPage } = index.useInteraction();
22
22
  const currentInteraction = PageContext.usePageStore((s)=>s.interactionData?.item);
23
23
  const isSelectOnPage = PageContext.usePageStore((s)=>s.interactionData?.isSelectOnPage);
24
24
  const isCurrentInteractionTarget = react.useMemo(()=>{
25
- return currentInteraction?.targets?.find((t)=>t.uid === uid && !t.isEntirePage);
25
+ return currentInteraction?.targets?.find((t)=>t.uid === uid && t.type !== 'PAGE');
26
26
  }, [
27
27
  currentInteraction,
28
28
  uid
29
29
  ]);
30
30
  const isCurrentInteractionTrigger = react.useMemo(()=>{
31
- return currentInteraction?.self?.uid === uid && !currentInteraction?.self?.isEntirePage;
31
+ return currentInteraction?.self?.uid === uid && currentInteraction?.self?.type !== 'PAGE';
32
32
  }, [
33
33
  currentInteraction,
34
34
  uid
@@ -39,76 +39,15 @@ const InteractionSuffix = ({ tag, uid })=>{
39
39
  isCurrentInteractionTarget,
40
40
  isCurrentInteractionTrigger
41
41
  ]);
42
- const positionOffset = react.useMemo(()=>{
43
- if (isCurrentInteractionTrigger && isCurrentInteractionTarget) {
44
- return 80;
45
- }
46
- return 40;
47
- }, [
48
- isCurrentInteractionTrigger,
49
- isCurrentInteractionTarget
50
- ]);
51
42
  if (!isDisplay) {
52
43
  return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {});
53
44
  }
54
- return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
55
- children: [
56
- isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx("button", {
57
- className: "gp-bg-[#F4F4F4] gp-px-2 gp-py-0.5 gp-rounded-lg gp-text-[#212121] gp-text-sm gp-font-medium gp-hidden interaction-use-element-btn",
58
- onClick: closeSelectOnPage,
59
- children: "Use element"
60
- }),
61
- /*#__PURE__*/ jsxRuntime.jsx("div", {
62
- className: "hidden gp-left-[-40px] gp-left-[-80px] gp-right-[-40px] gp-right-[-80px]"
63
- }),
64
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
65
- className: `gp-hidden gp-absolute interaction-suffix gp-gap-[8px] ${tag == 'Section' ? `gp-left-[-${positionOffset}px]` : `gp-right-[-${positionOffset}px]`}`,
66
- children: [
67
- isCurrentInteractionTrigger && /*#__PURE__*/ jsxRuntime.jsx("div", {
68
- className: `gp-h-8 gp-rounded-[8px] gp-w-8 gp-bg-[#212121] gp-flex gp-justify-center gp-items-center `,
69
- children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
70
- width: "16",
71
- height: "16",
72
- viewBox: "0 0 16 16",
73
- fill: "none",
74
- xmlns: "http://www.w3.org/2000/svg",
75
- children: /*#__PURE__*/ jsxRuntime.jsx("path", {
76
- fillRule: "evenodd",
77
- clipRule: "evenodd",
78
- d: "M12.9196 5.80449C13.0989 5.80449 13.1876 6.02216 13.0595 6.14749L4.83569 14.1892C4.69517 14.3267 4.46149 14.2002 4.49967 14.0074L5.50422 8.93537C5.53483 8.7808 5.41656 8.6368 5.25898 8.6368H3.08019C2.92551 8.6368 2.82938 8.46874 2.90779 8.33541L6.72099 1.85154C6.75692 1.79045 6.8225 1.75293 6.89338 1.75293H12.5729C12.7386 1.75293 12.8324 1.94273 12.7319 2.07435L10.1891 5.40272C10.0634 5.56724 10.1807 5.80449 10.3877 5.80449H12.9196Z",
79
- fill: "#F9F9F9"
80
- })
81
- })
82
- }),
83
- isCurrentInteractionTarget && /*#__PURE__*/ jsxRuntime.jsx("div", {
84
- className: `gp-h-8 min-w-8 gp-rounded-[8px] gp-w-8 gp-bg-[#212121] gp-flex gp-justify-center gp-items-center`,
85
- children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
86
- width: "16",
87
- height: "16",
88
- viewBox: "0 0 16 16",
89
- fill: "none",
90
- xmlns: "http://www.w3.org/2000/svg",
91
- children: [
92
- /*#__PURE__*/ jsxRuntime.jsx("path", {
93
- d: "M8.58987 2.11238C8.62815 2.66333 8.21254 3.141 7.66158 3.17928C6.73192 3.24386 5.84034 3.57396 5.09276 4.13034C4.34519 4.68673 3.77304 5.44602 3.44429 6.31801C3.11554 7.19 3.04401 8.13803 3.23821 9.04947C3.4324 9.96092 3.88415 10.7975 4.53978 11.4597C5.19541 12.122 6.02737 12.5821 6.93682 12.7854C7.84626 12.9888 8.79496 12.9268 9.67021 12.6068C10.5455 12.2869 11.3105 11.7224 11.8743 10.9804C12.4382 10.2385 12.7772 9.35025 12.8512 8.42129C12.895 7.87074 13.3768 7.45996 13.9273 7.50377C14.4779 7.54758 14.8887 8.0294 14.8449 8.57994C14.7406 9.8906 14.2622 11.1438 13.4667 12.1906C12.6711 13.2374 11.5918 14.0338 10.3569 14.4852C9.12204 14.9367 7.78353 15.0241 6.50041 14.7373C5.2173 14.4504 4.0435 13.8012 3.11848 12.8668C2.19345 11.9324 1.55609 10.7522 1.28211 9.46624C1.00813 8.1803 1.10905 6.84274 1.57287 5.61247C2.03669 4.3822 2.84393 3.31093 3.89867 2.52593C4.95342 1.74093 6.21133 1.27521 7.52297 1.18409C8.07393 1.14581 8.5516 1.56142 8.58987 2.11238Z",
94
- fill: "#F9F9F9"
95
- }),
96
- /*#__PURE__*/ jsxRuntime.jsx("path", {
97
- fillRule: "evenodd",
98
- clipRule: "evenodd",
99
- d: "M11.9757 1.25658C12.184 1.31428 12.3452 1.47958 12.3976 1.68929L12.7872 3.24774L14.3457 3.63736C14.5554 3.68978 14.7207 3.85096 14.7784 4.05928C14.8361 4.2676 14.7773 4.49085 14.6244 4.64371L12.7167 6.55141C12.5677 6.70044 12.3514 6.76035 12.1469 6.70924L10.5688 6.3147L8.42436 8.45912C8.19005 8.69344 7.81015 8.69344 7.57583 8.45912C7.34152 8.22481 7.34152 7.84491 7.57583 7.61059L9.72025 5.46617L9.32572 3.88804C9.2746 3.68357 9.33451 3.46728 9.48354 3.31825L11.3912 1.41054C11.5441 1.25769 11.7674 1.19888 11.9757 1.25658ZM10.8795 5.15545L12.1084 5.46267L13.0266 4.54451L12.1469 4.3246C11.9319 4.27086 11.7641 4.10301 11.7104 3.88804L11.4904 3.0084L10.5723 3.92656L10.8795 5.15545Z",
100
- fill: "#F9F9F9"
101
- }),
102
- /*#__PURE__*/ jsxRuntime.jsx("path", {
103
- d: "M7.35783 6.45343C7.87208 6.25201 8.12568 5.67185 7.92426 5.15761C7.72284 4.64336 7.14268 4.38976 6.62844 4.59118C6.05705 4.81498 5.55049 5.17772 5.15453 5.64655C4.75858 6.11538 4.4857 6.67552 4.36055 7.27631C4.23539 7.87709 4.26189 8.49961 4.43764 9.08758C4.6134 9.67555 4.93289 10.2105 5.36727 10.6439C5.80165 11.0774 6.33722 11.3958 6.92556 11.5702C7.51391 11.7445 8.13643 11.7695 8.73683 11.6427C9.33723 11.5158 9.89652 11.2413 10.3641 10.8439C10.8318 10.4465 11.1929 9.93885 11.4151 9.36679C11.615 8.85196 11.3597 8.27254 10.8449 8.07262C10.3301 7.87269 9.75066 8.12797 9.55073 8.6428C9.44887 8.9051 9.28329 9.1378 9.06901 9.3199C8.85474 9.50199 8.59851 9.62774 8.32352 9.68582C8.04853 9.7439 7.76341 9.73249 7.49394 9.65262C7.22445 9.57274 6.97907 9.42691 6.78001 9.22825C6.58093 9.0296 6.43446 8.78439 6.35386 8.51478C6.27327 8.24517 6.26112 7.9597 6.31851 7.6842C6.37591 7.4087 6.50102 7.1519 6.68251 6.93702C6.86399 6.72214 7.0961 6.55595 7.35783 6.45343Z",
104
- fill: "#F9F9F9"
105
- })
106
- ]
107
- })
108
- })
109
- ]
110
- })
111
- ]
45
+ return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
46
+ children: isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx("button", {
47
+ className: "gp-bg-[#F4F4F4] gp-px-2 gp-py-0.5 gp-rounded-lg gp-text-[#212121] gp-text-sm gp-font-medium gp-hidden interaction-use-custom-element",
48
+ onClick: closeSelectOnPage,
49
+ children: "Use element"
50
+ })
112
51
  });
113
52
  };
114
53
 
package/dist/cjs/contexts/PageContext.js CHANGED
@@ -56,6 +56,14 @@ const createPageStoreProvider = (data)=>zustand.createStore((set)=>({
56
56
  selectType
57
57
  }
58
58
  }));
59
+ },
60
+ setInteractionSettingType: (settingType)=>{
61
+ set((state)=>({
62
+ interactionData: {
63
+ ...state.interactionData,
64
+ settingType
65
+ }
66
+ }));
59
67
  }
60
68
  }));
61
69
  const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffers, publicStoreFrontData, ...passProps })=>{
package/dist/cjs/hooks/animation/useAnimationConfig.js CHANGED
@@ -14,7 +14,8 @@ const useAnimationConfig = (props)=>{
14
14
  const { animation, setting } = triggerConfig[trigger];
15
15
  return {
16
16
  type: animation,
17
- setting: setting[animation]
17
+ setting: setting[animation],
18
+ reverse: trigger === "hidden"
18
19
  };
19
20
  }, [
20
21
  configByDevices
package/dist/cjs/hooks/animation/useApplyAnimation.js CHANGED
@@ -25,13 +25,13 @@ const useApplyAnimation = ({ props })=>{
25
25
  setAnimationOnFinish,
26
26
  setToolbarActive
27
27
  });
28
- const generateAnimation = react.useCallback(({ target, setting, type })=>{
29
- return animation[type](target, setting);
28
+ const generateAnimation = react.useCallback(({ target, setting, type, reverse })=>{
29
+ return animation[type](target, setting, reverse);
30
30
  }, [
31
31
  animation
32
32
  ]);
33
33
  const initListAnimations = react.useCallback(()=>{
34
- const { type, setting } = getAnimationConfig();
34
+ const { type, setting, reverse } = getAnimationConfig();
35
35
  if (!type || type === animations.AnimationType.None || !targetObjects.current.length) {
36
36
  cancelAnimation();
37
37
  return;
@@ -39,9 +39,9 @@ const useApplyAnimation = ({ props })=>{
39
39
  const listAnimations = targetObjects.current.map((item)=>generateAnimation({
40
40
  type,
41
41
  setting,
42
- target: item.target
42
+ target: item.target,
43
+ reverse
43
44
  }));
44
- console.log('listAnimations', listAnimations);
45
45
  cancelAnimation();
46
46
  setAnimation(listAnimations);
47
47
  }, [
package/dist/esm/components/ComponentToolbarPreview.js CHANGED
@@ -56,7 +56,33 @@ const ComponentToolbarPreview = (props)=>{
56
56
  editingPageType
57
57
  ]);
58
58
  const isSelectOnPage = useMemo(()=>interactionData?.isSelectOnPage, [
59
- interactionData
59
+ interactionData?.isSelectOnPage
60
+ ]);
61
+ const settingType = useMemo(()=>interactionData?.settingType, [
62
+ interactionData?.settingType
63
+ ]);
64
+ const isShowIconInteractionTarget = useMemo(()=>{
65
+ return interactionData?.item?.targets?.find((t)=>t.uid === props.uid && t?.type !== 'PAGE') && isSelectOnPage && settingType === 'TARGET';
66
+ }, [
67
+ interactionData?.item?.targets,
68
+ isSelectOnPage,
69
+ props.uid,
70
+ settingType
71
+ ]);
72
+ const isShowIconInteractionTrigger = useMemo(()=>{
73
+ return interactionData?.item?.self?.uid === props.uid && interactionData?.item?.self.type !== 'PAGE' && isSelectOnPage && settingType === 'TRIGGER';
74
+ }, [
75
+ interactionData?.item?.self?.type,
76
+ interactionData?.item?.self?.uid,
77
+ isSelectOnPage,
78
+ props.uid,
79
+ settingType
80
+ ]);
81
+ const isDisplayIconDrag = useMemo(()=>{
82
+ return !isShowIconInteractionTarget && !isShowIconInteractionTrigger;
83
+ }, [
84
+ isShowIconInteractionTarget,
85
+ isShowIconInteractionTrigger
60
86
  ]);
61
87
  const { checkDisableDelete, getTooltipText, checkDisableDuplicate } = usePostPurchase(props.uid, props.tag || '');
62
88
  const editProductElementList = [
@@ -334,7 +360,6 @@ const ComponentToolbarPreview = (props)=>{
334
360
  if (isShopifySection || isThemeSection && !isThemeSectionEditor) return false;
335
361
  return ableGenerateContentElements.includes(tag);
336
362
  };
337
- // if (!isActive) return null;
338
363
  return /*#__PURE__*/ jsxs(Fragment, {
339
364
  children: [
340
365
  !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxs("div", {
@@ -349,7 +374,39 @@ const ComponentToolbarPreview = (props)=>{
349
374
  onClick: (e)=>onShowParent(e),
350
375
  "aria-hidden": "true",
351
376
  children: [
352
- /*#__PURE__*/ jsx("div", {
377
+ isShowIconInteractionTrigger && /*#__PURE__*/ jsx("div", {
378
+ className: "gp-hidden interaction-use-custom-element",
379
+ children: /*#__PURE__*/ jsx("svg", {
380
+ width: "12",
381
+ height: "13",
382
+ viewBox: "0 0 12 13",
383
+ fill: "none",
384
+ xmlns: "http://www.w3.org/2000/svg",
385
+ children: /*#__PURE__*/ jsx("path", {
386
+ "fill-rule": "evenodd",
387
+ "clip-rule": "evenodd",
388
+ d: "M4.36823 0.430157C4.51621 0.205309 4.76733 0.0699463 5.0365 0.0699463H9.886C10.2045 0.0699463 10.3952 0.424012 10.2201 0.689974L8.36993 3.49883C8.28234 3.63182 8.37772 3.80885 8.53695 3.80885H10.7492C11.1114 3.80885 11.2871 4.25167 11.0235 4.5L3.03995 12.0213C2.75745 12.2874 2.29956 12.0357 2.37286 11.6546L3.28019 6.93662C3.30391 6.81327 3.20939 6.69885 3.08379 6.69885H0.984895C0.666494 6.69885 0.475723 6.34493 0.650759 6.07895L4.36823 0.430157ZM5.48883 1.20046C5.35424 1.20046 5.22868 1.26814 5.15469 1.38057L2.6027 5.25839C2.51518 5.39137 2.61056 5.56833 2.76976 5.56833H4.27861C4.52982 5.56833 4.71885 5.79718 4.67141 6.04387L4.12087 8.9066C4.08422 9.09717 4.31317 9.22301 4.45442 9.08994L8.49328 5.28494C8.62508 5.16077 8.53721 4.93936 8.35614 4.93936H6.75127C6.4328 4.93936 6.24204 4.5853 6.41722 4.31934L8.26734 1.51048C8.35494 1.37749 8.25956 1.20046 8.10032 1.20046H5.48883Z",
389
+ fill: "#F9F9F9"
390
+ })
391
+ })
392
+ }),
393
+ isShowIconInteractionTarget && /*#__PURE__*/ jsx("div", {
394
+ className: "gp-hidden interaction-use-custom-element",
395
+ children: /*#__PURE__*/ jsx("svg", {
396
+ width: "14",
397
+ height: "14",
398
+ viewBox: "0 0 14 14",
399
+ fill: "none",
400
+ xmlns: "http://www.w3.org/2000/svg",
401
+ children: /*#__PURE__*/ jsx("path", {
402
+ "fill-rule": "evenodd",
403
+ "clip-rule": "evenodd",
404
+ d: "M6.2941 2.19513C6.70415 2.13657 6.9891 1.75669 6.93054 1.34663C6.87198 0.936581 6.49209 0.651638 6.08204 0.710196C2.98687 1.15221 0.607666 3.8125 0.607666 7.02978C0.607666 10.5556 3.46588 13.4138 6.99166 13.4138C10.1798 13.4138 12.8209 11.0775 13.2987 8.02354C13.3627 7.61431 13.0828 7.23065 12.6736 7.16663C12.2644 7.1026 11.8807 7.38245 11.8167 7.79169C11.4513 10.127 9.42946 11.9138 6.99166 11.9138C4.2943 11.9138 2.10767 9.72714 2.10767 7.02978C2.10767 4.56958 3.92742 2.53311 6.2941 2.19513ZM9.32325 0.978487C9.59794 0.703796 10.0673 0.833594 10.1618 1.21039L10.648 3.14898C10.6705 3.2384 10.7403 3.30822 10.8297 3.33065L12.7683 3.81691C13.1451 3.91143 13.2749 4.38075 13.0002 4.65544L11.3265 6.32911C11.099 6.55668 10.7758 6.66082 10.4581 6.60891L9.03886 6.37696C8.72123 6.32505 8.39804 6.42918 8.17046 6.65676L7.40064 7.42658C7.16633 7.66089 6.78643 7.66089 6.55211 7.42658C6.3178 7.19227 6.3178 6.81237 6.55211 6.57805L7.32193 5.80823C7.54951 5.58066 7.65364 5.25746 7.60173 4.93983L7.36978 3.52055C7.31787 3.20293 7.42201 2.87973 7.64958 2.65216L9.32325 0.978487ZM8.79074 4.77514C8.82538 4.98713 8.99156 5.15331 9.20355 5.18795L10.2975 5.36674C10.4564 5.3927 10.618 5.34063 10.7317 5.22684L10.9663 4.99227C11.1037 4.85492 11.0388 4.62026 10.8504 4.573L9.98586 4.35615C9.80703 4.3113 9.66739 4.17166 9.62254 3.99283L9.40569 3.12832C9.35843 2.93992 9.12377 2.87502 8.98642 3.01237L8.75185 3.24695C8.63806 3.36073 8.58599 3.52233 8.61195 3.68114L8.79074 4.77514ZM7.02213 4.44284C7.14103 4.83962 6.91577 5.25766 6.51899 5.37657C5.8172 5.58687 5.30708 6.2382 5.30708 7.00672C5.30708 7.94638 6.06883 8.70813 7.00849 8.70813C7.77819 8.70813 8.43033 8.19644 8.6396 7.49302C8.75772 7.096 9.17531 6.86991 9.57233 6.98802C9.96934 7.10614 10.1954 7.52373 10.0773 7.92075C9.68401 9.24279 8.45997 10.2081 7.00849 10.2081C5.2404 10.2081 3.80708 8.77481 3.80708 7.00672C3.80708 5.55746 4.76949 4.33493 6.0884 3.9397C6.48518 3.82079 6.90323 4.04606 7.02213 4.44284Z",
405
+ fill: "#F9F9F9"
406
+ })
407
+ })
408
+ }),
409
+ isDisplayIconDrag && /*#__PURE__*/ jsx("div", {
353
410
  "data-toolbar-icon-drag": true,
354
411
  children: /*#__PURE__*/ jsxs("svg", {
355
412
  width: "16",
package/dist/esm/components/InteractionSuffix.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
1
+ import { jsx, Fragment } from 'react/jsx-runtime';
2
2
  import { useMemo } from 'react';
3
3
  import 'zustand';
4
4
  import 'swr';
@@ -15,18 +15,18 @@ import 'dayjs';
15
15
  import { useInteraction } from '../helpers/interaction/index.js';
16
16
  import '../helpers/convert.js';
17
17
 
18
- const InteractionSuffix = ({ tag, uid })=>{
18
+ const InteractionSuffix = ({ uid })=>{
19
19
  const { closeSelectOnPage } = useInteraction();
20
20
  const currentInteraction = usePageStore((s)=>s.interactionData?.item);
21
21
  const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
22
22
  const isCurrentInteractionTarget = useMemo(()=>{
23
- return currentInteraction?.targets?.find((t)=>t.uid === uid && !t.isEntirePage);
23
+ return currentInteraction?.targets?.find((t)=>t.uid === uid && t.type !== 'PAGE');
24
24
  }, [
25
25
  currentInteraction,
26
26
  uid
27
27
  ]);
28
28
  const isCurrentInteractionTrigger = useMemo(()=>{
29
- return currentInteraction?.self?.uid === uid && !currentInteraction?.self?.isEntirePage;
29
+ return currentInteraction?.self?.uid === uid && currentInteraction?.self?.type !== 'PAGE';
30
30
  }, [
31
31
  currentInteraction,
32
32
  uid
@@ -37,76 +37,15 @@ const InteractionSuffix = ({ tag, uid })=>{
37
37
  isCurrentInteractionTarget,
38
38
  isCurrentInteractionTrigger
39
39
  ]);
40
- const positionOffset = useMemo(()=>{
41
- if (isCurrentInteractionTrigger && isCurrentInteractionTarget) {
42
- return 80;
43
- }
44
- return 40;
45
- }, [
46
- isCurrentInteractionTrigger,
47
- isCurrentInteractionTarget
48
- ]);
49
40
  if (!isDisplay) {
50
41
  return /*#__PURE__*/ jsx(Fragment, {});
51
42
  }
52
- return /*#__PURE__*/ jsxs(Fragment, {
53
- children: [
54
- isSelectOnPage && /*#__PURE__*/ jsx("button", {
55
- className: "gp-bg-[#F4F4F4] gp-px-2 gp-py-0.5 gp-rounded-lg gp-text-[#212121] gp-text-sm gp-font-medium gp-hidden interaction-use-element-btn",
56
- onClick: closeSelectOnPage,
57
- children: "Use element"
58
- }),
59
- /*#__PURE__*/ jsx("div", {
60
- className: "hidden gp-left-[-40px] gp-left-[-80px] gp-right-[-40px] gp-right-[-80px]"
61
- }),
62
- /*#__PURE__*/ jsxs("div", {
63
- className: `gp-hidden gp-absolute interaction-suffix gp-gap-[8px] ${tag == 'Section' ? `gp-left-[-${positionOffset}px]` : `gp-right-[-${positionOffset}px]`}`,
64
- children: [
65
- isCurrentInteractionTrigger && /*#__PURE__*/ jsx("div", {
66
- className: `gp-h-8 gp-rounded-[8px] gp-w-8 gp-bg-[#212121] gp-flex gp-justify-center gp-items-center `,
67
- children: /*#__PURE__*/ jsx("svg", {
68
- width: "16",
69
- height: "16",
70
- viewBox: "0 0 16 16",
71
- fill: "none",
72
- xmlns: "http://www.w3.org/2000/svg",
73
- children: /*#__PURE__*/ jsx("path", {
74
- fillRule: "evenodd",
75
- clipRule: "evenodd",
76
- d: "M12.9196 5.80449C13.0989 5.80449 13.1876 6.02216 13.0595 6.14749L4.83569 14.1892C4.69517 14.3267 4.46149 14.2002 4.49967 14.0074L5.50422 8.93537C5.53483 8.7808 5.41656 8.6368 5.25898 8.6368H3.08019C2.92551 8.6368 2.82938 8.46874 2.90779 8.33541L6.72099 1.85154C6.75692 1.79045 6.8225 1.75293 6.89338 1.75293H12.5729C12.7386 1.75293 12.8324 1.94273 12.7319 2.07435L10.1891 5.40272C10.0634 5.56724 10.1807 5.80449 10.3877 5.80449H12.9196Z",
77
- fill: "#F9F9F9"
78
- })
79
- })
80
- }),
81
- isCurrentInteractionTarget && /*#__PURE__*/ jsx("div", {
82
- className: `gp-h-8 min-w-8 gp-rounded-[8px] gp-w-8 gp-bg-[#212121] gp-flex gp-justify-center gp-items-center`,
83
- children: /*#__PURE__*/ jsxs("svg", {
84
- width: "16",
85
- height: "16",
86
- viewBox: "0 0 16 16",
87
- fill: "none",
88
- xmlns: "http://www.w3.org/2000/svg",
89
- children: [
90
- /*#__PURE__*/ jsx("path", {
91
- d: "M8.58987 2.11238C8.62815 2.66333 8.21254 3.141 7.66158 3.17928C6.73192 3.24386 5.84034 3.57396 5.09276 4.13034C4.34519 4.68673 3.77304 5.44602 3.44429 6.31801C3.11554 7.19 3.04401 8.13803 3.23821 9.04947C3.4324 9.96092 3.88415 10.7975 4.53978 11.4597C5.19541 12.122 6.02737 12.5821 6.93682 12.7854C7.84626 12.9888 8.79496 12.9268 9.67021 12.6068C10.5455 12.2869 11.3105 11.7224 11.8743 10.9804C12.4382 10.2385 12.7772 9.35025 12.8512 8.42129C12.895 7.87074 13.3768 7.45996 13.9273 7.50377C14.4779 7.54758 14.8887 8.0294 14.8449 8.57994C14.7406 9.8906 14.2622 11.1438 13.4667 12.1906C12.6711 13.2374 11.5918 14.0338 10.3569 14.4852C9.12204 14.9367 7.78353 15.0241 6.50041 14.7373C5.2173 14.4504 4.0435 13.8012 3.11848 12.8668C2.19345 11.9324 1.55609 10.7522 1.28211 9.46624C1.00813 8.1803 1.10905 6.84274 1.57287 5.61247C2.03669 4.3822 2.84393 3.31093 3.89867 2.52593C4.95342 1.74093 6.21133 1.27521 7.52297 1.18409C8.07393 1.14581 8.5516 1.56142 8.58987 2.11238Z",
92
- fill: "#F9F9F9"
93
- }),
94
- /*#__PURE__*/ jsx("path", {
95
- fillRule: "evenodd",
96
- clipRule: "evenodd",
97
- d: "M11.9757 1.25658C12.184 1.31428 12.3452 1.47958 12.3976 1.68929L12.7872 3.24774L14.3457 3.63736C14.5554 3.68978 14.7207 3.85096 14.7784 4.05928C14.8361 4.2676 14.7773 4.49085 14.6244 4.64371L12.7167 6.55141C12.5677 6.70044 12.3514 6.76035 12.1469 6.70924L10.5688 6.3147L8.42436 8.45912C8.19005 8.69344 7.81015 8.69344 7.57583 8.45912C7.34152 8.22481 7.34152 7.84491 7.57583 7.61059L9.72025 5.46617L9.32572 3.88804C9.2746 3.68357 9.33451 3.46728 9.48354 3.31825L11.3912 1.41054C11.5441 1.25769 11.7674 1.19888 11.9757 1.25658ZM10.8795 5.15545L12.1084 5.46267L13.0266 4.54451L12.1469 4.3246C11.9319 4.27086 11.7641 4.10301 11.7104 3.88804L11.4904 3.0084L10.5723 3.92656L10.8795 5.15545Z",
98
- fill: "#F9F9F9"
99
- }),
100
- /*#__PURE__*/ jsx("path", {
101
- d: "M7.35783 6.45343C7.87208 6.25201 8.12568 5.67185 7.92426 5.15761C7.72284 4.64336 7.14268 4.38976 6.62844 4.59118C6.05705 4.81498 5.55049 5.17772 5.15453 5.64655C4.75858 6.11538 4.4857 6.67552 4.36055 7.27631C4.23539 7.87709 4.26189 8.49961 4.43764 9.08758C4.6134 9.67555 4.93289 10.2105 5.36727 10.6439C5.80165 11.0774 6.33722 11.3958 6.92556 11.5702C7.51391 11.7445 8.13643 11.7695 8.73683 11.6427C9.33723 11.5158 9.89652 11.2413 10.3641 10.8439C10.8318 10.4465 11.1929 9.93885 11.4151 9.36679C11.615 8.85196 11.3597 8.27254 10.8449 8.07262C10.3301 7.87269 9.75066 8.12797 9.55073 8.6428C9.44887 8.9051 9.28329 9.1378 9.06901 9.3199C8.85474 9.50199 8.59851 9.62774 8.32352 9.68582C8.04853 9.7439 7.76341 9.73249 7.49394 9.65262C7.22445 9.57274 6.97907 9.42691 6.78001 9.22825C6.58093 9.0296 6.43446 8.78439 6.35386 8.51478C6.27327 8.24517 6.26112 7.9597 6.31851 7.6842C6.37591 7.4087 6.50102 7.1519 6.68251 6.93702C6.86399 6.72214 7.0961 6.55595 7.35783 6.45343Z",
102
- fill: "#F9F9F9"
103
- })
104
- ]
105
- })
106
- })
107
- ]
108
- })
109
- ]
43
+ return /*#__PURE__*/ jsx(Fragment, {
44
+ children: isSelectOnPage && /*#__PURE__*/ jsx("button", {
45
+ className: "gp-bg-[#F4F4F4] gp-px-2 gp-py-0.5 gp-rounded-lg gp-text-[#212121] gp-text-sm gp-font-medium gp-hidden interaction-use-custom-element",
46
+ onClick: closeSelectOnPage,
47
+ children: "Use element"
48
+ })
110
49
  });
111
50
  };
112
51
 
package/dist/esm/contexts/PageContext.js CHANGED
@@ -54,6 +54,14 @@ const createPageStoreProvider = (data)=>createStore((set)=>({
54
54
  selectType
55
55
  }
56
56
  }));
57
+ },
58
+ setInteractionSettingType: (settingType)=>{
59
+ set((state)=>({
60
+ interactionData: {
61
+ ...state.interactionData,
62
+ settingType
63
+ }
64
+ }));
57
65
  }
58
66
  }));
59
67
  const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffers, publicStoreFrontData, ...passProps })=>{
package/dist/esm/hooks/animation/useAnimationConfig.js CHANGED
@@ -12,7 +12,8 @@ const useAnimationConfig = (props)=>{
12
12
  const { animation, setting } = triggerConfig[trigger];
13
13
  return {
14
14
  type: animation,
15
- setting: setting[animation]
15
+ setting: setting[animation],
16
+ reverse: trigger === "hidden"
16
17
  };
17
18
  }, [
18
19
  configByDevices
package/dist/esm/hooks/animation/useApplyAnimation.js CHANGED
@@ -21,13 +21,13 @@ const useApplyAnimation = ({ props })=>{
21
21
  setAnimationOnFinish,
22
22
  setToolbarActive
23
23
  });
24
- const generateAnimation = useCallback(({ target, setting, type })=>{
25
- return animation[type](target, setting);
24
+ const generateAnimation = useCallback(({ target, setting, type, reverse })=>{
25
+ return animation[type](target, setting, reverse);
26
26
  }, [
27
27
  animation
28
28
  ]);
29
29
  const initListAnimations = useCallback(()=>{
30
- const { type, setting } = getAnimationConfig();
30
+ const { type, setting, reverse } = getAnimationConfig();
31
31
  if (!type || type === AnimationType.None || !targetObjects.current.length) {
32
32
  cancelAnimation();
33
33
  return;
@@ -35,9 +35,9 @@ const useApplyAnimation = ({ props })=>{
35
35
  const listAnimations = targetObjects.current.map((item)=>generateAnimation({
36
36
  type,
37
37
  setting,
38
- target: item.target
38
+ target: item.target,
39
+ reverse
39
40
  }));
40
- console.log('listAnimations', listAnimations);
41
41
  cancelAnimation();
42
42
  setAnimation(listAnimations);
43
43
  }, [
package/dist/types/index.d.ts CHANGED
@@ -8439,7 +8439,7 @@ type InteractionElement<E, T> = {
8439
8439
  elementTag?: string;
8440
8440
  targetOutsideSelector?: string;
8441
8441
  targetInsideSelector?: string;
8442
- isEntirePage?: boolean;
8442
+ type?: 'ELEMENT' | 'PAGE';
8443
8443
  };
8444
8444
  declare enum InteractionTargetEvent {
8445
8445
  'gp:change-background-color' = 0,
@@ -8503,7 +8503,7 @@ type InteractionTarget = {
8503
8503
  targetOutsideSelector?: string;
8504
8504
  targetInsideSelector?: string;
8505
8505
  events?: InteractionTargetEventObject[];
8506
- isEntirePage?: boolean;
8506
+ type?: 'ELEMENT' | 'PAGE';
8507
8507
  };
8508
8508
  type InteractionTargetEventObject = {
8509
8509
  event: InteractionTargetEvent;
@@ -31390,6 +31390,7 @@ type PageContextProps = {
31390
31390
  item?: Interaction;
31391
31391
  isSelectOnPage?: boolean;
31392
31392
  selectType?: 'ELEMENT' | 'PAGE';
31393
+ settingType?: 'TRIGGER' | 'TARGET';
31393
31394
  };
31394
31395
  setDynamicProduct: (data: DynamicProduct) => void;
31395
31396
  setDynamicCollection: (data: DynamicCollection) => void;
@@ -31399,6 +31400,7 @@ type PageContextProps = {
31399
31400
  setInteractionItem: (item: Interaction) => void;
31400
31401
  setInteractionIsSelectOnPage: (value: boolean) => void;
31401
31402
  setInteractionSelectType: (selectType: 'ELEMENT' | 'PAGE') => void;
31403
+ setInteractionSettingType: (settingType: 'TRIGGER' | 'TARGET') => void;
31402
31404
  };
31403
31405
  type PageProviderProps = Pick<PageContextProps, 'dynamicProduct' | 'dynamicCollection' | 'productOffers'> & {
31404
31406
  children: React.ReactNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.53.0-dev.33",
3
+ "version": "1.53.0-dev.39",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -28,7 +28,7 @@
28
28
  },
29
29
  "devDependencies": {
30
30
  "@gem-sdk/adapter-shopify": "1.53.0-dev.4",
31
- "@gem-sdk/styles": "1.53.0-dev.26",
31
+ "@gem-sdk/styles": "1.53.0-dev.39",
32
32
  "@types/classnames": "^2.3.1"
33
33
  },
34
34
  "dependencies": {