@shoper/phoenix_design_system 1.18.11-13 → 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 +24 -54
  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 +5 -7
  4. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +24 -54
  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,72 +12,49 @@ 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;
17
15
  exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
18
16
  constructor() {
19
17
  super();
20
18
  this.transitionName = 'accordion-toggle';
21
- this._resizeDebounceTimer = null;
22
- this._mutationDebounceTimer = null;
23
- this._mutationObserver = null;
24
- this._handleResize = () => {
25
- if (this._resizeDebounceTimer !== null) {
26
- window.cancelAnimationFrame(this._resizeDebounceTimer);
27
- }
28
- this._resizeDebounceTimer = window.requestAnimationFrame(() => {
29
- setTimeout(() => {
30
- this._setStylingOptions();
31
- }, RESIZE_DEBOUNCE_MS);
32
- });
33
- };
34
- this._setStylingOptions = () => {
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
41
- this._setOriginalHeightValue();
42
- this.style.display = previousDisplay;
43
- this.style.height = this.hidden ? '0px' : this._originalHeight;
44
- });
19
+ this._resizeObserver = null;
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();
45
27
  };
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);
28
+ this._measureOriginalHeight = () => {
29
+ const previousDisplay = this.style.display;
30
+ this.style.setProperty('display', 'block', 'important');
31
+ this._cacheScrollHeight();
32
+ this.style.display = previousDisplay;
58
33
  };
59
- this._setOriginalHeightValue = () => {
60
- const newHeight = this.getBoundingClientRect().height;
34
+ this._cacheScrollHeight = () => {
35
+ const newHeight = this.scrollHeight;
61
36
  if (newHeight !== 0 || this.children.length === 0) {
62
37
  this._originalHeight = `${newHeight}px`;
63
38
  }
64
39
  };
65
40
  this._expand = () => {
41
+ this._cacheScrollHeight();
42
+ this._isTransitioning = true;
66
43
  this._setHeight(this._originalHeight);
67
44
  };
68
45
  this._handleTransitionEnd = (e) => {
69
46
  if (e.propertyName !== 'height' || e.target !== this) {
70
47
  return;
71
48
  }
49
+ this._isTransitioning = false;
72
50
  if (!this.hidden && this.style.height !== '0px') {
73
51
  this.style.height = 'auto';
74
52
  }
75
53
  };
76
54
  this._collapse = () => {
55
+ this._isTransitioning = true;
77
56
  const currentHeight = this.getBoundingClientRect().height;
78
57
  this._setHeight(`${currentHeight}px`);
79
- // Force reflow to commit the explicit height as transition start point,
80
- // replacing the need for a double requestAnimationFrame
81
58
  void this.offsetHeight;
82
59
  requestAnimationFrame(() => {
83
60
  this._setHeight('0px');
@@ -91,12 +68,14 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
91
68
  this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
92
69
  this._transitionController = new transition_controller.TransitionController(this, this.transitionName);
93
70
  this._subscribeObserver();
94
- window.addEventListener('resize', this._handleResize, { passive: true });
71
+ this._resizeObserver = new ResizeObserver(this._handleResizeObserver);
72
+ this._resizeObserver.observe(this);
95
73
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
96
74
  }
97
75
  firstUpdated(props) {
98
76
  super.firstUpdated(props);
99
- this._setStylingOptions();
77
+ this._measureOriginalHeight();
78
+ this.style.height = this.hidden ? '0px' : this._originalHeight;
100
79
  }
101
80
  async _subscribeObserver() {
102
81
  this._accordionGroupProps = await this._contextConsumer.consumeAsync(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps);
@@ -105,8 +84,6 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
105
84
  accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
106
85
  });
107
86
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
108
- this._mutationObserver = new MutationObserver(this._handleMutation);
109
- this._mutationObserver.observe(this, { childList: true, subtree: true });
110
87
  }
111
88
  _setHeight(height) {
112
89
  this.style.height = height;
@@ -119,15 +96,8 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
119
96
  var _a, _b;
120
97
  super.disconnectedCallback();
121
98
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
122
- (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
123
- window.removeEventListener('resize', this._handleResize);
99
+ (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
124
100
  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
- }
131
101
  }
132
102
  };
133
103
  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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -7,18 +7,16 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
7
7
  private _accordionGroupProps;
8
8
  private _accordionGroupPropsObserver;
9
9
  private _originalHeight;
10
- private _resizeDebounceTimer;
11
- private _mutationDebounceTimer;
12
- private _mutationObserver;
10
+ private _resizeObserver;
11
+ private _isTransitioning;
13
12
  private _boundHandleTransitionEnd;
14
13
  constructor();
15
14
  connectedCallback(): void;
16
15
  firstUpdated(props: PropertyValues): void;
17
- private _handleResize;
18
- private _setStylingOptions;
16
+ private _handleResizeObserver;
17
+ private _measureOriginalHeight;
18
+ private _cacheScrollHeight;
19
19
  private _subscribeObserver;
20
- private _handleMutation;
21
- private _setOriginalHeightValue;
22
20
  private _expand;
23
21
  private _handleTransitionEnd;
24
22
  private _collapse;
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -8,72 +8,49 @@ 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;
13
11
  let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
14
12
  constructor() {
15
13
  super();
16
14
  this.transitionName = 'accordion-toggle';
17
- this._resizeDebounceTimer = null;
18
- this._mutationDebounceTimer = null;
19
- this._mutationObserver = null;
20
- this._handleResize = () => {
21
- if (this._resizeDebounceTimer !== null) {
22
- window.cancelAnimationFrame(this._resizeDebounceTimer);
23
- }
24
- this._resizeDebounceTimer = window.requestAnimationFrame(() => {
25
- setTimeout(() => {
26
- this._setStylingOptions();
27
- }, RESIZE_DEBOUNCE_MS);
28
- });
29
- };
30
- this._setStylingOptions = () => {
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
37
- this._setOriginalHeightValue();
38
- this.style.display = previousDisplay;
39
- this.style.height = this.hidden ? '0px' : this._originalHeight;
40
- });
15
+ this._resizeObserver = null;
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();
41
23
  };
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);
24
+ this._measureOriginalHeight = () => {
25
+ const previousDisplay = this.style.display;
26
+ this.style.setProperty('display', 'block', 'important');
27
+ this._cacheScrollHeight();
28
+ this.style.display = previousDisplay;
54
29
  };
55
- this._setOriginalHeightValue = () => {
56
- const newHeight = this.getBoundingClientRect().height;
30
+ this._cacheScrollHeight = () => {
31
+ const newHeight = this.scrollHeight;
57
32
  if (newHeight !== 0 || this.children.length === 0) {
58
33
  this._originalHeight = `${newHeight}px`;
59
34
  }
60
35
  };
61
36
  this._expand = () => {
37
+ this._cacheScrollHeight();
38
+ this._isTransitioning = true;
62
39
  this._setHeight(this._originalHeight);
63
40
  };
64
41
  this._handleTransitionEnd = (e) => {
65
42
  if (e.propertyName !== 'height' || e.target !== this) {
66
43
  return;
67
44
  }
45
+ this._isTransitioning = false;
68
46
  if (!this.hidden && this.style.height !== '0px') {
69
47
  this.style.height = 'auto';
70
48
  }
71
49
  };
72
50
  this._collapse = () => {
51
+ this._isTransitioning = true;
73
52
  const currentHeight = this.getBoundingClientRect().height;
74
53
  this._setHeight(`${currentHeight}px`);
75
- // Force reflow to commit the explicit height as transition start point,
76
- // replacing the need for a double requestAnimationFrame
77
54
  void this.offsetHeight;
78
55
  requestAnimationFrame(() => {
79
56
  this._setHeight('0px');
@@ -87,12 +64,14 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
87
64
  this._contextConsumer = new ContextConsumerController(this);
88
65
  this._transitionController = new TransitionController(this, this.transitionName);
89
66
  this._subscribeObserver();
90
- window.addEventListener('resize', this._handleResize, { passive: true });
67
+ this._resizeObserver = new ResizeObserver(this._handleResizeObserver);
68
+ this._resizeObserver.observe(this);
91
69
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
92
70
  }
93
71
  firstUpdated(props) {
94
72
  super.firstUpdated(props);
95
- this._setStylingOptions();
73
+ this._measureOriginalHeight();
74
+ this.style.height = this.hidden ? '0px' : this._originalHeight;
96
75
  }
97
76
  async _subscribeObserver() {
98
77
  this._accordionGroupProps = await this._contextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionGroupProps);
@@ -101,8 +80,6 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
101
80
  accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
102
81
  });
103
82
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
104
- this._mutationObserver = new MutationObserver(this._handleMutation);
105
- this._mutationObserver.observe(this, { childList: true, subtree: true });
106
83
  }
107
84
  _setHeight(height) {
108
85
  this.style.height = height;
@@ -115,15 +92,8 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
115
92
  var _a, _b;
116
93
  super.disconnectedCallback();
117
94
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
118
- (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
119
- window.removeEventListener('resize', this._handleResize);
95
+ (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
120
96
  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
- }
127
97
  }
128
98
  };
129
99
  __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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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-13",
5
+ "version": "1.18.11-14",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",