@gem-sdk/core 1.56.0-staging.13 → 1.56.0-staging.18

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 +11 -8
  2. package/dist/cjs/helpers/background.js +3 -1
  3. package/dist/cjs/helpers/interaction/index.js +4 -4
  4. package/dist/cjs/hooks/animation/useAnimationTarget.js +5 -2
  5. package/dist/cjs/hooks/useToolbarPostPurchase.js +2 -2
  6. package/dist/esm/components/ComponentToolbarPreview.js +11 -8
  7. package/dist/esm/helpers/background.js +3 -1
  8. package/dist/esm/helpers/interaction/index.js +4 -4
  9. package/dist/esm/hooks/animation/useAnimationTarget.js +5 -2
  10. package/dist/esm/hooks/useToolbarPostPurchase.js +2 -2
  11. package/dist/types/index.d.ts +4 -2
  12. package/package.json +2 -2
package/dist/cjs/components/ComponentToolbarPreview.js CHANGED
@@ -48,6 +48,7 @@ const ComponentToolbarPreview = (props)=>{
48
48
  const [parents, setParents] = react.useState([]);
49
49
  const [deleteTooltipPosition, setDeleteTooltipPosition] = react.useState('top');
50
50
  const [isDisableDelete, setIsUnableDelete] = react.useState(false);
51
+ const [isActiveToolbarComponent, setIsActiveToolbarComponent] = react.useState(false);
51
52
  const [productId, setProductId] = react.useState('');
52
53
  const [articleUid, setArticleUid] = react.useState('');
53
54
  const [tooltipText, setTooltipText] = react.useState({
@@ -100,7 +101,7 @@ const ComponentToolbarPreview = (props)=>{
100
101
  };
101
102
  const getDeleteTooltipPosition = react.useCallback(()=>{
102
103
  if (props.tag == 'Section') return 'bottom';
103
- const $toolbar = document.querySelector('[data-toolbar-active="true"]');
104
+ const $toolbar = document.body.querySelector('#storefront')?.querySelector('[data-toolbar-active="true"]');
104
105
  if ($toolbar) {
105
106
  const rect = $toolbar.getBoundingClientRect();
106
107
  if (rect.top < 60) setDeleteTooltipPosition('bottom');
@@ -172,6 +173,7 @@ const ComponentToolbarPreview = (props)=>{
172
173
  setProductId(detail.productId);
173
174
  }
174
175
  if (detail?.componentUid == props.uid) {
176
+ setIsActiveToolbarComponent(true);
175
177
  getDeleteTooltipPosition();
176
178
  if (isSaleFunnelPage) {
177
179
  setIsUnableDelete(checkDisableDelete());
@@ -187,6 +189,7 @@ const ComponentToolbarPreview = (props)=>{
187
189
  }).slice(0, 3);
188
190
  setParents(currentParents);
189
191
  } else {
192
+ setIsActiveToolbarComponent(false);
190
193
  setParents([]);
191
194
  setIsShowParent(false);
192
195
  }
@@ -406,7 +409,7 @@ const ComponentToolbarPreview = (props)=>{
406
409
  })
407
410
  })
408
411
  }),
409
- isDisplayIconDrag && /*#__PURE__*/ jsxRuntime.jsx("div", {
412
+ isActiveToolbarComponent && isDisplayIconDrag && /*#__PURE__*/ jsxRuntime.jsx("div", {
410
413
  "data-toolbar-icon-drag": true,
411
414
  children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
412
415
  width: "16",
@@ -445,7 +448,7 @@ const ComponentToolbarPreview = (props)=>{
445
448
  "data-toolbar-name": true,
446
449
  children: [
447
450
  getSectionName(),
448
- props.isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
451
+ isActiveToolbarComponent && props.isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
449
452
  "data-toolbar-visibility": true,
450
453
  width: "20",
451
454
  height: "20",
@@ -478,7 +481,7 @@ const ComponentToolbarPreview = (props)=>{
478
481
  "data-toolbar-name": true,
479
482
  children: toolbarName()
480
483
  }),
481
- props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
484
+ isActiveToolbarComponent && props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
482
485
  "data-toolbar-icon-parent": true,
483
486
  "data-toolbar-icon-parent-open": isShowParent,
484
487
  children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
@@ -494,7 +497,7 @@ const ComponentToolbarPreview = (props)=>{
494
497
  })
495
498
  ]
496
499
  }),
497
- isShowParent && parents.map((parent, index)=>{
500
+ isActiveToolbarComponent && isShowParent && parents.map((parent, index)=>{
498
501
  // Update count columns of Row
499
502
  const parentLength = parent?.childrens?.length ?? 0;
500
503
  let parent_label = parent.label;
@@ -553,7 +556,7 @@ const ComponentToolbarPreview = (props)=>{
553
556
  ]
554
557
  }, parent.uid);
555
558
  }),
556
- !isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
559
+ isActiveToolbarComponent && !isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
557
560
  children: [
558
561
  ' ',
559
562
  props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && !props.isShopifySection && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
@@ -722,10 +725,10 @@ const ComponentToolbarPreview = (props)=>{
722
725
  })
723
726
  ]
724
727
  }),
725
- constant.ableGenerateContentElements.includes(props.tag) && /*#__PURE__*/ jsxRuntime.jsx(AIGenContentLoading.AIGenContentLoading, {
728
+ constant.ableGenerateContentElements.includes(props.tag) && isActiveToolbarComponent && /*#__PURE__*/ jsxRuntime.jsx(AIGenContentLoading.AIGenContentLoading, {
726
729
  ...props
727
730
  }),
728
- /*#__PURE__*/ jsxRuntime.jsx(Resize.default, {
731
+ isActiveToolbarComponent && /*#__PURE__*/ jsxRuntime.jsx(Resize.default, {
729
732
  ...props
730
733
  })
731
734
  ]
package/dist/cjs/helpers/background.js CHANGED
@@ -13,7 +13,9 @@ const getStyleBackgroundByDevice = (background, options)=>{
13
13
  ...getStyleBgColor(background)
14
14
  } : {},
15
15
  ...!options?.ignoreBackgroundImage ? {
16
- ...getStyleBgImage(background, options),
16
+ ...getStyleBgImage(background, options)
17
+ } : {},
18
+ ...!options?.ignoreBackgroundImageProperties ? {
17
19
  ...getStyleBgPosition(background),
18
20
  ...getStyleBgSize(background),
19
21
  ...getStyleBgRepeat(background)
package/dist/cjs/helpers/interaction/index.js CHANGED
@@ -17,7 +17,7 @@ require('dayjs');
17
17
  require('../convert.js');
18
18
 
19
19
  const useInteraction = ()=>{
20
- const ref = react.useRef(null);
20
+ const ref = react.useRef();
21
21
  const setInteractionIsSelectOnPage = PageContext.usePageStore((s)=>s.setInteractionIsSelectOnPage);
22
22
  function findElementIncludingSelf(element, selector) {
23
23
  if (!(element instanceof Document) && element?.matches(selector)) {
@@ -26,8 +26,8 @@ const useInteraction = ()=>{
26
26
  return element?.querySelector(selector);
27
27
  }
28
28
  }
29
- const onListener = ({ event, selector }, callback)=>{
30
- const element = findElementIncludingSelf(ref.current || document, selector);
29
+ const onListener = ({ event, selector, elementRef }, callback)=>{
30
+ const element = findElementIncludingSelf(elementRef?.current || ref.current || document, selector);
31
31
  if (!element) return;
32
32
  element.addEventListener(event, (e)=>{
33
33
  const event = e;
@@ -36,7 +36,7 @@ const useInteraction = ()=>{
36
36
  });
37
37
  };
38
38
  const trigger = ({ event, data, selector, element: elementParam })=>{
39
- const element = elementParam || document.querySelector(selector);
39
+ const element = elementParam || document.body.querySelector('#storefront')?.querySelector(selector);
40
40
  if (!element) return;
41
41
  const eventDispatch = new CustomEvent(event, {
42
42
  bubbles: false,
package/dist/cjs/hooks/animation/useAnimationTarget.js CHANGED
@@ -98,9 +98,12 @@ const useAnimationTarget = (props)=>{
98
98
  const initListOfTargets = react.useCallback(()=>{
99
99
  if (!isEnabledAnimation) return;
100
100
  if (!targets.current) {
101
- targets.current = document.querySelectorAll(`[data-uid="${componentUid}"]`);
101
+ const $storefront = document.body.querySelector('#storefront');
102
+ if ($storefront) {
103
+ targets.current = $storefront.querySelectorAll(`[data-uid="${componentUid}"]`);
104
+ }
102
105
  }
103
- const targetsArray = Array.from(targets.current);
106
+ const targetsArray = Array.from(targets.current || []);
104
107
  if (!targetsArray.length) return;
105
108
  const updatedTargetObjects = getUpdatedTargetObjects(targetsArray);
106
109
  targetObjects.current = updatedTargetObjects;
package/dist/cjs/hooks/useToolbarPostPurchase.js CHANGED
@@ -31,7 +31,7 @@ const usePostPurchase = (uid, tag)=>{
31
31
  return count <= 1;
32
32
  };
33
33
  const verifyWrapContainsRequireElement = ()=>{
34
- const $component = document.querySelector(`[data-uid="${uid}"]`);
34
+ const $component = document.body.querySelector('#storefront')?.querySelector(`[data-uid="${uid}"]`);
35
35
  if (!$component) return false;
36
36
  for (const requiredElementTag of constant.postPurchaseRequiredElements){
37
37
  const countElementInsidePage = getElementCountInPage(requiredElementTag);
@@ -44,7 +44,7 @@ const usePostPurchase = (uid, tag)=>{
44
44
  };
45
45
  const countRequiredElement = ()=>{
46
46
  return constant.postPurchaseRequiredElements.reduce((acc, requiredElementTag)=>{
47
- const $component = document.querySelector(`[data-uid="${uid}"]`);
47
+ const $component = document.body.querySelector('#storefront')?.querySelector(`[data-uid="${uid}"]`);
48
48
  if (!$component) return 0;
49
49
  const count = $component.querySelectorAll(`[data-component-tag="${requiredElementTag}"]`).length;
50
50
  return acc + count;
package/dist/esm/components/ComponentToolbarPreview.js CHANGED
@@ -44,6 +44,7 @@ const ComponentToolbarPreview = (props)=>{
44
44
  const [parents, setParents] = useState([]);
45
45
  const [deleteTooltipPosition, setDeleteTooltipPosition] = useState('top');
46
46
  const [isDisableDelete, setIsUnableDelete] = useState(false);
47
+ const [isActiveToolbarComponent, setIsActiveToolbarComponent] = useState(false);
47
48
  const [productId, setProductId] = useState('');
48
49
  const [articleUid, setArticleUid] = useState('');
49
50
  const [tooltipText, setTooltipText] = useState({
@@ -96,7 +97,7 @@ const ComponentToolbarPreview = (props)=>{
96
97
  };
97
98
  const getDeleteTooltipPosition = useCallback(()=>{
98
99
  if (props.tag == 'Section') return 'bottom';
99
- const $toolbar = document.querySelector('[data-toolbar-active="true"]');
100
+ const $toolbar = document.body.querySelector('#storefront')?.querySelector('[data-toolbar-active="true"]');
100
101
  if ($toolbar) {
101
102
  const rect = $toolbar.getBoundingClientRect();
102
103
  if (rect.top < 60) setDeleteTooltipPosition('bottom');
@@ -168,6 +169,7 @@ const ComponentToolbarPreview = (props)=>{
168
169
  setProductId(detail.productId);
169
170
  }
170
171
  if (detail?.componentUid == props.uid) {
172
+ setIsActiveToolbarComponent(true);
171
173
  getDeleteTooltipPosition();
172
174
  if (isSaleFunnelPage) {
173
175
  setIsUnableDelete(checkDisableDelete());
@@ -183,6 +185,7 @@ const ComponentToolbarPreview = (props)=>{
183
185
  }).slice(0, 3);
184
186
  setParents(currentParents);
185
187
  } else {
188
+ setIsActiveToolbarComponent(false);
186
189
  setParents([]);
187
190
  setIsShowParent(false);
188
191
  }
@@ -402,7 +405,7 @@ const ComponentToolbarPreview = (props)=>{
402
405
  })
403
406
  })
404
407
  }),
405
- isDisplayIconDrag && /*#__PURE__*/ jsx("div", {
408
+ isActiveToolbarComponent && isDisplayIconDrag && /*#__PURE__*/ jsx("div", {
406
409
  "data-toolbar-icon-drag": true,
407
410
  children: /*#__PURE__*/ jsxs("svg", {
408
411
  width: "16",
@@ -441,7 +444,7 @@ const ComponentToolbarPreview = (props)=>{
441
444
  "data-toolbar-name": true,
442
445
  children: [
443
446
  getSectionName(),
444
- props.isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxs("svg", {
447
+ isActiveToolbarComponent && props.isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxs("svg", {
445
448
  "data-toolbar-visibility": true,
446
449
  width: "20",
447
450
  height: "20",
@@ -474,7 +477,7 @@ const ComponentToolbarPreview = (props)=>{
474
477
  "data-toolbar-name": true,
475
478
  children: toolbarName()
476
479
  }),
477
- props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsx("div", {
480
+ isActiveToolbarComponent && props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsx("div", {
478
481
  "data-toolbar-icon-parent": true,
479
482
  "data-toolbar-icon-parent-open": isShowParent,
480
483
  children: /*#__PURE__*/ jsx("svg", {
@@ -490,7 +493,7 @@ const ComponentToolbarPreview = (props)=>{
490
493
  })
491
494
  ]
492
495
  }),
493
- isShowParent && parents.map((parent, index)=>{
496
+ isActiveToolbarComponent && isShowParent && parents.map((parent, index)=>{
494
497
  // Update count columns of Row
495
498
  const parentLength = parent?.childrens?.length ?? 0;
496
499
  let parent_label = parent.label;
@@ -549,7 +552,7 @@ const ComponentToolbarPreview = (props)=>{
549
552
  ]
550
553
  }, parent.uid);
551
554
  }),
552
- !isSelectOnPage && /*#__PURE__*/ jsxs(Fragment, {
555
+ isActiveToolbarComponent && !isSelectOnPage && /*#__PURE__*/ jsxs(Fragment, {
553
556
  children: [
554
557
  ' ',
555
558
  props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && !props.isShopifySection && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(CreateThemeSection, {
@@ -718,10 +721,10 @@ const ComponentToolbarPreview = (props)=>{
718
721
  })
719
722
  ]
720
723
  }),
721
- ableGenerateContentElements.includes(props.tag) && /*#__PURE__*/ jsx(AIGenContentLoading, {
724
+ ableGenerateContentElements.includes(props.tag) && isActiveToolbarComponent && /*#__PURE__*/ jsx(AIGenContentLoading, {
722
725
  ...props
723
726
  }),
724
- /*#__PURE__*/ jsx(Resize, {
727
+ isActiveToolbarComponent && /*#__PURE__*/ jsx(Resize, {
725
728
  ...props
726
729
  })
727
730
  ]
package/dist/esm/helpers/background.js CHANGED
@@ -11,7 +11,9 @@ const getStyleBackgroundByDevice = (background, options)=>{
11
11
  ...getStyleBgColor(background)
12
12
  } : {},
13
13
  ...!options?.ignoreBackgroundImage ? {
14
- ...getStyleBgImage(background, options),
14
+ ...getStyleBgImage(background, options)
15
+ } : {},
16
+ ...!options?.ignoreBackgroundImageProperties ? {
15
17
  ...getStyleBgPosition(background),
16
18
  ...getStyleBgSize(background),
17
19
  ...getStyleBgRepeat(background)
package/dist/esm/helpers/interaction/index.js CHANGED
@@ -15,7 +15,7 @@ import 'dayjs';
15
15
  import '../convert.js';
16
16
 
17
17
  const useInteraction = ()=>{
18
- const ref = useRef(null);
18
+ const ref = useRef();
19
19
  const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
20
20
  function findElementIncludingSelf(element, selector) {
21
21
  if (!(element instanceof Document) && element?.matches(selector)) {
@@ -24,8 +24,8 @@ const useInteraction = ()=>{
24
24
  return element?.querySelector(selector);
25
25
  }
26
26
  }
27
- const onListener = ({ event, selector }, callback)=>{
28
- const element = findElementIncludingSelf(ref.current || document, selector);
27
+ const onListener = ({ event, selector, elementRef }, callback)=>{
28
+ const element = findElementIncludingSelf(elementRef?.current || ref.current || document, selector);
29
29
  if (!element) return;
30
30
  element.addEventListener(event, (e)=>{
31
31
  const event = e;
@@ -34,7 +34,7 @@ const useInteraction = ()=>{
34
34
  });
35
35
  };
36
36
  const trigger = ({ event, data, selector, element: elementParam })=>{
37
- const element = elementParam || document.querySelector(selector);
37
+ const element = elementParam || document.body.querySelector('#storefront')?.querySelector(selector);
38
38
  if (!element) return;
39
39
  const eventDispatch = new CustomEvent(event, {
40
40
  bubbles: false,
package/dist/esm/hooks/animation/useAnimationTarget.js CHANGED
@@ -96,9 +96,12 @@ const useAnimationTarget = (props)=>{
96
96
  const initListOfTargets = useCallback(()=>{
97
97
  if (!isEnabledAnimation) return;
98
98
  if (!targets.current) {
99
- targets.current = document.querySelectorAll(`[data-uid="${componentUid}"]`);
99
+ const $storefront = document.body.querySelector('#storefront');
100
+ if ($storefront) {
101
+ targets.current = $storefront.querySelectorAll(`[data-uid="${componentUid}"]`);
102
+ }
100
103
  }
101
- const targetsArray = Array.from(targets.current);
104
+ const targetsArray = Array.from(targets.current || []);
102
105
  if (!targetsArray.length) return;
103
106
  const updatedTargetObjects = getUpdatedTargetObjects(targetsArray);
104
107
  targetObjects.current = updatedTargetObjects;
package/dist/esm/hooks/useToolbarPostPurchase.js CHANGED
@@ -29,7 +29,7 @@ const usePostPurchase = (uid, tag)=>{
29
29
  return count <= 1;
30
30
  };
31
31
  const verifyWrapContainsRequireElement = ()=>{
32
- const $component = document.querySelector(`[data-uid="${uid}"]`);
32
+ const $component = document.body.querySelector('#storefront')?.querySelector(`[data-uid="${uid}"]`);
33
33
  if (!$component) return false;
34
34
  for (const requiredElementTag of postPurchaseRequiredElements){
35
35
  const countElementInsidePage = getElementCountInPage(requiredElementTag);
@@ -42,7 +42,7 @@ const usePostPurchase = (uid, tag)=>{
42
42
  };
43
43
  const countRequiredElement = ()=>{
44
44
  return postPurchaseRequiredElements.reduce((acc, requiredElementTag)=>{
45
- const $component = document.querySelector(`[data-uid="${uid}"]`);
45
+ const $component = document.body.querySelector('#storefront')?.querySelector(`[data-uid="${uid}"]`);
46
46
  if (!$component) return 0;
47
47
  const count = $component.querySelectorAll(`[data-component-tag="${requiredElementTag}"]`).length;
48
48
  return acc + count;
package/dist/types/index.d.ts CHANGED
@@ -31868,6 +31868,7 @@ type Options = {
31868
31868
  liquid?: boolean;
31869
31869
  ignoreBgAttachment?: boolean;
31870
31870
  ignoreBackgroundImage?: boolean;
31871
+ ignoreBackgroundImageProperties?: boolean;
31871
31872
  ignoreBackgroundColor?: boolean;
31872
31873
  };
31873
31874
  declare const getStyleBackgroundByDevice: (background?: ObjectDevices<Background>, options?: Options) => {
@@ -41532,9 +41533,10 @@ declare const getAppBlocks: (section: PublishedPageSection$1 & {
41532
41533
  declare const addAppBlockId: (component: Component) => Component;
41533
41534
 
41534
41535
  declare const useInteraction: () => {
41535
- onListener: ({ event, selector }: {
41536
+ onListener: ({ event, selector, elementRef }: {
41536
41537
  event: string;
41537
41538
  selector: string;
41539
+ elementRef?: React.MutableRefObject<HTMLElement> | undefined;
41538
41540
  }, callback: (data: any) => void) => void;
41539
41541
  trigger: ({ event, data, selector, element: elementParam, }: {
41540
41542
  event: string;
@@ -41544,7 +41546,7 @@ declare const useInteraction: () => {
41544
41546
  }) => void;
41545
41547
  saveToElementInteractionData: (element: HTMLElement, key: string, value: string) => void;
41546
41548
  closeSelectOnPage: () => void;
41547
- ref: React.MutableRefObject<null>;
41549
+ ref: React.MutableRefObject<any>;
41548
41550
  findElementIncludingSelf: (element: any, selector: string) => any;
41549
41551
  getInteractionPreviousData: (element: HTMLElement, key: string) => {
41550
41552
  previousData: any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.56.0-staging.13",
3
+ "version": "1.56.0-staging.18",
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.56.0-staging.0",
31
- "@gem-sdk/styles": "1.56.0-staging.13",
31
+ "@gem-sdk/styles": "1.56.0-staging.16",
32
32
  "@types/classnames": "^2.3.1"
33
33
  },
34
34
  "dependencies": {