@shoper/phoenix_design_system 1.18.11-12 → 1.18.11-13

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 (6) hide show
  1. package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js +44 -13
  2. package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js.map +1 -1
  3. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts +4 -1
  4. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +44 -13
  5. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js.map +1 -1
  6. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -12,29 +12,50 @@ var context_consumer_controller = require('../../core/context/context_consumer_c
12
12
  var accordion_constants = require('./accordion_constants.js');
13
13
  var transition_controller = require('../../controllers/transition_controller/transition_controller.js');
14
14
 
15
+ const RESIZE_DEBOUNCE_MS = 150;
16
+ const MUTATION_DEBOUNCE_MS = 100;
15
17
  exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
16
18
  constructor() {
17
19
  super();
18
20
  this.transitionName = 'accordion-toggle';
19
- this._resizeObserver = null;
21
+ this._resizeDebounceTimer = null;
22
+ this._mutationDebounceTimer = null;
23
+ this._mutationObserver = null;
20
24
  this._handleResize = () => {
21
- // ResizeObserver fires when content changes OR when the element's size changes
22
- // No manual debouncing needed - ResizeObserver handles this efficiently
23
- if (!this.hidden) {
24
- this._setStylingOptions();
25
+ if (this._resizeDebounceTimer !== null) {
26
+ window.cancelAnimationFrame(this._resizeDebounceTimer);
25
27
  }
28
+ this._resizeDebounceTimer = window.requestAnimationFrame(() => {
29
+ setTimeout(() => {
30
+ this._setStylingOptions();
31
+ }, RESIZE_DEBOUNCE_MS);
32
+ });
26
33
  };
27
34
  this._setStylingOptions = () => {
28
- const previousDisplay = this.style.display;
29
- this.style.setProperty('display', 'block', 'important');
30
- this.style.height = 'auto';
31
- // Single RAF is sufficient - browser will measure on next frame
32
35
  requestAnimationFrame(() => {
36
+ const previousDisplay = this.style.display;
37
+ this.style.setProperty('display', 'block', 'important');
38
+ this.style.height = 'auto';
39
+ // getBoundingClientRect forces synchronous reflow, allowing measurement
40
+ // in the same frame instead of requiring a second requestAnimationFrame
33
41
  this._setOriginalHeightValue();
34
42
  this.style.display = previousDisplay;
35
43
  this.style.height = this.hidden ? '0px' : this._originalHeight;
36
44
  });
37
45
  };
46
+ this._handleMutation = () => {
47
+ if (this._mutationDebounceTimer !== null) {
48
+ window.clearTimeout(this._mutationDebounceTimer);
49
+ }
50
+ this._mutationDebounceTimer = window.setTimeout(() => {
51
+ requestAnimationFrame(() => {
52
+ this.style.height = 'auto';
53
+ // Force reflow to measure accurately in the same frame
54
+ this._setOriginalHeightValue();
55
+ this.style.height = this.hidden ? '0px' : this._originalHeight;
56
+ });
57
+ }, MUTATION_DEBOUNCE_MS);
58
+ };
38
59
  this._setOriginalHeightValue = () => {
39
60
  const newHeight = this.getBoundingClientRect().height;
40
61
  if (newHeight !== 0 || this.children.length === 0) {
@@ -55,7 +76,9 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
55
76
  this._collapse = () => {
56
77
  const currentHeight = this.getBoundingClientRect().height;
57
78
  this._setHeight(`${currentHeight}px`);
58
- // Single RAF is sufficient - browser will paint the current height before transitioning to 0
79
+ // Force reflow to commit the explicit height as transition start point,
80
+ // replacing the need for a double requestAnimationFrame
81
+ void this.offsetHeight;
59
82
  requestAnimationFrame(() => {
60
83
  this._setHeight('0px');
61
84
  });
@@ -68,8 +91,7 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
68
91
  this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
69
92
  this._transitionController = new transition_controller.TransitionController(this, this.transitionName);
70
93
  this._subscribeObserver();
71
- this._resizeObserver = new ResizeObserver(this._handleResize);
72
- this._resizeObserver.observe(this);
94
+ window.addEventListener('resize', this._handleResize, { passive: true });
73
95
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
74
96
  }
75
97
  firstUpdated(props) {
@@ -83,6 +105,8 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
83
105
  accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
84
106
  });
85
107
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
108
+ this._mutationObserver = new MutationObserver(this._handleMutation);
109
+ this._mutationObserver.observe(this, { childList: true, subtree: true });
86
110
  }
87
111
  _setHeight(height) {
88
112
  this.style.height = height;
@@ -95,8 +119,15 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
95
119
  var _a, _b;
96
120
  super.disconnectedCallback();
97
121
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
98
- (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
122
+ (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
123
+ window.removeEventListener('resize', this._handleResize);
99
124
  this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
125
+ if (this._resizeDebounceTimer !== null) {
126
+ window.cancelAnimationFrame(this._resizeDebounceTimer);
127
+ }
128
+ if (this._mutationDebounceTimer !== null) {
129
+ window.clearTimeout(this._mutationDebounceTimer);
130
+ }
100
131
  }
101
132
  };
102
133
  tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts CHANGED
@@ -7,7 +7,9 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
7
7
  private _accordionGroupProps;
8
8
  private _accordionGroupPropsObserver;
9
9
  private _originalHeight;
10
- private _resizeObserver;
10
+ private _resizeDebounceTimer;
11
+ private _mutationDebounceTimer;
12
+ private _mutationObserver;
11
13
  private _boundHandleTransitionEnd;
12
14
  constructor();
13
15
  connectedCallback(): void;
@@ -15,6 +17,7 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
15
17
  private _handleResize;
16
18
  private _setStylingOptions;
17
19
  private _subscribeObserver;
20
+ private _handleMutation;
18
21
  private _setOriginalHeightValue;
19
22
  private _expand;
20
23
  private _handleTransitionEnd;
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -8,29 +8,50 @@ import { ContextConsumerController } from '../../core/context/context_consumer_c
8
8
  import { ACCORDION_CONTEXTS } from './accordion_constants.js';
9
9
  import { TransitionController } from '../../controllers/transition_controller/transition_controller.js';
10
10
 
11
+ const RESIZE_DEBOUNCE_MS = 150;
12
+ const MUTATION_DEBOUNCE_MS = 100;
11
13
  let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
12
14
  constructor() {
13
15
  super();
14
16
  this.transitionName = 'accordion-toggle';
15
- this._resizeObserver = null;
17
+ this._resizeDebounceTimer = null;
18
+ this._mutationDebounceTimer = null;
19
+ this._mutationObserver = null;
16
20
  this._handleResize = () => {
17
- // ResizeObserver fires when content changes OR when the element's size changes
18
- // No manual debouncing needed - ResizeObserver handles this efficiently
19
- if (!this.hidden) {
20
- this._setStylingOptions();
21
+ if (this._resizeDebounceTimer !== null) {
22
+ window.cancelAnimationFrame(this._resizeDebounceTimer);
21
23
  }
24
+ this._resizeDebounceTimer = window.requestAnimationFrame(() => {
25
+ setTimeout(() => {
26
+ this._setStylingOptions();
27
+ }, RESIZE_DEBOUNCE_MS);
28
+ });
22
29
  };
23
30
  this._setStylingOptions = () => {
24
- const previousDisplay = this.style.display;
25
- this.style.setProperty('display', 'block', 'important');
26
- this.style.height = 'auto';
27
- // Single RAF is sufficient - browser will measure on next frame
28
31
  requestAnimationFrame(() => {
32
+ const previousDisplay = this.style.display;
33
+ this.style.setProperty('display', 'block', 'important');
34
+ this.style.height = 'auto';
35
+ // getBoundingClientRect forces synchronous reflow, allowing measurement
36
+ // in the same frame instead of requiring a second requestAnimationFrame
29
37
  this._setOriginalHeightValue();
30
38
  this.style.display = previousDisplay;
31
39
  this.style.height = this.hidden ? '0px' : this._originalHeight;
32
40
  });
33
41
  };
42
+ this._handleMutation = () => {
43
+ if (this._mutationDebounceTimer !== null) {
44
+ window.clearTimeout(this._mutationDebounceTimer);
45
+ }
46
+ this._mutationDebounceTimer = window.setTimeout(() => {
47
+ requestAnimationFrame(() => {
48
+ this.style.height = 'auto';
49
+ // Force reflow to measure accurately in the same frame
50
+ this._setOriginalHeightValue();
51
+ this.style.height = this.hidden ? '0px' : this._originalHeight;
52
+ });
53
+ }, MUTATION_DEBOUNCE_MS);
54
+ };
34
55
  this._setOriginalHeightValue = () => {
35
56
  const newHeight = this.getBoundingClientRect().height;
36
57
  if (newHeight !== 0 || this.children.length === 0) {
@@ -51,7 +72,9 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
51
72
  this._collapse = () => {
52
73
  const currentHeight = this.getBoundingClientRect().height;
53
74
  this._setHeight(`${currentHeight}px`);
54
- // Single RAF is sufficient - browser will paint the current height before transitioning to 0
75
+ // Force reflow to commit the explicit height as transition start point,
76
+ // replacing the need for a double requestAnimationFrame
77
+ void this.offsetHeight;
55
78
  requestAnimationFrame(() => {
56
79
  this._setHeight('0px');
57
80
  });
@@ -64,8 +87,7 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
64
87
  this._contextConsumer = new ContextConsumerController(this);
65
88
  this._transitionController = new TransitionController(this, this.transitionName);
66
89
  this._subscribeObserver();
67
- this._resizeObserver = new ResizeObserver(this._handleResize);
68
- this._resizeObserver.observe(this);
90
+ window.addEventListener('resize', this._handleResize, { passive: true });
69
91
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
70
92
  }
71
93
  firstUpdated(props) {
@@ -79,6 +101,8 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
79
101
  accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
80
102
  });
81
103
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
104
+ this._mutationObserver = new MutationObserver(this._handleMutation);
105
+ this._mutationObserver.observe(this, { childList: true, subtree: true });
82
106
  }
83
107
  _setHeight(height) {
84
108
  this.style.height = height;
@@ -91,8 +115,15 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
91
115
  var _a, _b;
92
116
  super.disconnectedCallback();
93
117
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
94
- (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
118
+ (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
119
+ window.removeEventListener('resize', this._handleResize);
95
120
  this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
121
+ if (this._resizeDebounceTimer !== null) {
122
+ window.cancelAnimationFrame(this._resizeDebounceTimer);
123
+ }
124
+ if (this._mutationDebounceTimer !== null) {
125
+ window.clearTimeout(this._mutationDebounceTimer);
126
+ }
96
127
  }
97
128
  };
98
129
  __decorate([
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.18.11-12",
5
+ "version": "1.18.11-13",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",