@nectary/components 1.0.1 → 1.1.1

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 (4) hide show
  1. package/dialog/index.js +70 -42
  2. package/dialog/types.d.ts +14 -3
  3. package/package.json +1 -1
  4. package/pop/index.js +10 -8
package/dialog/index.js CHANGED
@@ -2,8 +2,9 @@ import '../icon-button';
2
2
  import '../icon';
3
3
  import '../stop-events';
4
4
  import '../title';
5
- import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, getCssVar } from '../utils';
6
- const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-text-m);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#close{transform:translate(4px,-4px)}</style><dialog><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon id="icon-close" slot="icon"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
5
+ import { disableScroll, enableScroll } from '../pop/utils';
6
+ import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, getCssVar, setClass } from '../utils';
7
+ const templateHTML = '<style>:host{display:contents}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-text-m);border:none;box-shadow:var(--sinch-elevation-level-3)}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{transform:translate(4px,-4px)}</style><dialog id="dialog"><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon id="icon-close" slot="icon"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
7
8
  const template = document.createElement('template');
8
9
  template.innerHTML = templateHTML;
9
10
  defineCustomElement('sinch-dialog', class extends NectaryElement {
@@ -11,33 +12,42 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
11
12
  #$dialog;
12
13
  #$closeButton;
13
14
  #$caption;
14
- #prevOverflowValue = '';
15
+ #$actionWrapper;
16
+ #$actionSlot;
17
+ #controller = null;
15
18
  constructor() {
16
19
  super();
17
20
  const shadowRoot = this.attachShadow();
18
21
  shadowRoot.appendChild(template.content.cloneNode(true));
19
- this.#$dialog = shadowRoot.querySelector('dialog');
22
+ this.#$dialog = shadowRoot.querySelector('#dialog');
20
23
  this.#$closeButton = shadowRoot.querySelector('#close');
21
24
  this.#$caption = shadowRoot.querySelector('#caption');
22
25
  this.#$iconClose = shadowRoot.querySelector('#icon-close');
26
+ this.#$actionWrapper = shadowRoot.querySelector('#action');
27
+ this.#$actionSlot = shadowRoot.querySelector('slot[name="buttons"]');
23
28
  }
24
29
  connectedCallback() {
25
30
  super.connectedCallback();
26
31
  this.setAttribute('role', 'dialog');
27
- this.#$closeButton.addEventListener('click', this.#onCloseClick);
28
- this.#$dialog.addEventListener('mousedown', this.#onBackdropClick);
29
- this.#$dialog.addEventListener('cancel', this.#onCancel);
30
- this.addEventListener('-close', this.#onCloseReactHandler);
32
+ this.#controller = new AbortController();
33
+ const options = {
34
+ signal: this.#controller.signal
35
+ };
36
+ this.#$closeButton.addEventListener('click', this.#onCloseClick, options);
37
+ this.#$dialog.addEventListener('mousedown', this.#onBackdropMouseDown, options);
38
+ this.#$dialog.addEventListener('cancel', this.#onCancel, options);
39
+ this.#$actionSlot.addEventListener('slotchange', this.#onActionSlotChange, options);
40
+ this.addEventListener('-close', this.#onCloseReactHandler, options);
31
41
  updateAttribute(this.#$iconClose, 'name', getCssVar(this, '--sinch-dialog-icon-close'));
32
- this.#setOpen(getBooleanAttribute(this, 'open'));
42
+ this.#onActionSlotChange();
43
+ if (getBooleanAttribute(this, 'open')) {
44
+ this.#onExpand();
45
+ }
33
46
  }
34
47
  disconnectedCallback() {
35
48
  super.disconnectedCallback();
36
- this.#$closeButton.removeEventListener('click', this.#onCloseClick);
37
- this.#$dialog.removeEventListener('mousedown', this.#onBackdropClick);
38
- this.#$dialog.removeEventListener('cancel', this.#onCancel);
39
- this.removeEventListener('-close', this.#onCloseReactHandler);
40
- this.#setOpen(false);
49
+ this.#controller.abort();
50
+ this.#onCollapse();
41
51
  }
42
52
  static get observedAttributes() {
43
53
  return ['caption', 'open', 'close-aria-label'];
@@ -52,7 +62,13 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
52
62
  case 'open':
53
63
  {
54
64
  const shouldOpen = isAttrTrue(newVal);
55
- this.#setOpen(shouldOpen);
65
+ if (shouldOpen) {
66
+ requestAnimationFrame(() => {
67
+ this.#onExpand();
68
+ });
69
+ } else {
70
+ this.#onCollapse();
71
+ }
56
72
  updateBooleanAttribute(this, 'open', shouldOpen);
57
73
  break;
58
74
  }
@@ -69,46 +85,58 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
69
85
  get caption() {
70
86
  return getAttribute(this, 'caption', '');
71
87
  }
88
+ get dialogRect() {
89
+ return getRect(this.#$dialog);
90
+ }
91
+ get closeButtonRect() {
92
+ return getRect(this.#$closeButton);
93
+ }
72
94
  #onCancel = e => {
73
95
  e.preventDefault();
74
- this.#dispatchCloseEvent();
96
+ e.stopPropagation();
97
+ this.#dispatchCloseEvent('escape');
75
98
  };
76
99
  #onCloseClick = () => {
77
- this.#dispatchCloseEvent();
100
+ this.#dispatchCloseEvent('close');
78
101
  };
79
- #onBackdropClick = e => {
80
- if (e.target !== this.#$dialog) {
81
- return;
82
- }
83
- const rect = this.dialogRect;
84
- const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
85
- if (!isInside) {
86
- this.#dispatchCloseEvent();
102
+ #onBackdropMouseDown = e => {
103
+ const tgt = e.originalTarget ?? e.target;
104
+ if (tgt === this.#$dialog) {
105
+ const rect = this.dialogRect;
106
+ const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
107
+ if (!isInside) {
108
+ e.stopPropagation();
109
+ this.#dispatchCloseEvent('backdrop');
110
+ }
87
111
  }
88
112
  };
89
113
  #onCloseReactHandler = e => {
90
- getReactEventHandler(this, 'onClose')?.();
114
+ getReactEventHandler(this, 'onClose')?.(e);
91
115
  getReactEventHandler(this, 'on-close')?.(e);
92
116
  };
93
- #dispatchCloseEvent() {
94
- this.dispatchEvent(new CustomEvent('-close'));
117
+ #dispatchCloseEvent(detail) {
118
+ this.dispatchEvent(new CustomEvent('-close', {
119
+ detail
120
+ }));
95
121
  }
96
- #setOpen(shouldOpen) {
97
- if (shouldOpen) {
98
- if (this.isConnected && !getBooleanAttribute(this.#$dialog, 'open')) {
99
- this.#prevOverflowValue = document.body.style.overflow;
100
- document.body.style.overflow = 'hidden';
101
- this.#$dialog.showModal();
102
- }
103
- } else {
104
- this.#$dialog.close?.();
105
- document.body.style.overflow = this.#prevOverflowValue;
122
+ #onExpand() {
123
+ if (!this.isConnected || this.#isOpen()) {
124
+ return;
106
125
  }
126
+ this.#$dialog.showModal();
127
+ disableScroll();
107
128
  }
108
- get dialogRect() {
109
- return getRect(this.#$dialog);
129
+ #onCollapse() {
130
+ if (!this.#isOpen()) {
131
+ return;
132
+ }
133
+ this.#$dialog.close?.();
134
+ enableScroll();
110
135
  }
111
- get closeButtonRect() {
112
- return getRect(this.#$closeButton);
136
+ #isOpen() {
137
+ return getBooleanAttribute(this.#$dialog, 'open');
113
138
  }
139
+ #onActionSlotChange = () => {
140
+ setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
141
+ };
114
142
  });
package/dialog/types.d.ts CHANGED
@@ -1,17 +1,28 @@
1
1
  import type { TRect, TSinchElementReact } from '../types';
2
+ export type TSinchDialogCloseDetail = 'close' | 'escape' | 'backdrop';
2
3
  export type TSinchDialogElement = HTMLElement & {
4
+ /** Dialog caption */
3
5
  caption: string;
4
6
  readonly dialogRect: TRect;
5
7
  readonly closeButtonRect: TRect;
6
- addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
8
+ /** close event handler */
9
+ addEventListener(type: '-close', listener: (e: CustomEvent<TSinchDialogCloseDetail>) => void): void;
10
+ /** Dialog caption */
7
11
  setAttribute(name: 'caption', value: string): void;
12
+ /** Close button label that is used for a11y */
8
13
  setAttribute(name: 'close-aria-label', value: string): void;
9
14
  };
10
15
  export type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
16
+ /** Controls whether the dialog should be open */
11
17
  open: boolean;
18
+ /** Dialog caption */
12
19
  caption: string;
20
+ /** Label that is used for a11y */
13
21
  'aria-label': string;
22
+ /** Close button label that is used for a11y */
14
23
  'close-aria-label': string;
15
- onClose?: () => void;
16
- 'on-close'?: (e: CustomEvent<void>) => void;
24
+ /** @deprecated close event handler */
25
+ onClose?: (e: CustomEvent<TSinchDialogCloseDetail>) => void;
26
+ /** close event handler */
27
+ 'on-close'?: (e: CustomEvent<TSinchDialogCloseDetail>) => void;
17
28
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nectary/components",
3
- "version": "1.0.1",
3
+ "version": "1.1.1",
4
4
  "files": [
5
5
  "**/*/*.css",
6
6
  "**/*/*.json",
package/pop/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, subscribeContext } from '../utils';
2
- const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" aria-haspopup="dialog" aria-expanded="false" name="target"></slot><div id="focus" tabindex="-1"></div><dialog id="dialog"><div id="content"><slot name="content"></slot></div><div id="target-open"><slot name="target-open"></slot></div></dialog>';
2
+ const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus" tabindex="-1"></div><dialog id="dialog"><div id="content"><slot name="content"></slot></div><div id="target-open"><slot name="target-open"></slot></div></dialog>';
3
3
  import { assertOrientation, disableScroll, enableScroll, orientationValues } from './utils';
4
4
  const template = document.createElement('template');
5
5
  template.innerHTML = templateHTML;
@@ -299,17 +299,19 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
299
299
  }
300
300
  };
301
301
  #onBackdropMouseDown = e => {
302
- if (e.target !== this.#$dialog) {
303
- return;
304
- }
305
- const rect = this.popoverRect;
306
- const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
307
- if (!isInside) {
308
- this.#dispatchCloseEvent();
302
+ const tgt = e.originalTarget ?? e.target;
303
+ if (tgt === this.#$dialog) {
304
+ const rect = this.popoverRect;
305
+ const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
306
+ if (!isInside) {
307
+ e.stopPropagation();
308
+ this.#dispatchCloseEvent();
309
+ }
309
310
  }
310
311
  };
311
312
  #onCancel = e => {
312
313
  e.preventDefault();
314
+ e.stopPropagation();
313
315
  this.#dispatchCloseEvent();
314
316
  };
315
317
  #onCloseReactHandler = e => {