@nanoporetech-digital/components 5.2.1 → 5.3.0

package/dist/collection/components/drawer/drawer.js

@@ -1,154 +1,223 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import Modal from '../../utils/modal';
 import { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';
-let id = 0;
+import { hasSlot } from '../../utils/slot';
+import { waitForEvent } from '../../utils/events';
+import { ComponentStore, } from '../../utils/store/component-store';
 /**
- * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24
- * @slot - The drawer's content.
- * @slot label - The dialog's label. Alternatively, you can use the label prop.
- * @slot footer - The drawer's footer, usually one or more buttons representing various options.
+ * Drawers slide in from a container to expose additional options and information.
+ *
+ * @slot - The drawer's main content
+ * @slot label - The drawer's label. Alternatively, you can use the `label` attribute
+ * @slot header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`
+ * @slot footer - The drawer's footer, usually one or more buttons representing various options
+ *
+ * @part base - The component's base wrapper
+ * @part overlay - The overlay that covers the screen behind the drawer
+ * @part panel - The drawer's panel (where the drawer and its content are rendered)
+ * @part header - The drawer's header. This element wraps the title and header actions
+ * @part header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`
+ * @part title - The drawer's title
+ * @part close-button - The close button, an `<nano-icon-button>`
+ * @part close-button__base - The close button's exported `base` part
+ * @part body - The drawer's body
+ * @part footer - The drawer's footer
  */
 export class Drawer {
   constructor() {
-    this.componentId = `drawer-${++id}`;
-    this.hasFooter = false;
-    this.isVisible = false;
+    this.handleDocumentKeyDown = (event) => {
+      // Contained drawers aren't modal and don't response to the escape key
+      if (this.contained) {
+        return;
+      }
+      if (event.key === 'Escape' && this.modal.isActive() && this.open) {
+        event.stopImmediatePropagation();
+        this.requestClose('keyboard');
+      }
+    };
+    this.handleTransitionEnd = (event) => {
+      if (event.propertyName === 'opacity' &&
+        event
+          .composedPath()
+          .find((node) => node === this.panel || node === this.overlay)) {
+        if (!this.open) {
+          this.drawer.hidden = true;
+          // Now that the dialog is hidden, restore the overlay and panel for next time
+          this.overlay.hidden = false;
+          this.panel.hidden = false;
+        }
+        this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();
+      }
+    };
+    this.handleSlotChange = () => {
+      this.hasFooter = hasSlot(this.host, 'footer');
+    };
+    this.noDismiss = false;
+    this.hasFooter = undefined;
     this.open = false;
-    this.label = '';
+    this.label = undefined;
     this.placement = 'end';
     this.contained = false;
     this.noHeader = false;
-    this.type = 'overlay';
-    this.contentSelector = undefined;
+    this.storeId = undefined;
+    this.storeMethod = 'url-hash';
+    this.noUserDismiss = false;
+    this.hoist = false;
   }
-  handleOpenChange() {
-    this.open ? this.show() : this.hide();
+  get panel() {
+    return this._panel;
   }
-  handleTypeChange() {
-    if (this.type !== 'push' && this.type !== 'reveal')
-      return;
-    if (!this.contentEle) {
-      this.type = 'overlay';
-      console.warn('a valid contentSelector must be set');
-      return;
+  set panel(ele) {
+    if (this._panel) {
+      this.panel.removeEventListener('animationend', this.handleTransitionEnd);
     }
+    if (!ele)
+      return;
+    ele.addEventListener('transitionend', this.handleTransitionEnd);
+    this._panel = ele;
   }
-  handleContentSelector() {
-    if (!this.contentSelector)
-      this.contentEle = null;
-    else
-      this.contentEle = this.host.ownerDocument.querySelector(this.contentSelector);
-  }
-  connectedCallback() {
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleOverlayClick = this.handleOverlayClick.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-    this.modal = new Modal(this.host);
+  handleHoistChange() {
+    if (!this.hoist || Array.from(document.body.children).includes(this.host))
+      return;
+    document.body.prepend(this.host);
   }
-  componentWillLoad() {
-    // Show on init if open
-    if (this.open) {
-      this.show();
-    }
-    this.handleContentSelector();
+  /** Shows the drawer. */
+  async show() {
+    if (this.open)
+      return undefined;
+    this.open = true;
+    return waitForEvent(this.host, 'nanoAfterShow');
   }
-  disconnectedCallback() {
-    unlockBodyScrolling(this.host);
+  /** Hides the drawer */
+  async hide() {
+    if (!this.open)
+      return undefined;
+    this.open = false;
+    return waitForEvent(this.host, 'nanoAfterHide');
   }
-  /** Shows the drawer */
-  async show() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible) {
+  requestClose(source) {
+    const nanoRequestClose = this.nanoRquestClose.emit({ source });
+    if (nanoRequestClose.defaultPrevented || this.noUserDismiss) {
+      this.noDismiss = true;
+      setTimeout(() => (this.noDismiss = false), 250);
       return;
     }
-    const nanoShow = this.nanoShow.emit();
-    if (nanoShow.defaultPrevented) {
-      this.open = false;
-      return;
-    }
-    this.isVisible = true;
-    this.open = true;
-    // Lock body scrolling only if the drawer isn't contained
-    if (!this.contained) {
+    this.hide();
+  }
+  // Prop Change Handlers
+  handleNoModalChange() {
+    if (this.open && !this.contained) {
       this.modal.activate();
       lockBodyScrolling(this.host);
     }
-    if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))
-      return;
-    this.contentEle.style.right = '0';
-    this.contentEle.style.transition = 'all ease 250ms';
-    this.contentEle.style.position = 'relative';
-    this.contentEle.style.overflow = 'hidden';
-    setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);
+    if (this.open && this.contained) {
+      this.modal.deactivate();
+      unlockBodyScrolling(this.host);
+    }
   }
-  /** Hides the drawer */
-  async hide() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible) {
+  async handleOpenChange() {
+    if (this.open) {
+      // Show
+      this.nanoShow.emit();
+      this.addOpenListeners();
+      this.originalTrigger = document.activeElement;
+      // Lock body scrolling only if the drawer isn't contained
+      if (!this.contained) {
+        this.modal.activate();
+        lockBodyScrolling(this.host);
+      }
+      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the
+      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`
+      // ourselves, and add the attribute back afterwards.
+      const autoFocusTarget = this.host.querySelector('[autofocus]');
+      if (autoFocusTarget) {
+        autoFocusTarget.removeAttribute('autofocus');
+      }
+      this.drawer.hidden = false;
+      // Set initial focus
+      requestAnimationFrame(() => {
+        const nanoInitialFocus = this.nanoInitialFocus.emit();
+        if (!nanoInitialFocus.defaultPrevented) {
+          // Set focus to the autofocus target and restore the attribute
+          if (autoFocusTarget) {
+            autoFocusTarget.focus({
+              preventScroll: true,
+            });
+          }
+          else {
+            this.panel.focus({ preventScroll: true });
+          }
+        }
+        // Restore the autofocus attribute
+        if (autoFocusTarget) {
+          autoFocusTarget.setAttribute('autofocus', '');
+        }
+      });
+      this.nanoAfterShow.emit();
       return;
     }
-    const nanoHide = this.nanoHide.emit();
-    if (nanoHide.defaultPrevented) {
-      this.open = true;
-      return;
+    // Hide
+    this.nanoHide.emit();
+    this.removeOpenListeners();
+    if (!this.contained) {
+      this.modal.deactivate();
+      unlockBodyScrolling(this.host);
+    }
+    // Restore focus to the original trigger
+    const trigger = this.originalTrigger;
+    if (typeof (trigger === null || trigger === void 0 ? void 0 : trigger.focus) === 'function') {
+      setTimeout(() => trigger.focus());
     }
-    this.open = false;
-    this.modal.deactivate();
-    unlockBodyScrolling(this.host);
-    if (!this.contentEle)
-      return;
-    this.contentEle.style.transition = '';
-    this.contentEle.style.position = '';
-    this.contentEle.style.overflow = '';
-    this.contentEle.style.right = '';
   }
-  handleCloseClick() {
-    this.hide();
+  // Event Handling
+  addOpenListeners() {
+    document.addEventListener('keydown', this.handleDocumentKeyDown);
   }
-  handleKeyDown(event) {
-    if (event.key === 'Escape') {
-      this.hide();
-    }
+  removeOpenListeners() {
+    document.removeEventListener('keydown', this.handleDocumentKeyDown);
   }
-  handleOverlayClick() {
-    const slOverlayDismiss = this.nanoOverlayDismiss.emit();
-    if (!slOverlayDismiss.defaultPrevented) {
-      this.hide();
-    }
+  // Component Lifecycle
+  connectedCallback() {
+    this.handleHoistChange();
+    this.modal = new Modal(this.host);
   }
-  handleSlotChange() {
-    this.hasFooter = !!this.host.querySelector('[slot="footer"]');
+  disconnectedCallback() {
+    unlockBodyScrolling(this.host);
   }
-  handleTransitionEnd(event) {
-    const target = event.target;
-    // Ensure we only emit one event when the target element is no longer visible
-    if (event.propertyName === 'transform' &&
-      target.classList.contains('drawer__panel')) {
-      this.isVisible = this.open;
-      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();
-      if (this.open) {
-        this.panel.focus();
+  componentWillLoad() {
+    this.handleSlotChange();
+    // Show on init if open
+    if (this.open)
+      this.show();
+    if (this.storeId)
+      ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);
+  }
+  componentDidLoad() {
+    this.drawer.hidden = !this.open;
+    if (this.open) {
+      this.addOpenListeners();
+      if (!this.contained) {
+        this.modal.activate();
+        lockBodyScrolling(this.host);
       }
     }
   }
   render() {
-    const placementClass = 'drawer--' + this.placement;
-    const typeClass = 'drawer--' + this.type;
-    return (h(Host, null, h("div", { part: "base", class: {
+    return (h("div", { ref: (ele) => (this.drawer = ele), part: "base", class: {
         drawer: true,
         'drawer--open': this.open,
-        'drawer--visible': this.isVisible,
-        [typeClass]: true,
-        [placementClass]: true,
+        [`drawer--${this.placement}`]: true,
         'drawer--contained': this.contained,
         'drawer--fixed': !this.contained,
-        'drawer--has-footer': this.hasFooter,
-      }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (h("header", { part: "header", class: "drawer__header" }, h("span", { part: "title", class: "drawer__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))))), h("div", { part: "body", class: "drawer__body" }, h("slot", null)), h("footer", { part: "footer", class: "drawer__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange }))))));
+        'drawer--has-footer': hasSlot(this.host, 'footer'),
+        'drawer--has-header': !this.noHeader,
+        'drawer--nodismiss': this.noDismiss,
+      } }, h("div", { ref: (ele) => (this.overlay = ele), part: "overlay", class: "drawer__overlay", onClick: () => this.requestClose('overlay'), tabindex: "-1" }), h("div", { ref: (ele) => (this.panel = ele), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : undefined, "aria-labelledby": !this.noHeader ? 'title' : undefined, tabindex: "0" }, h("div", { class: "drawer__main" }, !this.noHeader && (h("nano-sticker", null, h("header", { part: "header", class: "drawer__header" }, h("h2", { part: "title", class: "drawer__title", id: "title" }, h("slot", { name: "label" }, this.label.length > 0
+      ? this.label
+      : String.fromCharCode(65279))), h("div", { part: "header-actions", class: "drawer__header-actions" }, h("slot", { name: "header-actions" }), !this.noUserDismiss && (h("nano-icon-button", { part: "close-button", exportparts: "base:close-button__base", class: "drawer__close", iconName: "light/times", label: "Close", onClick: () => this.requestClose('close-button') })))))), h("div", { part: "body", class: "drawer__body" }, h("slot", null)), h("nano-sticker", { position: "bottom" }, h("footer", { part: "footer", class: "drawer__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))))));
   }
   static get is() { return "nano-drawer"; }
   static get encapsulation() { return "shadow"; }
@@ -166,7 +235,7 @@ export class Drawer {
     return {
       "open": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -176,7 +245,7 @@ export class Drawer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods."
+          "text": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state."
         },
         "getter": false,
         "setter": false,
@@ -192,17 +261,16 @@ export class Drawer {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility."
+          "text": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead."
         },
         "getter": false,
         "setter": false,
         "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
+        "reflect": true
       },
       "placement": {
         "type": "string",
@@ -221,7 +289,7 @@ export class Drawer {
         "getter": false,
         "setter": false,
         "attribute": "placement",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "'end'"
       },
       "contained": {
@@ -236,12 +304,12 @@ export class Drawer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this prop and add `position: relative` to the parent."
+          "text": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent."
         },
         "getter": false,
         "setter": false,
         "attribute": "contained",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "noHeader": {
@@ -261,54 +329,99 @@ export class Drawer {
         "getter": false,
         "setter": false,
         "attribute": "no-header",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
-      "type": {
+      "storeId": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'overlay' | 'reveal' | 'push'",
-          "resolved": "\"overlay\" | \"push\" | \"reveal\"",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Store search queries (against this ID) to the component store. Use in conjunction with storeMethod"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "store-id",
+        "reflect": false
+      },
+      "storeMethod": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StorageMethods",
+          "resolved": "\"local\" | \"session\" | \"url-hash\" | \"url-hash-push\" | \"url-query\" | \"url-query-push\"",
+          "references": {
+            "StorageMethods": {
+              "location": "import",
+              "path": "../../utils/store/component-store"
+            }
+          }
+        },
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The display type of the drawer"
+          "text": "The method of storage. Either session storage, url hash (after the '#') or url query (after the '?')."
         },
         "getter": false,
         "setter": false,
-        "attribute": "type",
+        "attribute": "store-method",
         "reflect": false,
-        "defaultValue": "'overlay'"
+        "defaultValue": "'url-hash'"
       },
-      "contentSelector": {
-        "type": "string",
+      "noUserDismiss": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Required for 'reveal' and 'push' types\nA valid DOM selector of the content element that this drawer will push or reveal underneath\nPlease remember - elements wrapping the content element must be 'overflow: hidden'\notherwise menus will be shown when closed"
+          "text": "An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key"
         },
         "getter": false,
         "setter": false,
-        "attribute": "content-selector",
-        "reflect": false
+        "attribute": "no-user-dismiss",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hoist": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...`"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "hoist",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
   static get states() {
     return {
-      "hasFooter": {},
-      "isVisible": {}
+      "noDismiss": {},
+      "hasFooter": {}
     };
   }
   static get events() {
@@ -320,7 +433,7 @@ export class Drawer {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened."
+          "text": "Emitted when the drawer opens."
         },
         "complexType": {
           "original": "any",
@@ -328,14 +441,14 @@ export class Drawer {
           "references": {}
         }
       }, {
-        "method": "nanoAfterShow",
-        "name": "nanoAfterShow",
+        "method": "nanoHide",
+        "name": "nanoHide",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted after the drawer opens and all transitions are complete."
+          "text": "Emitted when the drawer closes."
         },
         "complexType": {
           "original": "any",
@@ -343,14 +456,14 @@ export class Drawer {
           "references": {}
         }
       }, {
-        "method": "nanoHide",
-        "name": "nanoHide",
+        "method": "nanoAfterHide",
+        "name": "nanoAfterHide",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed."
+          "text": "Emitted after the drawer closes and all animations are complete."
         },
         "complexType": {
           "original": "any",
@@ -358,14 +471,14 @@ export class Drawer {
           "references": {}
         }
       }, {
-        "method": "nanoAfterHide",
-        "name": "nanoAfterHide",
+        "method": "nanoAfterShow",
+        "name": "nanoAfterShow",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted after the drawer closes and all transitions are complete."
+          "text": "Emitted after the drawer opens and all animations are complete."
         },
         "complexType": {
           "original": "any",
@@ -373,20 +486,35 @@ export class Drawer {
           "references": {}
         }
       }, {
-        "method": "nanoOverlayDismiss",
-        "name": "nanoOverlayDismiss",
+        "method": "nanoInitialFocus",
+        "name": "nanoInitialFocus",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing."
+          "text": "Emitted when the drawer opens and is ready to receive focus. Calling\n`event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
         },
         "complexType": {
           "original": "any",
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "nanoRquestClose",
+        "name": "nanoRquestClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the user attempts to\nclose the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n`event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\ndestructive behavior such as data loss."
+        },
+        "complexType": {
+          "original": "{\n    source: 'close-button' | 'keyboard' | 'overlay';\n  }",
+          "resolved": "{ source: \"overlay\" | \"keyboard\" | \"close-button\"; }",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -403,7 +531,7 @@ export class Drawer {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Shows the drawer",
+          "text": "Shows the drawer.",
           "tags": []
         }
       },
@@ -428,14 +556,14 @@ export class Drawer {
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{
-        "propName": "open",
-        "methodName": "handleOpenChange"
+        "propName": "hoist",
+        "methodName": "handleHoistChange"
       }, {
-        "propName": "type",
-        "methodName": "handleTypeChange"
+        "propName": "contained",
+        "methodName": "handleNoModalChange"
       }, {
-        "propName": "contentSelector",
-        "methodName": "handleContentSelector"
+        "propName": "open",
+        "methodName": "handleOpenChange"
       }];
   }
 }