@shoper/phoenix_design_system 1.11.5 → 1.11.6

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/modal/modal.js +20 -0
  2. package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
  3. package/build/esm/packages/phoenix/src/components/modal/modal.d.ts +4 -0
  4. package/build/esm/packages/phoenix/src/components/modal/modal.js +20 -0
  5. package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
  6. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -27,6 +27,8 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
27
27
  this._firstFocusableElement = undefined;
28
28
  this._focusableElements = null;
29
29
  this._lastFocusableElement = undefined;
30
+ this.watchChildrenConnected = true;
31
+ this._focusedToggler = null;
30
32
  this._contentRef = ref_js.createRef();
31
33
  this._focusSentinelStart = ref_js.createRef();
32
34
  this._focusSentinelEnd = ref_js.createRef();
@@ -151,7 +153,21 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
151
153
  this._propsChangeStrategies[modal_constants.MODAL_OPENED_PROP][String(this[modal_constants.MODAL_OPENED_PROP])]();
152
154
  }
153
155
  }
156
+ allChildrenConnected() {
157
+ this._setFocusToFirstFocusableElementInModalOrCloseBtn();
158
+ }
159
+ _setFocusToFirstFocusableElementInModalOrCloseBtn() {
160
+ requestAnimationFrame(() => {
161
+ if (this._contentRef.value) {
162
+ const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
163
+ if (focusableElements.length > 0) {
164
+ focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
165
+ }
166
+ }
167
+ });
168
+ }
154
169
  async open() {
170
+ this._focusedToggler = document.activeElement;
155
171
  return new Promise((resolve) => {
156
172
  var _a;
157
173
  this[modal_constants.MODAL_OPENED_PROP] = true;
@@ -176,6 +192,10 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
176
192
  }
177
193
  _dispatchModalClosedEvent() {
178
194
  this.emitCustomEvent(modal_constants.MODAL_EVENTS.closed);
195
+ requestAnimationFrame(() => {
196
+ var _a;
197
+ (_a = this._focusedToggler) === null || _a === void 0 ? void 0 : _a.focus();
198
+ });
179
199
  this._backdropController.hide();
180
200
  }
181
201
  render() {
package/build/cjs/packages/phoenix/src/components/modal/modal.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/modal/modal.d.ts CHANGED
@@ -9,6 +9,8 @@ export declare class HModal extends PhoenixLightLitElement {
9
9
  _firstFocusableElement: HTMLElement | undefined;
10
10
  _focusableElements: HTMLElement[] | null;
11
11
  _lastFocusableElement: HTMLElement | undefined;
12
+ watchChildrenConnected: boolean;
13
+ private _focusedToggler;
12
14
  private _contentRef;
13
15
  private _focusSentinelStart;
14
16
  private _focusSentinelEnd;
@@ -22,6 +24,8 @@ export declare class HModal extends PhoenixLightLitElement {
22
24
  disconnectedCallback(): void;
23
25
  firstUpdated(props: PropertyValues): void;
24
26
  updated(changedProps: Map<string, any>): void;
27
+ allChildrenConnected(): void;
28
+ private _setFocusToFirstFocusableElementInModalOrCloseBtn;
25
29
  private _keepFocusWithinModal;
26
30
  private _handleCloseFromCloseComponent;
27
31
  private _bindCloseOnEsc;
package/build/esm/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -23,6 +23,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
23
23
  this._firstFocusableElement = undefined;
24
24
  this._focusableElements = null;
25
25
  this._lastFocusableElement = undefined;
26
+ this.watchChildrenConnected = true;
27
+ this._focusedToggler = null;
26
28
  this._contentRef = createRef();
27
29
  this._focusSentinelStart = createRef();
28
30
  this._focusSentinelEnd = createRef();
@@ -147,7 +149,21 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
147
149
  this._propsChangeStrategies[MODAL_OPENED_PROP][String(this[MODAL_OPENED_PROP])]();
148
150
  }
149
151
  }
152
+ allChildrenConnected() {
153
+ this._setFocusToFirstFocusableElementInModalOrCloseBtn();
154
+ }
155
+ _setFocusToFirstFocusableElementInModalOrCloseBtn() {
156
+ requestAnimationFrame(() => {
157
+ if (this._contentRef.value) {
158
+ const focusableElements = UiDomUtils.getFocusableElements(this._contentRef.value);
159
+ if (focusableElements.length > 0) {
160
+ focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
161
+ }
162
+ }
163
+ });
164
+ }
150
165
  async open() {
166
+ this._focusedToggler = document.activeElement;
151
167
  return new Promise((resolve) => {
152
168
  var _a;
153
169
  this[MODAL_OPENED_PROP] = true;
@@ -172,6 +188,10 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
172
188
  }
173
189
  _dispatchModalClosedEvent() {
174
190
  this.emitCustomEvent(MODAL_EVENTS.closed);
191
+ requestAnimationFrame(() => {
192
+ var _a;
193
+ (_a = this._focusedToggler) === null || _a === void 0 ? void 0 : _a.focus();
194
+ });
175
195
  this._backdropController.hide();
176
196
  }
177
197
  render() {
package/build/esm/packages/phoenix/src/components/modal/modal.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.11.5",
5
+ "version": "1.11.6",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",