@getflip/swirl-components 0.167.0 → 0.167.2

package/dist/collection/components/swirl-date-input/swirl-date-input.js

@@ -2,11 +2,12 @@ import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { format, isValid, parse } from "date-fns";
 import { create as createMask } from "maska/dist/es6/maska";
-import { getDesktopMediaQuery } from "../../utils";
+import { getDesktopMediaQuery, isMobileViewport } from "../../utils";
 const internalDateFormat = "yyyy-MM-dd";
 export class SwirlDateInput {
   constructor() {
     this.desktopMediaQuery = getDesktopMediaQuery();
+    this.recursiveFocus = false;
     this.desktopMediaQueryHandler = (event) => {
       this.updateIconSize(event.matches);
     };
@@ -38,7 +39,23 @@ export class SwirlDateInput {
     this.onClick = (event) => {
       event.preventDefault();
     };
+    this.onMouseDown = () => {
+      if (this.preferredInputMode === "pick") {
+        this.pickerPopover.close();
+      }
+    };
     this.onFocus = (event) => {
+      if (this.recursiveFocus) {
+        this.recursiveFocus = false;
+        return;
+      }
+      if (this.preferredInputMode === "pick") {
+        this.pickerPopover.open(this.el);
+        if (!isMobileViewport()) {
+          this.recursiveFocus = true;
+          this.focus();
+        }
+      }
       this.handleAutoSelect(event);
     };
     this.onPickDate = (event) => {
@@ -61,6 +78,7 @@ export class SwirlDateInput {
     this.labels = undefined;
     this.locale = "en-US";
     this.placeholder = "yyyy-mm-dd";
+    this.preferredInputMode = "input";
     this.required = undefined;
     this.swirlAriaDescribedby = undefined;
     this.value = undefined;
@@ -76,9 +94,7 @@ export class SwirlDateInput {
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
     // see https://stackoverflow.com/a/27314017
     if (this.autoFocus) {
-      setTimeout(() => {
-        this.inputEl.focus();
-      });
+      this.focus();
     }
   }
   disconnectedCallback() {
@@ -88,6 +104,11 @@ export class SwirlDateInput {
   watchFormat() {
     this.setupMask();
   }
+  focus() {
+    setTimeout(() => {
+      this.inputEl.focus();
+    });
+  }
   updateIconSize(smallIcon) {
     this.iconSize = smallIcon ? 20 : 24;
   }
@@ -116,7 +137,7 @@ export class SwirlDateInput {
     const className = classnames("date-input", {
       "date-input--inline": this.inline,
     });
-    return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, id: this.id, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { popover: `popover-${this.id}` }, h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { size: this.iconSize })))), !this.disabled && (h("swirl-popover", { animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
+    return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { popover: `popover-${this.id}` }, h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { size: this.iconSize })))), !this.disabled && (h("swirl-popover", { animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
   }
   static get is() { return "swirl-date-input"; }
   static get encapsulation() { return "scoped"; }
@@ -365,6 +386,24 @@ export class SwirlDateInput {
         "reflect": false,
         "defaultValue": "\"yyyy-mm-dd\""
       },
+      "preferredInputMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"input\" | \"pick\"",
+          "resolved": "\"input\" | \"pick\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "preferred-input-mode",
+        "reflect": false,
+        "defaultValue": "\"input\""
+      },
       "required": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/swirl-date-input/swirl-date-input.spec.js

@@ -1,12 +1,27 @@
 const maskSpy = jest.fn();
+const isMobileViewportSpy = jest.fn();
 jest.mock("maska/dist/es6/maska", () => ({
   create: maskSpy,
 }));
+jest.mock("../../utils", () => {
+  const original = jest.requireActual("../../utils");
+  return {
+    ...original,
+    isMobileViewport: isMobileViewportSpy,
+  };
+});
+global.IntersectionObserver = class {
+  constructor() { }
+  disconnect() { }
+  observe() { }
+};
 import { newSpecPage } from "@stencil/core/testing";
 import { SwirlDateInput } from "./swirl-date-input";
+import { SwirlPopover } from "../swirl-popover/swirl-popover";
 describe("swirl-date-input", () => {
   beforeEach(() => {
     maskSpy.mockReset();
+    isMobileViewportSpy.mockReset();
   });
   it("renders the input and picker", async () => {
     const page = await newSpecPage({
@@ -16,7 +31,7 @@ describe("swirl-date-input", () => {
     expect(page.root).toEqualHtml(`
       <swirl-date-input>
         <div class="date-input">
-          <input class="date-input__input" id="swirl-date-input-0" placeholder="yyyy-mm-dd" type="text">
+          <input class="date-input__input" id="swirl-date-input-0" inputmode="numeric" placeholder="yyyy-mm-dd" type="text">
           <swirl-popover-trigger popover="popover-swirl-date-input-0">
           <button aria-label="Open date picker" class="date-input__date-picker-button" type="button">
               <swirl-icon-today size="24"></swirl-icon-today>
@@ -87,4 +102,84 @@ describe("swirl-date-input", () => {
     input.dispatchEvent(new Event("input"));
     expect(spy.mock.calls[0][0].detail).toBe("2022-22-22");
   });
+  it("opens the datepicker when input gets focused and preferredInputMode is 'pick'", async () => {
+    const page = await newSpecPage({
+      components: [SwirlDateInput, SwirlPopover],
+      html: `<swirl-date-input></swirl-date-input>`,
+    });
+    const input = page.root.querySelector("input");
+    const popover = page.root.querySelector("swirl-popover");
+    const spy = jest.fn();
+    Object.defineProperty(popover, "open", { value: spy });
+    page.root.preferredInputMode = "pick";
+    input.dispatchEvent(new FocusEvent("focus"));
+    expect(spy).toHaveBeenCalled();
+  });
+  it("doesn't open the datepicker when input gets focused and preferredInputMode isn't 'pick'", async () => {
+    const page = await newSpecPage({
+      components: [SwirlDateInput, SwirlPopover],
+      html: `<swirl-date-input></swirl-date-input>`,
+    });
+    const input = page.root.querySelector("input");
+    const popover = page.root.querySelector("swirl-popover");
+    const spy = jest.fn();
+    Object.defineProperty(popover, "open", { value: spy });
+    page.root.preferredInputMode = "input";
+    input.dispatchEvent(new FocusEvent("focus"));
+    expect(spy).not.toHaveBeenCalled();
+  });
+  it("closes the datepicker on mouse down when preferredInputMode is 'pick'", async () => {
+    const page = await newSpecPage({
+      components: [SwirlDateInput, SwirlPopover],
+      html: `<swirl-date-input></swirl-date-input>`,
+    });
+    const input = page.root.querySelector("input");
+    const popover = page.root.querySelector("swirl-popover");
+    const spy = jest.fn();
+    Object.defineProperty(popover, "close", { value: spy });
+    page.root.preferredInputMode = "pick";
+    input.dispatchEvent(new MouseEvent("mousedown"));
+    expect(spy).toHaveBeenCalled();
+  });
+  it("doesn't close the datepicker on mouse down when preferredInputMode isn't 'pick'", async () => {
+    const page = await newSpecPage({
+      components: [SwirlDateInput, SwirlPopover],
+      html: `<swirl-date-input></swirl-date-input>`,
+    });
+    const input = page.root.querySelector("input");
+    const popover = page.root.querySelector("swirl-popover");
+    const spy = jest.fn();
+    Object.defineProperty(popover, "close", { value: spy });
+    page.root.preferredInputMode = "input";
+    input.dispatchEvent(new MouseEvent("mousedown"));
+    expect(spy).not.toHaveBeenCalled();
+  });
+  it("keeps the focus on the input when the datepicker is opened with focus on desktop", async () => {
+    const page = await newSpecPage({
+      components: [SwirlDateInput, SwirlPopover],
+      html: `<swirl-date-input></swirl-date-input>`,
+    });
+    const input = page.root.querySelector("input");
+    const spy = jest.fn();
+    isMobileViewportSpy.mockImplementation(() => false);
+    page.root.preferredInputMode = "pick";
+    input.addEventListener("focus", spy);
+    input.dispatchEvent(new FocusEvent("focus"));
+    await new Promise((resolve) => setTimeout(resolve));
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+  it("lose the focus on the input when the datepicker is opened with focus on mobile", async () => {
+    const page = await newSpecPage({
+      components: [SwirlDateInput, SwirlPopover],
+      html: `<swirl-date-input></swirl-date-input>`,
+    });
+    const input = page.root.querySelector("input");
+    const spy = jest.fn();
+    isMobileViewportSpy.mockImplementation(() => true);
+    page.root.preferredInputMode = "pick";
+    input.addEventListener("focus", spy);
+    input.dispatchEvent(new FocusEvent("focus"));
+    await new Promise((resolve) => setTimeout(resolve));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
 });

package/dist/collection/components/swirl-dialog/swirl-dialog.js

@@ -62,7 +62,7 @@ export class SwirlDialog {
   }
   render() {
     const className = classnames("dialog", { "dialog--closing": this.closing });
-    return (h(Host, null, h("div", { "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", null)), h("div", { class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: this.intent === "critical" ? "ghost" : "flat" })))))));
+    return (h(Host, null, h("div", { "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", null)), h("div", { class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
   }
   static get is() { return "swirl-dialog"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-form-control/swirl-form-control.js

@@ -1,6 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
-import { getActiveElement } from "../../utils";
+import { getActiveElement, isDescendantOf } from "../../utils";
 /**
  * @slot slot - The input element, e.g. `<swirl-text-input></swirl-text-input>`
  * @slot prefix - The prefix element, e.g. `<select slot="prefix">…</select>` or `<swirl-icon-poll></swirl-icon-poll>`
@@ -24,7 +24,7 @@ export class SwirlFormControl {
     this.onKeyDown = (event) => {
       if (event.key === "Tab") {
         setTimeout(() => {
-          if (!this.el.contains(getActiveElement())) {
+          if (!isDescendantOf(getActiveElement(), this.el)) {
             this.hasFocus = false;
           }
         });

package/dist/collection/components/swirl-form-control/swirl-form-control.spec.js

@@ -1,5 +1,9 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SwirlFormControl } from "./swirl-form-control";
+global.DocumentFragment = class DocumentFragment extends Node {
+};
+global.ShadowRoot = class ShadowRoot extends DocumentFragment {
+};
 describe("swirl-form-control", () => {
   it("renders its input with label", async () => {
     const page = await newSpecPage({
@@ -72,4 +76,43 @@ describe("swirl-form-control", () => {
       .querySelector(".form-control__error-message > *")
       .getAttribute("message")).toBe("Error");
   });
+  it("keeps focus when Tab is pressed and the active element is descendent of the input", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFormControl],
+      html: `
+        <swirl-form-control label="Label">
+          <mock:shadow-root>
+            <span id="active-element"></span>
+          </mock:shadow-root>
+        </swirl-form-control>
+      `,
+    });
+    const activeElement = page.doc.querySelector("#active-element");
+    const formControl = page.root.children[0];
+    page.root.dispatchEvent(new FocusEvent("focusin"));
+    page.doc.activeElement = activeElement;
+    page.root.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab" }));
+    await new Promise((resolve) => setTimeout(resolve, 150));
+    await page.waitForChanges();
+    expect(formControl.classList.contains('form-control--has-focus')).toBeTruthy();
+  });
+  it("doesn't keep focus when Tab is pressed and the active element is not descendent of the input", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFormControl],
+      html: `
+        <swirl-form-control label="Label">
+          <swirl-text-input></swirl-text-input>
+        </swirl-form-control>
+        <span id="active-element"></span>>
+      `,
+    });
+    const activeElement = page.doc.querySelector("#active-element");
+    const formControl = page.root.children[0];
+    page.root.dispatchEvent(new FocusEvent("focusin"));
+    page.doc.activeElement = activeElement;
+    page.root.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab" }));
+    await new Promise((resolve) => setTimeout(resolve, 150));
+    await page.waitForChanges();
+    expect(formControl.classList.contains('form-control--has-focus')).toBeFalsy();
+  });
 });

package/dist/collection/utils.js

@@ -15,6 +15,19 @@ export function closestPassShadow(node, selector) {
   }
   return closestPassShadow(node.parentNode, selector);
 }
+export function isDescendantOf(element, potentialParent) {
+  let current = element;
+  while (current !== null) {
+    if (current === potentialParent) {
+      return true;
+    }
+    current = current.parentNode;
+    if (current instanceof ShadowRoot) {
+      current = current.host;
+    }
+  }
+  return false;
+}
 export function getActiveElement(root = document) {
   const activeEl = root.activeElement;
   if (!Boolean(activeEl)) {