@gem-sdk/pages 1.23.0-staging.153 → 1.23.0-staging.154

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.
@@ -40,7 +40,7 @@ const Toolbar = ()=>{
40
40
  }
41
41
  }
42
42
  };
43
- const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection })=>{
43
+ const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
44
44
  if (!$component && !componentUid) return;
45
45
  if (!$component) {
46
46
  const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -62,7 +62,9 @@ const Toolbar = ()=>{
62
62
  }
63
63
  if ($toolbar) {
64
64
  $toolbar.removeAttribute('style');
65
- $toolbar.setAttribute('data-toolbar-hover', 'true');
65
+ if (!isParent) {
66
+ $toolbar.setAttribute('data-toolbar-hover', 'true');
67
+ }
66
68
  if (focus) {
67
69
  $toolbar.setAttribute('data-toolbar-hover-focus', 'true');
68
70
  }
@@ -74,6 +76,9 @@ const Toolbar = ()=>{
74
76
  }
75
77
  if ($outline) {
76
78
  $outline.setAttribute('data-outline-hover', 'true');
79
+ if (isParent) {
80
+ $outline.setAttribute('data-outline-parent-hover', 'true');
81
+ }
77
82
  if (isThemeSection) {
78
83
  $outline.setAttribute('data-outline-overlay-theme-section', 'true');
79
84
  }
@@ -94,12 +99,13 @@ const Toolbar = ()=>{
94
99
  if (!$c) return;
95
100
  $component = $c;
96
101
  }
97
- const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])');
102
+ const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])', 1);
98
103
  if ($parents.length) {
99
104
  for (const $parent of $parents){
100
105
  if ($parent) {
101
106
  setHoverComponent({
102
- $component: $parent
107
+ $component: $parent,
108
+ isParent: true
103
109
  });
104
110
  }
105
111
  }
@@ -177,6 +183,7 @@ const Toolbar = ()=>{
177
183
  'data-toolbar-hover-inside',
178
184
  'data-outline-hover',
179
185
  'data-toolbar-add-hover',
186
+ 'data-outline-parent-hover',
180
187
  'data-toolbar-hover-overflow'
181
188
  ];
182
189
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
@@ -201,7 +208,7 @@ const Toolbar = ()=>{
201
208
  'data-toolbar-force-hover',
202
209
  'data-outline-force-hover',
203
210
  'data-column-force-visible',
204
- 'data-toolbar-active-overflow'
211
+ 'data-outline-parent-hover'
205
212
  ];
206
213
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
207
214
  if ($elms) {
@@ -250,7 +257,8 @@ const Toolbar = ()=>{
250
257
  }
251
258
  }
252
259
  }, []);
253
- const setActiveComponentForceHoverSection = react.useCallback(($component, value)=>{
260
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
261
+ react.useCallback(($component, value)=>{
254
262
  const $section = $component.closest('[data-toolbar-wrap][data-component-tag="Section"]');
255
263
  if ($section) {
256
264
  if (value) {
@@ -339,7 +347,6 @@ const Toolbar = ()=>{
339
347
  setActiveComponentSpacing({
340
348
  $component
341
349
  });
342
- setActiveComponentForceHoverSection($component, true);
343
350
  removeHoverComponent();
344
351
  // Reactive when component re-render
345
352
  watchComponentReRender($component, ()=>{
@@ -353,7 +360,6 @@ const Toolbar = ()=>{
353
360
  }, [
354
361
  removeActiveComponent,
355
362
  removeHoverComponent,
356
- setActiveComponentForceHoverSection,
357
363
  setActiveComponentSpacing
358
364
  ]);
359
365
  const setFocusTextEditor = async (value)=>{
@@ -36,7 +36,7 @@ const Toolbar = ()=>{
36
36
  }
37
37
  }
38
38
  };
39
- const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection })=>{
39
+ const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
40
40
  if (!$component && !componentUid) return;
41
41
  if (!$component) {
42
42
  const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -58,7 +58,9 @@ const Toolbar = ()=>{
58
58
  }
59
59
  if ($toolbar) {
60
60
  $toolbar.removeAttribute('style');
61
- $toolbar.setAttribute('data-toolbar-hover', 'true');
61
+ if (!isParent) {
62
+ $toolbar.setAttribute('data-toolbar-hover', 'true');
63
+ }
62
64
  if (focus) {
63
65
  $toolbar.setAttribute('data-toolbar-hover-focus', 'true');
64
66
  }
@@ -70,6 +72,9 @@ const Toolbar = ()=>{
70
72
  }
71
73
  if ($outline) {
72
74
  $outline.setAttribute('data-outline-hover', 'true');
75
+ if (isParent) {
76
+ $outline.setAttribute('data-outline-parent-hover', 'true');
77
+ }
73
78
  if (isThemeSection) {
74
79
  $outline.setAttribute('data-outline-overlay-theme-section', 'true');
75
80
  }
@@ -90,12 +95,13 @@ const Toolbar = ()=>{
90
95
  if (!$c) return;
91
96
  $component = $c;
92
97
  }
93
- const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])');
98
+ const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])', 1);
94
99
  if ($parents.length) {
95
100
  for (const $parent of $parents){
96
101
  if ($parent) {
97
102
  setHoverComponent({
98
- $component: $parent
103
+ $component: $parent,
104
+ isParent: true
99
105
  });
100
106
  }
101
107
  }
@@ -173,6 +179,7 @@ const Toolbar = ()=>{
173
179
  'data-toolbar-hover-inside',
174
180
  'data-outline-hover',
175
181
  'data-toolbar-add-hover',
182
+ 'data-outline-parent-hover',
176
183
  'data-toolbar-hover-overflow'
177
184
  ];
178
185
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
@@ -197,7 +204,7 @@ const Toolbar = ()=>{
197
204
  'data-toolbar-force-hover',
198
205
  'data-outline-force-hover',
199
206
  'data-column-force-visible',
200
- 'data-toolbar-active-overflow'
207
+ 'data-outline-parent-hover'
201
208
  ];
202
209
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
203
210
  if ($elms) {
@@ -246,7 +253,8 @@ const Toolbar = ()=>{
246
253
  }
247
254
  }
248
255
  }, []);
249
- const setActiveComponentForceHoverSection = useCallback(($component, value)=>{
256
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
257
+ useCallback(($component, value)=>{
250
258
  const $section = $component.closest('[data-toolbar-wrap][data-component-tag="Section"]');
251
259
  if ($section) {
252
260
  if (value) {
@@ -335,7 +343,6 @@ const Toolbar = ()=>{
335
343
  setActiveComponentSpacing({
336
344
  $component
337
345
  });
338
- setActiveComponentForceHoverSection($component, true);
339
346
  removeHoverComponent();
340
347
  // Reactive when component re-render
341
348
  watchComponentReRender($component, ()=>{
@@ -349,7 +356,6 @@ const Toolbar = ()=>{
349
356
  }, [
350
357
  removeActiveComponent,
351
358
  removeHoverComponent,
352
- setActiveComponentForceHoverSection,
353
359
  setActiveComponentSpacing
354
360
  ]);
355
361
  const setFocusTextEditor = async (value)=>{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.23.0-staging.153",
3
+ "version": "1.23.0-staging.154",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
25
25
  "next-seo": "^6.0.0"
26
26
  },
27
27
  "devDependencies": {
28
- "@gem-sdk/core": "1.23.0-staging.147",
28
+ "@gem-sdk/core": "1.23.0-staging.154",
29
29
  "@gem-sdk/plugin-cookie-bar": "1.23.0-staging.26",
30
30
  "@gem-sdk/plugin-quick-view": "1.23.0-staging.26",
31
31
  "@gem-sdk/plugin-sticky-add-to-cart": "1.23.0-staging.26"