@justeattakeaway/pie-select 0.7.0 → 0.8.0

package/custom-elements.json

@@ -73,15 +73,6 @@
           "description": "",
           "name": "PieSelect",
           "members": [
-            {
-              "kind": "field",
-              "name": "shadowRootOptions",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
-            },
             {
               "kind": "field",
               "name": "size",
@@ -277,6 +268,10 @@
             {
               "name": "RtlMixin",
               "package": "@justeattakeaway/pie-webc-core"
+            },
+            {
+              "name": "DelegatesFocusMixin",
+              "package": "@justeattakeaway/pie-webc-core"
             }
           ],
           "superclass": {

package/dist/index.d.ts

@@ -15,12 +15,6 @@ export declare const defaultProps: DefaultProps;
  * @event {CustomEvent} change - when the selected option is changed.
  */
 export declare class PieSelect extends PieSelect_base implements SelectProps {
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
     size: "small" | "medium" | "large";
     disabled: boolean;
     status: "default" | "error";

package/dist/index.js

@@ -1,36 +1,38 @@
-import { LitElement as b, html as p, nothing as _, unsafeCSS as $ } from "lit";
-import { FormControlMixin as I, RtlMixin as w, wrapNativeEvent as z, validPropertyValues as f, safeCustomElement as k } from "@justeattakeaway/pie-webc-core";
-import { property as n, query as m, queryAssignedElements as S, state as C } from "lit/decorators.js";
+import { LitElement as y, html as p, nothing as _, unsafeCSS as $ } from "lit";
+import { FormControlMixin as I, RtlMixin as w, DelegatesFocusMixin as z, wrapNativeEvent as k, validPropertyValues as b, safeCustomElement as S } from "@justeattakeaway/pie-webc-core";
+import { property as n, query as f, queryAssignedElements as C, state as V } from "lit/decorators.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
-import { classMap as V } from "lit/directives/class-map.js";
-import { live as L } from "lit/directives/live.js";
+import { classMap as L } from "lit/directives/class-map.js";
+import { live as T } from "lit/directives/live.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronDown.js";
 import "@justeattakeaway/pie-assistive-text";
-const h = class h extends b {
+const h = class h extends y {
   willUpdate() {
     this.getAttribute("v") || this.setAttribute("v", h.v);
   }
 };
-h.v = "0.7.0";
+h.v = "0.8.0";
 let g = h;
-const T = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-select{--select-padding-block: var(--dt-spacing-c);--select-padding-inline-start: var(--dt-spacing-d);--select-padding-inline-end: 52px;--select-background-color: var(--dt-color-container-default);--select-text-color: var(--dt-color-content-default);--select-border-color: var(--dt-color-border-form);--select-font-size: calc(var(--dt-font-body-l-size) * 1px);--select-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--select-height: 48px;--select-cursor: pointer;position:relative;color:var(--select-text-color);font-size:var(--select-font-size);line-height:var(--select-line-height)}.c-select select{height:var(--select-height);width:100%;border:1px solid var(--select-border-color);border-radius:var(--dt-radius-rounded-c);padding-inline-start:var(--select-padding-inline-start);padding-inline-end:var(--select-padding-inline-end);padding-block-start:var(--select-padding-block);padding-block-end:var(--select-padding-block);background-color:var(--select-background-color);font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--select-cursor);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-select select:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-select.c-select--small{--select-padding-block: var(--dt-spacing-b);--select-height: 40px}.c-select.c-select--large{--select-padding-block: var(--dt-spacing-d);--select-height: 56px}.c-select.c-select--error{--select-border-color: var(--dt-color-support-error)}.c-select.c-select--withLeadingIcon{--select-padding-inline-start: calc(var(--dt-spacing-h) - var(--dt-spacing-a))}.c-select ::slotted([slot=leadingIcon]),.c-select .c-select-trailingIcon{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}.c-select:not(.is-disabled) ::slotted([slot=leadingIcon]),.c-select:not(.is-disabled) .c-select-trailingIcon{color:var(--dt-color-content-subdued)}.c-select ::slotted([slot=leadingIcon]){--icon-display-override: block;--icon-size-override: 24px;inset-inline-start:var(--dt-spacing-d)}.c-select .c-select-trailingIcon{inset-inline-end:var(--dt-spacing-d)}@media (hover: hover){.c-select:hover{--select-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}@supports (background-color: color-mix(in srgb,black,white)){.c-select:hover{--select-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-select.is-disabled{--select-background-color: var(--dt-color-disabled-01);--select-border-color: var(--dt-color-disabled-01);--select-text-color: var(--dt-color-content-disabled);--select-cursor: auto}", O = ["small", "medium", "large"], A = ["default", "error"], c = {
+const A = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-select{--select-padding-block: var(--dt-spacing-c);--select-padding-inline-start: var(--dt-spacing-d);--select-padding-inline-end: 52px;--select-background-color: var(--dt-color-container-default);--select-text-color: var(--dt-color-content-default);--select-border-color: var(--dt-color-border-form);--select-font-size: calc(var(--dt-font-body-l-size) * 1px);--select-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--select-height: 48px;--select-cursor: pointer;position:relative;color:var(--select-text-color);font-size:var(--select-font-size);line-height:var(--select-line-height)}.c-select select{height:var(--select-height);width:100%;border:1px solid var(--select-border-color);border-radius:var(--dt-radius-rounded-c);padding-inline-start:var(--select-padding-inline-start);padding-inline-end:var(--select-padding-inline-end);padding-block-start:var(--select-padding-block);padding-block-end:var(--select-padding-block);background-color:var(--select-background-color);font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--select-cursor);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-select select:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-select.c-select--small{--select-padding-block: var(--dt-spacing-b);--select-height: 40px}.c-select.c-select--large{--select-padding-block: var(--dt-spacing-d);--select-height: 56px}.c-select.c-select--error{--select-border-color: var(--dt-color-support-error)}.c-select.c-select--withLeadingIcon{--select-padding-inline-start: calc(var(--dt-spacing-h) - var(--dt-spacing-a))}.c-select ::slotted([slot=leadingIcon]),.c-select .c-select-trailingIcon{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}.c-select:not(.is-disabled) ::slotted([slot=leadingIcon]),.c-select:not(.is-disabled) .c-select-trailingIcon{color:var(--dt-color-content-subdued)}.c-select ::slotted([slot=leadingIcon]){--icon-display-override: block;--icon-size-override: 24px;inset-inline-start:var(--dt-spacing-d)}.c-select .c-select-trailingIcon{inset-inline-end:var(--dt-spacing-d)}@media (hover: hover){.c-select:hover{--select-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}@supports (background-color: color-mix(in srgb,black,white)){.c-select:hover{--select-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-select.is-disabled{--select-background-color: var(--dt-color-disabled-01);--select-border-color: var(--dt-color-disabled-01);--select-text-color: var(--dt-color-content-disabled);--select-cursor: auto}", F = ["small", "medium", "large"], D = ["default", "error"], c = {
   size: "medium",
   status: "default",
   disabled: !1,
   options: [],
   value: ""
 };
-var F = Object.defineProperty, P = Object.getOwnPropertyDescriptor, i = (t, e, o, r) => {
-  for (var s = r > 1 ? void 0 : r ? P(e, o) : e, a = t.length - 1, d; a >= 0; a--)
-    (d = t[a]) && (s = (r ? d(e, o, s) : d(s)) || s);
-  return r && s && F(e, o, s), s;
+var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? P(e, i) : e, a = t.length - 1, d; a >= 0; a--)
+    (d = t[a]) && (s = (r ? d(e, i, s) : d(s)) || s);
+  return r && s && O(e, i, s), s;
 };
-const x = "pie-select", v = "assistive-text";
-let l = class extends I(w(g)) {
+const m = "pie-select", v = "assistive-text";
+let l = class extends I(w(z(g))) {
   constructor() {
     super(...arguments), this.size = c.size, this.disabled = c.disabled, this.status = c.status, this.options = c.options, this._value = c.value, this._hasLeadingIcon = !1, this._handleChange = (t) => {
-      const e = z(t);
-      this.dispatchEvent(e), this._internals.setFormValue(this._select.value);
+      const { value: e } = this._select;
+      this._value = e, this._internals.setFormValue(e);
+      const i = k(t);
+      this.dispatchEvent(i);
     };
   }
   firstUpdated() {
@@ -64,7 +66,7 @@ let l = class extends I(w(g)) {
    * Resets the value to the default select value.
    */
   formResetCallback() {
-    const t = this.options.reduce((s, a) => a.tag === "optgroup" ? s.concat(a.options) : (s.push(a), s), []), e = t.length > 0 ? t[0].value : "", o = t.find((s) => s.selected === !0), r = o ? o.value : e;
+    const t = this.options.reduce((s, a) => a.tag === "optgroup" ? s.concat(a.options) : (s.push(a), s), []), e = t.length > 0 ? t[0].value : "", i = t.find((s) => s.selected === !0), r = i ? i.value : e;
     this._select.value = r || "", this._internals.setFormValue(r || null), this._value = r || "", this.requestUpdate();
   }
   _handleLeadingIconSlotchange() {
@@ -89,7 +91,7 @@ let l = class extends I(w(g)) {
       const r = this._value !== "" ? this._value === e.value : e.selected;
       return p`
             <option
-                .value="${L(e.value || "")}"
+                .value="${T(e.value || "")}"
                 ?disabled="${e.disabled}"
                 ?selected="${r}">
                 ${e.text}
@@ -116,21 +118,21 @@ let l = class extends I(w(g)) {
     const {
       assistiveText: t,
       disabled: e,
-      status: o,
+      status: i,
       size: r,
       name: s,
       options: a,
       _hasLeadingIcon: d
-    } = this, y = {
+    } = this, x = {
       "c-select": !0,
       [`c-select--${r}`]: !0,
-      [`c-select--${o}`]: !0,
+      [`c-select--${i}`]: !0,
       "c-select--withLeadingIcon": d,
       "is-disabled": e
     };
     return p`
             <div
-                class="${V(y)}"
+                class="${L(x)}"
                 data-test-id="pie-select-shell">
                 <slot name="leadingIcon" @slotchange=${this._handleLeadingIconSlotchange}></slot>
                 <select
@@ -138,8 +140,8 @@ let l = class extends I(w(g)) {
                     name="${u(s)}"
                     ?disabled="${e}"
                     aria-describedby="${u(t ? v : void 0)}"
-                    aria-invalid="${o === "error" ? "true" : "false"}"
-                    aria-errormessage="${u(o === "error" ? v : void 0)}"
+                    aria-invalid="${i === "error" ? "true" : "false"}"
+                    aria-errormessage="${u(i === "error" ? v : void 0)}"
                     @change=${this._handleChange}>
                     ${this.renderChildren(a)}
                 </select>
@@ -149,49 +151,48 @@ let l = class extends I(w(g)) {
         `;
   }
 };
-l.shadowRootOptions = { ...b.shadowRootOptions, delegatesFocus: !0 };
-l.styles = $(T);
-i([
+l.styles = $(A);
+o([
   n({ type: String }),
-  f(x, O, c.size)
+  b(m, F, c.size)
 ], l.prototype, "size", 2);
-i([
+o([
   n({ type: Boolean })
 ], l.prototype, "disabled", 2);
-i([
+o([
   n({ type: String }),
-  f(x, A, c.status)
+  b(m, D, c.status)
 ], l.prototype, "status", 2);
-i([
+o([
   n({ type: String })
 ], l.prototype, "assistiveText", 2);
-i([
+o([
   n({ type: String, reflect: !0 })
 ], l.prototype, "name", 2);
-i([
+o([
   n({ type: Array })
 ], l.prototype, "options", 2);
-i([
-  m("select")
+o([
+  f("select")
 ], l.prototype, "focusTarget", 2);
-i([
-  m("select")
+o([
+  f("select")
 ], l.prototype, "_select", 2);
-i([
-  S({ slot: "leadingIcon", flatten: !0 })
+o([
+  C({ slot: "leadingIcon", flatten: !0 })
 ], l.prototype, "_leadingIconSlot", 2);
-i([
-  C()
+o([
+  V()
 ], l.prototype, "_hasLeadingIcon", 2);
-i([
+o([
   n()
 ], l.prototype, "value", 1);
-l = i([
-  k("pie-select")
+l = o([
+  S("pie-select")
 ], l);
 export {
   l as PieSelect,
   c as defaultProps,
-  O as sizes,
-  A as statusTypes
+  F as sizes,
+  D as statusTypes
 };

package/dist/react.d.ts

@@ -18,12 +18,6 @@ export declare const PieSelect: React_2.ForwardRefExoticComponent<React_2.PropsW
  * @event {CustomEvent} change - when the selected option is changed.
  */
 declare class PieSelect_2 extends PieSelect_base implements SelectProps {
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
     size: "small" | "medium" | "large";
     disabled: boolean;
     status: "default" | "error";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-select",
   "description": "PIE Design System Select built using Web Components",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -40,13 +40,13 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.21.0",
+    "@justeattakeaway/pie-css": "0.22.0",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.10.11",
-    "@justeattakeaway/pie-webc-core": "1.1.0"
+    "@justeattakeaway/pie-assistive-text": "0.11.0",
+    "@justeattakeaway/pie-webc-core": "2.0.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -1,5 +1,4 @@
 import {
-    LitElement,
     html,
     nothing,
     unsafeCSS,
@@ -9,6 +8,7 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
 import {
     FormControlMixin,
     RtlMixin,
+    DelegatesFocusMixin,
     safeCustomElement,
     validPropertyValues,
     wrapNativeEvent,
@@ -45,9 +45,7 @@ const assistiveTextIdValue = 'assistive-text';
  * @event {CustomEvent} change - when the selected option is changed.
  */
 @safeCustomElement('pie-select')
-export class PieSelect extends FormControlMixin(RtlMixin(PieElement)) implements SelectProps {
-    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
-
+export class PieSelect extends FormControlMixin(RtlMixin(DelegatesFocusMixin(PieElement))) implements SelectProps {
     @property({ type: String })
     @validPropertyValues(componentSelector, sizes, defaultProps.size)
     public size = defaultProps.size;
@@ -159,6 +157,11 @@ export class PieSelect extends FormControlMixin(RtlMixin(PieElement)) implements
      * @param event - The change event.
      */
     private _handleChange = (event: Event) => {
+        // Update value state
+        const { value } = this._select;
+        this._value = value;
+        this._internals.setFormValue(value);
+
         // We have to create our own change event because the native one
         // does not penetrate the shadow boundary.
 
@@ -166,8 +169,6 @@ export class PieSelect extends FormControlMixin(RtlMixin(PieElement)) implements
         // Reference: https://javascript.info/shadow-dom-events#event-composed
         const customChangeEvent = wrapNativeEvent(event);
         this.dispatchEvent(customChangeEvent);
-
-        this._internals.setFormValue(this._select.value);
     };
 
     private _handleLeadingIconSlotchange () {