@justeattakeaway/pie-select 0.2.0 → 0.3.0

package/src/index.ts

@@ -3,11 +3,14 @@ import {
     html,
     nothing,
     unsafeCSS,
+    type TemplateResult,
 } from 'lit';
 import {
+    FormControlMixin,
     RtlMixin,
     defineCustomElement,
     validPropertyValues,
+    wrapNativeEvent,
 } from '@justeattakeaway/pie-webc-core';
 import {
     property,
@@ -17,7 +20,9 @@ import {
 } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
+import { live } from 'lit/directives/live.js';
 import '@justeattakeaway/pie-icons-webc/dist/IconChevronDown.js';
+import '@justeattakeaway/pie-assistive-text';
 
 import styles from './select.scss?inline';
 import {
@@ -35,8 +40,9 @@ const assistiveTextIdValue = 'assistive-text';
 
 /**
  * @tagname pie-select
+ * @event {CustomEvent} change - when the selected option is changed.
  */
-export class PieSelect extends RtlMixin(LitElement) implements SelectProps {
+export class PieSelect extends FormControlMixin(RtlMixin(LitElement)) implements SelectProps {
     static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 
     @property({ type: String })
@@ -56,8 +62,14 @@ export class PieSelect extends RtlMixin(LitElement) implements SelectProps {
     @property({ type: String })
     public name: SelectProps['name'];
 
+    @property({ type: Array })
+    public options: SelectProps['options'] = defaultProps.options;
+
+    @query('select')
+    public focusTarget!: HTMLSelectElement;
+
     @query('select')
-    public focusTarget!: HTMLElement;
+    private _select!: HTMLSelectElement;
 
     @queryAssignedElements({ slot: 'leadingIcon', flatten: true })
     private _leadingIconSlot!: Array<HTMLElement>;
@@ -65,11 +77,94 @@ export class PieSelect extends RtlMixin(LitElement) implements SelectProps {
     @state()
     private _hasLeadingIcon = false;
 
+    protected firstUpdated (): void {
+        this._internals.setFormValue(this._select.value);
+    }
+
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    public get validity (): ValidityState {
+        return this._select.validity;
+    }
+
+    /**
+     * Called after the disabled state of the element changes,
+     * either because the disabled attribute of this element was added or removed;
+     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+     * @param disabled - The latest disabled state of the select.
+     */
+    public formDisabledCallback (disabled: boolean): void {
+        this.disabled = disabled;
+    }
+
+    /**
+     * Called when the form that owns this component is reset.
+     * Resets the value to the default select value.
+     */
+    public formResetCallback (): void {
+        const selected = this._select.querySelector('option[selected]');
+        this._select.value = selected?.getAttribute('value') ?? '';
+        this._select.selectedIndex = selected ? this._select.selectedIndex : 0;
+        this._internals.setFormValue(this._select.value);
+    }
+
+    /**
+     * Captures the native change event and wraps it in a custom event.
+     * @param event - The change event.
+     */
+    private _handleChange = (event: Event) => {
+        // We have to create our own change event because the native one
+        // does not penetrate the shadow boundary.
+
+        // This is because some events set `composed` to `false`.
+        // Reference: https://javascript.info/shadow-dom-events#event-composed
+        const customChangeEvent = wrapNativeEvent(event);
+        this.dispatchEvent(customChangeEvent);
+
+        this._internals.setFormValue(this._select.value);
+    };
+
     private _handleLeadingIconSlotchange () {
         this._hasLeadingIcon = Boolean(this._leadingIconSlot.length);
     }
 
-    private renderAssistiveText () {
+    /**
+     * Renders the options from the options property
+     * @param options - The options to render
+     * @returns A template result with the rendered options
+     */
+    private renderChildren (options: SelectProps['options']): TemplateResult {
+        return html`
+            ${options.map((option) => {
+            if (option.tag === 'optgroup') {
+                return html`
+                        <optgroup
+                            ?disabled="${option.disabled}"
+                            label="${ifDefined(option.label)}">
+                            ${this.renderChildren(option.options)}
+                        </optgroup>
+                    `;
+            }
+
+            return html`
+                    <option
+                        .value="${live(option.value)}"
+                        ?disabled="${option.disabled}"
+                        ?selected="${option.selected}">
+                        ${option.text}
+                    </option>
+                `;
+        })}
+        `;
+    }
+
+    /**
+     * Renders the assistive text if available.
+     * @returns A template result with the assistive text
+     */
+    private renderAssistiveText (): TemplateResult | typeof nothing {
         if (!this.assistiveText) {
             return nothing;
         }
@@ -77,8 +172,8 @@ export class PieSelect extends RtlMixin(LitElement) implements SelectProps {
         return html`
             <pie-assistive-text
                 id="${assistiveTextIdValue}"
-                variant=${ifDefined(this.status)}
-                data-test-id="pie-textarea-assistive-text">
+                variant="${ifDefined(this.status)}"
+                data-test-id="pie-select-assistive-text">
                 ${this.assistiveText}
             </pie-assistive-text>
         `;
@@ -91,6 +186,7 @@ export class PieSelect extends RtlMixin(LitElement) implements SelectProps {
             status,
             size,
             name,
+            options,
             _hasLeadingIcon,
         } = this;
 
@@ -106,18 +202,18 @@ export class PieSelect extends RtlMixin(LitElement) implements SelectProps {
             <div
                 class="${classMap(classes)}"
                 data-test-id="pie-select-shell">
-                    <slot name="leadingIcon" @slotchange=${this._handleLeadingIconSlotchange}></slot>
-                    <select
-                        name=${ifDefined(name)}
-                        ?disabled=${disabled}
-                        aria-describedby=${ifDefined(assistiveText ? assistiveTextIdValue : undefined)}
-                        aria-invalid=${status === 'error' ? 'true' : 'false'}
-                        aria-errormessage="${ifDefined(status === 'error' ? assistiveTextIdValue : undefined)}">
-                        <option value="dog">Dog</option>
-                        <option value="cat">Cat</option>
-                        <option value="hamster">Hamster</option>
-                    </select>
-                    <icon-chevron-down size='s' class='c-select-trailingIcon'></icon-chevron-down>
+                <slot name="leadingIcon" @slotchange=${this._handleLeadingIconSlotchange}></slot>
+                <select
+                    data-test-id="pie-select-element"
+                    name="${ifDefined(name)}"
+                    ?disabled="${disabled}"
+                    aria-describedby="${ifDefined(assistiveText ? assistiveTextIdValue : undefined)}"
+                    aria-invalid="${status === 'error' ? 'true' : 'false'}"
+                    aria-errormessage="${ifDefined(status === 'error' ? assistiveTextIdValue : undefined)}"
+                    @change=${this._handleChange}>
+                    ${this.renderChildren(options)}
+                </select>
+                <icon-chevron-down size='s' class='c-select-trailingIcon'></icon-chevron-down>
             </div>
             ${this.renderAssistiveText()}
         `;

package/src/react.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent, type EventName } from '@lit/react';
 import { PieSelect as PieSelectLit } from './index';
 import { type SelectProps } from './defs';
 
@@ -10,10 +10,16 @@ const PieSelectReact = createComponent({
     elementClass: PieSelectLit,
     react: React,
     tagName: 'pie-select',
-    events: {},
+    events: {
+        onChange: 'change' as EventName<CustomEvent>, // when the selected option is changed.
+    },
 });
 
 type ReactBaseType = React.HTMLAttributes<HTMLSelectElement>
 
+type PieSelectEvents = {
+    onChange?: (event: CustomEvent) => void;
+};
+
 export const PieSelect = PieSelectReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<SelectProps>
-    & React.RefAttributes<PieSelectLit> & ReactBaseType>;
+    & React.RefAttributes<PieSelectLit> & PieSelectEvents & ReactBaseType>;

package/dist/defs.d.ts

@@ -1,29 +0,0 @@
-import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
-export declare const sizes: readonly ["small", "medium", "large"];
-export declare const statusTypes: readonly ["default", "error"];
-export interface SelectProps {
-    /**
-     * The size of the select component. Can be `small`, `medium` or `large`. Defaults to `medium`.
-     */
-    size?: typeof sizes[number];
-    /**
-     * Same as the HTML disabled attribute - indicates whether the select is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * An optional assistive text to display below the select element. Must be provided when the status is success or error.
-     */
-    assistiveText?: string;
-    /**
-     * The status of the select component / assistive text. Can be default or error.
-     */
-    status?: typeof statusTypes[number];
-    /**
-     * The name of the select (used as a key/value pair with `value`). This is required in order to work properly with forms.
-     */
-    name?: string;
-}
-type DefaultProps = ComponentDefaultProps<SelectProps, keyof Omit<SelectProps, 'name' | 'assistiveText'>>;
-export declare const defaultProps: DefaultProps;
-export {};
-//# sourceMappingURL=defs.d.ts.map

package/dist/defs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,eAAO,MAAM,KAAK,uCAAwC,CAAC;AAE3D,eAAO,MAAM,WAAW,+BAAgC,CAAC;AAEzD,MAAM,WAAW,WAAW;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;IAEpC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,YAAY,GAAG,qBAAqB,CAAC,WAAW,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,eAAe,CAAE,CAAC,CAAC;AAE3G,eAAO,MAAM,YAAY,EAAE,YAI1B,CAAC"}

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,EAIb,MAAM,KAAK,CAAC;AAcb,OAAO,yDAAyD,CAAC;AAGjE,OAAO,EAIH,KAAK,WAAW,EACnB,MAAM,QAAQ,CAAC;AAGhB,cAAc,QAAQ,CAAC;AAEvB,QAAA,MAAM,iBAAiB,eAAe,CAAC;;AAGvC;;GAEG;AACH,qBAAa,SAAU,SAAQ,cAAqB,YAAW,WAAW;IACtE,MAAM,CAAC,iBAAiB;;;;MAA6D;IAI9E,IAAI,+BAAqB;IAGzB,QAAQ,UAAyB;IAIjC,MAAM,sBAAuB;IAG7B,aAAa,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAG5C,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAG1B,WAAW,EAAG,WAAW,CAAC;IAGjC,OAAO,CAAC,gBAAgB,CAAsB;IAG9C,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,mBAAmB;IAe3B,MAAM;IAwCN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;KAClC;CACJ"}

package/dist/pie-option/defs.d.ts

@@ -1,3 +0,0 @@
-export interface OptionProps {
-}
-//# sourceMappingURL=defs.d.ts.map

package/dist/pie-option/defs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/pie-option/defs.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,WAAW;CAC3B"}

package/dist/pie-option/index.d.ts

@@ -1,15 +0,0 @@
-import { LitElement } from 'lit';
-import { type OptionProps } from './defs';
-declare const componentSelector = "pie-option";
-/**
- * @tagname pie-option
- */
-export declare class PieOption extends LitElement implements OptionProps {
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: PieOption;
-    }
-}
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/pie-option/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pie-option/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC;;GAEG;AACH,qBAAa,SAAU,SAAQ,UAAW,YAAW,WAAW;CAE/D;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;KAClC;CACJ"}

package/dist/pie-option/index.js

@@ -1,9 +0,0 @@
-import { LitElement as e } from "lit";
-import { defineCustomElement as o } from "@justeattakeaway/pie-webc-core";
-const t = "pie-option";
-class n extends e {
-}
-o(t, n);
-export {
-  n as PieOption
-};

package/dist/pie-option/react.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { PieOption as PieOptionLit } from './index';
-import { type OptionProps } from './defs';
-export * from './defs';
-type ReactBaseType = React.HTMLAttributes<HTMLOptionElement>;
-export declare const PieOption: React.ForwardRefExoticComponent<OptionProps & React.RefAttributes<PieOptionLit> & ReactBaseType>;
-//# sourceMappingURL=react.d.ts.map

package/dist/pie-option/react.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/pie-option/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,cAAc,QAAQ,CAAC;AAUvB,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAE5D,eAAO,MAAM,SAAS,kGACkC,CAAC"}

package/dist/pie-option/react.js

@@ -1,13 +0,0 @@
-import * as e from "react";
-import { createComponent as t } from "@lit/react";
-import { PieOption as o } from "./index.js";
-const i = t({
-  displayName: "PieOption",
-  elementClass: o,
-  react: e,
-  tagName: "pie-option",
-  events: {}
-}), a = i;
-export {
-  a as PieOption
-};

package/dist/pie-option-group/defs.d.ts

@@ -1,3 +0,0 @@
-export interface OptionGroupProps {
-}
-//# sourceMappingURL=defs.d.ts.map

package/dist/pie-option-group/defs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/pie-option-group/defs.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,gBAAgB;CAChC"}

package/dist/pie-option-group/index.d.ts

@@ -1,15 +0,0 @@
-import { LitElement } from 'lit';
-import { type OptionGroupProps } from './defs';
-declare const componentSelector = "pie-option-group";
-/**
- * @tagname pie-option-group
- */
-export declare class PieOptionGroup extends LitElement implements OptionGroupProps {
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: PieOptionGroup;
-    }
-}
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/pie-option-group/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pie-option-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE/C,QAAA,MAAM,iBAAiB,qBAAqB,CAAC;AAE7C;;GAEG;AACH,qBAAa,cAAe,SAAQ,UAAW,YAAW,gBAAgB;CAEzE;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,cAAc,CAAC;KACvC;CACJ"}

package/dist/pie-option-group/index.js

@@ -1,9 +0,0 @@
-import { LitElement as o } from "lit";
-import { defineCustomElement as e } from "@justeattakeaway/pie-webc-core";
-const t = "pie-option-group";
-class n extends o {
-}
-e(t, n);
-export {
-  n as PieOptionGroup
-};

package/dist/pie-option-group/react.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { PieOptionGroup as PieOptionGroupLit } from './index';
-import { type OptionGroupProps } from './defs';
-export * from './defs';
-type ReactBaseType = React.HTMLAttributes<HTMLOptGroupElement>;
-export declare const PieOptionGroup: React.ForwardRefExoticComponent<OptionGroupProps & React.RefAttributes<PieOptionGroupLit> & ReactBaseType>;
-//# sourceMappingURL=react.d.ts.map

package/dist/pie-option-group/react.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/pie-option-group/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC9D,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE/C,cAAc,QAAQ,CAAC;AAUvB,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAA;AAE9D,eAAO,MAAM,cAAc,4GACkC,CAAC"}

package/dist/pie-option-group/react.js

@@ -1,13 +0,0 @@
-import * as o from "react";
-import { createComponent as e } from "@lit/react";
-import { PieOptionGroup as t } from "./index.js";
-const p = e({
-  displayName: "PieOptionGroup",
-  elementClass: t,
-  react: o,
-  tagName: "pie-option-group",
-  events: {}
-}), n = p;
-export {
-  n as PieOptionGroup
-};

package/dist/react.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,cAAc,QAAQ,CAAC;AAUvB,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAE5D,eAAO,MAAM,SAAS,kGACkC,CAAC"}

package/src/pie-option/defs-react.ts

@@ -1,3 +0,0 @@
-import type React from 'react';
-
-export type ReactBaseType = React.HTMLAttributes<HTMLOptionElement>

package/src/pie-option/defs.ts

@@ -1,3 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface OptionProps {
-}

package/src/pie-option/index.ts

@@ -1,20 +0,0 @@
-import { LitElement } from 'lit';
-import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
-import { type OptionProps } from './defs';
-
-const componentSelector = 'pie-option';
-
-/**
- * @tagname pie-option
- */
-export class PieOption extends LitElement implements OptionProps {
-
-}
-
-defineCustomElement(componentSelector, PieOption);
-
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: PieOption;
-    }
-}

package/src/pie-option-group/defs-react.ts

@@ -1,3 +0,0 @@
-import type React from 'react';
-
-export type ReactBaseType = React.HTMLAttributes<HTMLOptGroupElement>

package/src/pie-option-group/defs.ts

@@ -1,3 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface OptionGroupProps {
-}

package/src/pie-option-group/index.ts

@@ -1,20 +0,0 @@
-import { LitElement } from 'lit';
-import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
-import { type OptionGroupProps } from './defs';
-
-const componentSelector = 'pie-option-group';
-
-/**
- * @tagname pie-option-group
- */
-export class PieOptionGroup extends LitElement implements OptionGroupProps {
-
-}
-
-defineCustomElement(componentSelector, PieOptionGroup);
-
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: PieOptionGroup;
-    }
-}