@gem-sdk/components 2.1.13-staging.8 → 2.1.13-staging.9

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 (5) hide show
  1. package/dist/cjs/banner/components/hero-banner/index.liquid.js +7 -5
  2. package/dist/cjs/tab/hooks/useTabInteraction.js +13 -9
  3. package/dist/esm/banner/components/hero-banner/index.liquid.js +7 -5
  4. package/dist/esm/tab/hooks/useTabInteraction.js +14 -10
  5. package/package.json +1 -1
package/dist/cjs/banner/components/hero-banner/index.liquid.js CHANGED
@@ -134,6 +134,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
134
134
  tablet: helpers$1.createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),
135
135
  mobile: helpers$1.createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
136
136
  };
137
+ const enableLazyLoad = !setting?.preload && enableLazyLoadImage;
137
138
  const renderInnerHeroBanner = ()=>{
138
139
  return core.template /* liquid */ `
139
140
  <div
@@ -197,9 +198,10 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
197
198
  'clip-path': index.getClipPath(borderBg?.width, cornerBg)
198
199
  }}"
199
200
  >
200
- <div class="${core.cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
201
+ <div class="${core.cls('hero-banner-bg-parallax gp-hero-banner-image-background', {
201
202
  'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
202
- 'gp-transition-transform': hoverEffect
203
+ 'gp-transition-transform': hoverEffect,
204
+ gp_lazybg: enableLazyLoad
203
205
  })}"
204
206
  style="${{
205
207
  ...core.getStyleBackgroundByDevice(background, {
@@ -208,9 +210,9 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
208
210
  liquid: true
209
211
  }),
210
212
  ...core.makeStyleResponsive('bgi', {
211
- desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyLoadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
212
- tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyLoadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
213
- mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyLoadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
213
+ desktop: `url('${bgiEnableByDevice['desktop'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
214
+ tablet: `url('${bgiEnableByDevice['tablet'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
215
+ mobile: `url('${bgiEnableByDevice['mobile'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
214
216
  }),
215
217
  '--duration': `${hoverEffectDuration ?? 0}s`,
216
218
  '--scale': hoverEffectScale ?? 1,
package/dist/cjs/tab/hooks/useTabInteraction.js CHANGED
@@ -4,19 +4,18 @@ var core = require('@gem-sdk/core');
4
4
  var React = require('react');
5
5
 
6
6
  const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
7
- const [previousTab, setPreviousTab] = React.useState(activeKey || 1);
8
- const { trigger, onListener, interactionListenerLoaded } = core.useInteraction();
7
+ const { trigger, onListener, interactionListenerLoaded, saveToElementInteractionData, findElementIncludingSelf } = core.useInteraction();
9
8
  const mode = core.useEditorMode();
10
9
  const changeOpenTabInteraction = (params)=>{
11
- const { data, isRollback } = params || {};
12
- if (data === undefined && isRollback === undefined) return;
10
+ const { data, isRollback, element, key } = params || {};
11
+ if (data === undefined && isRollback) return;
12
+ const newData = Number(data) + 1;
13
13
  if (isRollback) {
14
- setActiveKey(previousTab);
15
- setPreviousTab(activeTab);
14
+ setActiveKey(newData);
16
15
  return;
17
16
  }
18
- setPreviousTab(activeTab);
19
- setActiveKey(data + 1);
17
+ saveToElementInteractionData(element, key, String(activeKey));
18
+ setActiveKey(newData);
20
19
  };
21
20
  const dispatchEventTabActive = (index)=>{
22
21
  trigger({
@@ -37,11 +36,16 @@ const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, c
37
36
  dispatchEventTabActive(activeTab - 1);
38
37
  });
39
38
  const selector = `[data-id="${componentUid}"]`;
39
+ const element = findElementIncludingSelf(document, selector);
40
40
  const removeListener = onListener({
41
41
  event: 'gp:change-open-tab',
42
42
  selector
43
43
  }, (params)=>{
44
- changeOpenTabInteraction(params);
44
+ changeOpenTabInteraction({
45
+ ...params,
46
+ element,
47
+ key: params?.uniqueStorageKey
48
+ });
45
49
  });
46
50
  return ()=>{
47
51
  removeListener?.();
package/dist/esm/banner/components/hero-banner/index.liquid.js CHANGED
@@ -130,6 +130,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
130
130
  tablet: createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),
131
131
  mobile: createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
132
132
  };
133
+ const enableLazyLoad = !setting?.preload && enableLazyLoadImage;
133
134
  const renderInnerHeroBanner = ()=>{
134
135
  return template /* liquid */ `
135
136
  <div
@@ -193,9 +194,10 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
193
194
  'clip-path': getClipPath(borderBg?.width, cornerBg)
194
195
  }}"
195
196
  >
196
- <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
197
+ <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background', {
197
198
  'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
198
- 'gp-transition-transform': hoverEffect
199
+ 'gp-transition-transform': hoverEffect,
200
+ gp_lazybg: enableLazyLoad
199
201
  })}"
200
202
  style="${{
201
203
  ...getStyleBackgroundByDevice(background, {
@@ -204,9 +206,9 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
204
206
  liquid: true
205
207
  }),
206
208
  ...makeStyleResponsive('bgi', {
207
- desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyLoadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
208
- tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyLoadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
209
- mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyLoadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
209
+ desktop: `url('${bgiEnableByDevice['desktop'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
210
+ tablet: `url('${bgiEnableByDevice['tablet'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
211
+ mobile: `url('${bgiEnableByDevice['mobile'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
210
212
  }),
211
213
  '--duration': `${hoverEffectDuration ?? 0}s`,
212
214
  '--scale': hoverEffectScale ?? 1,
package/dist/esm/tab/hooks/useTabInteraction.js CHANGED
@@ -1,20 +1,19 @@
1
1
  import { useInteraction, useEditorMode } from '@gem-sdk/core';
2
- import { useState, useEffect } from 'react';
2
+ import { useEffect } from 'react';
3
3
 
4
4
  const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
5
- const [previousTab, setPreviousTab] = useState(activeKey || 1);
6
- const { trigger, onListener, interactionListenerLoaded } = useInteraction();
5
+ const { trigger, onListener, interactionListenerLoaded, saveToElementInteractionData, findElementIncludingSelf } = useInteraction();
7
6
  const mode = useEditorMode();
8
7
  const changeOpenTabInteraction = (params)=>{
9
- const { data, isRollback } = params || {};
10
- if (data === undefined && isRollback === undefined) return;
8
+ const { data, isRollback, element, key } = params || {};
9
+ if (data === undefined && isRollback) return;
10
+ const newData = Number(data) + 1;
11
11
  if (isRollback) {
12
- setActiveKey(previousTab);
13
- setPreviousTab(activeTab);
12
+ setActiveKey(newData);
14
13
  return;
15
14
  }
16
- setPreviousTab(activeTab);
17
- setActiveKey(data + 1);
15
+ saveToElementInteractionData(element, key, String(activeKey));
16
+ setActiveKey(newData);
18
17
  };
19
18
  const dispatchEventTabActive = (index)=>{
20
19
  trigger({
@@ -35,11 +34,16 @@ const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, c
35
34
  dispatchEventTabActive(activeTab - 1);
36
35
  });
37
36
  const selector = `[data-id="${componentUid}"]`;
37
+ const element = findElementIncludingSelf(document, selector);
38
38
  const removeListener = onListener({
39
39
  event: 'gp:change-open-tab',
40
40
  selector
41
41
  }, (params)=>{
42
- changeOpenTabInteraction(params);
42
+ changeOpenTabInteraction({
43
+ ...params,
44
+ element,
45
+ key: params?.uniqueStorageKey
46
+ });
43
47
  });
44
48
  return ()=>{
45
49
  removeListener?.();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "2.1.13-staging.8",
3
+ "version": "2.1.13-staging.9",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",