@shoper/phoenix_design_system 1.18.11-12 → 1.18.11-14

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 +20 -19
  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 -3
  4. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +20 -19
  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
@@ -17,45 +17,45 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
17
17
  super();
18
18
  this.transitionName = 'accordion-toggle';
19
19
  this._resizeObserver = null;
20
- 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
- }
20
+ this._isTransitioning = false;
21
+ this._handleResizeObserver = () => {
22
+ if (this._isTransitioning)
23
+ return;
24
+ if (this.hidden || this.style.height === '0px')
25
+ return;
26
+ this._cacheScrollHeight();
26
27
  };
27
- this._setStylingOptions = () => {
28
+ this._measureOriginalHeight = () => {
28
29
  const previousDisplay = this.style.display;
29
30
  this.style.setProperty('display', 'block', 'important');
30
- this.style.height = 'auto';
31
- // Single RAF is sufficient - browser will measure on next frame
32
- requestAnimationFrame(() => {
33
- this._setOriginalHeightValue();
34
- this.style.display = previousDisplay;
35
- this.style.height = this.hidden ? '0px' : this._originalHeight;
36
- });
31
+ this._cacheScrollHeight();
32
+ this.style.display = previousDisplay;
37
33
  };
38
- this._setOriginalHeightValue = () => {
39
- const newHeight = this.getBoundingClientRect().height;
34
+ this._cacheScrollHeight = () => {
35
+ const newHeight = this.scrollHeight;
40
36
  if (newHeight !== 0 || this.children.length === 0) {
41
37
  this._originalHeight = `${newHeight}px`;
42
38
  }
43
39
  };
44
40
  this._expand = () => {
41
+ this._cacheScrollHeight();
42
+ this._isTransitioning = true;
45
43
  this._setHeight(this._originalHeight);
46
44
  };
47
45
  this._handleTransitionEnd = (e) => {
48
46
  if (e.propertyName !== 'height' || e.target !== this) {
49
47
  return;
50
48
  }
49
+ this._isTransitioning = false;
51
50
  if (!this.hidden && this.style.height !== '0px') {
52
51
  this.style.height = 'auto';
53
52
  }
54
53
  };
55
54
  this._collapse = () => {
55
+ this._isTransitioning = true;
56
56
  const currentHeight = this.getBoundingClientRect().height;
57
57
  this._setHeight(`${currentHeight}px`);
58
- // Single RAF is sufficient - browser will paint the current height before transitioning to 0
58
+ void this.offsetHeight;
59
59
  requestAnimationFrame(() => {
60
60
  this._setHeight('0px');
61
61
  });
@@ -68,13 +68,14 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
68
68
  this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
69
69
  this._transitionController = new transition_controller.TransitionController(this, this.transitionName);
70
70
  this._subscribeObserver();
71
- this._resizeObserver = new ResizeObserver(this._handleResize);
71
+ this._resizeObserver = new ResizeObserver(this._handleResizeObserver);
72
72
  this._resizeObserver.observe(this);
73
73
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
74
74
  }
75
75
  firstUpdated(props) {
76
76
  super.firstUpdated(props);
77
- this._setStylingOptions();
77
+ this._measureOriginalHeight();
78
+ this.style.height = this.hidden ? '0px' : this._originalHeight;
78
79
  }
79
80
  async _subscribeObserver() {
80
81
  this._accordionGroupProps = await this._contextConsumer.consumeAsync(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps);
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;"}
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts CHANGED
@@ -8,14 +8,15 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
8
8
  private _accordionGroupPropsObserver;
9
9
  private _originalHeight;
10
10
  private _resizeObserver;
11
+ private _isTransitioning;
11
12
  private _boundHandleTransitionEnd;
12
13
  constructor();
13
14
  connectedCallback(): void;
14
15
  firstUpdated(props: PropertyValues): void;
15
- private _handleResize;
16
- private _setStylingOptions;
16
+ private _handleResizeObserver;
17
+ private _measureOriginalHeight;
18
+ private _cacheScrollHeight;
17
19
  private _subscribeObserver;
18
- private _setOriginalHeightValue;
19
20
  private _expand;
20
21
  private _handleTransitionEnd;
21
22
  private _collapse;
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -13,45 +13,45 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
13
13
  super();
14
14
  this.transitionName = 'accordion-toggle';
15
15
  this._resizeObserver = null;
16
- 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
- }
16
+ this._isTransitioning = false;
17
+ this._handleResizeObserver = () => {
18
+ if (this._isTransitioning)
19
+ return;
20
+ if (this.hidden || this.style.height === '0px')
21
+ return;
22
+ this._cacheScrollHeight();
22
23
  };
23
- this._setStylingOptions = () => {
24
+ this._measureOriginalHeight = () => {
24
25
  const previousDisplay = this.style.display;
25
26
  this.style.setProperty('display', 'block', 'important');
26
- this.style.height = 'auto';
27
- // Single RAF is sufficient - browser will measure on next frame
28
- requestAnimationFrame(() => {
29
- this._setOriginalHeightValue();
30
- this.style.display = previousDisplay;
31
- this.style.height = this.hidden ? '0px' : this._originalHeight;
32
- });
27
+ this._cacheScrollHeight();
28
+ this.style.display = previousDisplay;
33
29
  };
34
- this._setOriginalHeightValue = () => {
35
- const newHeight = this.getBoundingClientRect().height;
30
+ this._cacheScrollHeight = () => {
31
+ const newHeight = this.scrollHeight;
36
32
  if (newHeight !== 0 || this.children.length === 0) {
37
33
  this._originalHeight = `${newHeight}px`;
38
34
  }
39
35
  };
40
36
  this._expand = () => {
37
+ this._cacheScrollHeight();
38
+ this._isTransitioning = true;
41
39
  this._setHeight(this._originalHeight);
42
40
  };
43
41
  this._handleTransitionEnd = (e) => {
44
42
  if (e.propertyName !== 'height' || e.target !== this) {
45
43
  return;
46
44
  }
45
+ this._isTransitioning = false;
47
46
  if (!this.hidden && this.style.height !== '0px') {
48
47
  this.style.height = 'auto';
49
48
  }
50
49
  };
51
50
  this._collapse = () => {
51
+ this._isTransitioning = true;
52
52
  const currentHeight = this.getBoundingClientRect().height;
53
53
  this._setHeight(`${currentHeight}px`);
54
- // Single RAF is sufficient - browser will paint the current height before transitioning to 0
54
+ void this.offsetHeight;
55
55
  requestAnimationFrame(() => {
56
56
  this._setHeight('0px');
57
57
  });
@@ -64,13 +64,14 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
64
64
  this._contextConsumer = new ContextConsumerController(this);
65
65
  this._transitionController = new TransitionController(this, this.transitionName);
66
66
  this._subscribeObserver();
67
- this._resizeObserver = new ResizeObserver(this._handleResize);
67
+ this._resizeObserver = new ResizeObserver(this._handleResizeObserver);
68
68
  this._resizeObserver.observe(this);
69
69
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
70
70
  }
71
71
  firstUpdated(props) {
72
72
  super.firstUpdated(props);
73
- this._setStylingOptions();
73
+ this._measureOriginalHeight();
74
+ this.style.height = this.hidden ? '0px' : this._originalHeight;
74
75
  }
75
76
  async _subscribeObserver() {
76
77
  this._accordionGroupProps = await this._contextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionGroupProps);
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;"}
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-14",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",