@justeattakeaway/pie-select 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,104 +1,171 @@
-import { LitElement as u, nothing as x, html as b, unsafeCSS as y } from "lit";
-import { RtlMixin as I, validPropertyValues as f, defineCustomElement as k } from "@justeattakeaway/pie-webc-core";
-import { property as c, query as z, queryAssignedElements as $, state as w } from "lit/decorators.js";
-import { ifDefined as d } from "lit/directives/if-defined.js";
-import { classMap as _ } from "lit/directives/class-map.js";
+import { LitElement as b, html as c, nothing as _, unsafeCSS as $ } from "lit";
+import { FormControlMixin as I, RtlMixin as k, wrapNativeEvent as z, validPropertyValues as f, defineCustomElement as w } from "@justeattakeaway/pie-webc-core";
+import { property as l, query as m, queryAssignedElements as C, state as L } from "lit/decorators.js";
+import { ifDefined as n } from "lit/directives/if-defined.js";
+import { classMap as S } from "lit/directives/class-map.js";
+import { live as T } from "lit/directives/live.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronDown.js";
-const L = "*,*:after,*:before{box-sizing:inherit}.c-select{--select-padding-block: var(--dt-spacing-c);--select-padding-inline-start: var(--dt-spacing-d);--select-padding-inline-end: var(--dt-spacing-h);--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-size:inherit;line-height:inherit;color:inherit;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--select-cursor)}.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}", T = ["small", "medium", "large"], S = ["default", "error"], i = {
+import "@justeattakeaway/pie-assistive-text";
+const E = "*,*:after,*:before{box-sizing:inherit}.c-select{--select-padding-block: var(--dt-spacing-c);--select-padding-inline-start: var(--dt-spacing-d);--select-padding-inline-end: var(--dt-spacing-h);--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-size:inherit;line-height:inherit;color:inherit;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--select-cursor)}.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}", A = ["small", "medium", "large"], F = ["default", "error"], r = {
   size: "medium",
   status: "default",
-  disabled: !1
+  disabled: !1,
+  options: []
 };
-var C = Object.defineProperty, s = (h, a, o, n) => {
-  for (var t = void 0, r = h.length - 1, l; r >= 0; r--)
-    (l = h[r]) && (t = l(a, o, t) || t);
-  return t && C(a, o, t), t;
+var V = Object.defineProperty, o = (v, t, e, d) => {
+  for (var i = void 0, a = v.length - 1, p; a >= 0; a--)
+    (p = v[a]) && (i = p(t, e, i) || i);
+  return i && V(t, e, i), i;
 };
-const v = "pie-select", g = "assistive-text", p = class p extends I(u) {
+const g = "pie-select", u = "assistive-text", h = class h extends I(k(b)) {
   constructor() {
-    super(...arguments), this.size = i.size, this.disabled = i.disabled, this.status = i.status, this._hasLeadingIcon = !1;
+    super(...arguments), this.size = r.size, this.disabled = r.disabled, this.status = r.status, this.options = r.options, this._hasLeadingIcon = !1, this._handleChange = (t) => {
+      const e = z(t);
+      this.dispatchEvent(e), this._internals.setFormValue(this._select.value);
+    };
+  }
+  firstUpdated() {
+    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
+   */
+  get validity() {
+    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.
+   */
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
+  /**
+   * Called when the form that owns this component is reset.
+   * Resets the value to the default select value.
+   */
+  formResetCallback() {
+    const t = this._select.querySelector("option[selected]");
+    this._select.value = (t == null ? void 0 : t.getAttribute("value")) ?? "", this._select.selectedIndex = t ? this._select.selectedIndex : 0, this._internals.setFormValue(this._select.value);
   }
   _handleLeadingIconSlotchange() {
     this._hasLeadingIcon = !!this._leadingIconSlot.length;
   }
+  /**
+   * Renders the options from the options property
+   * @param options - The options to render
+   * @returns A template result with the rendered options
+   */
+  renderChildren(t) {
+    return c`
+            ${t.map((e) => e.tag === "optgroup" ? c`
+                        <optgroup
+                            ?disabled="${e.disabled}"
+                            label="${n(e.label)}">
+                            ${this.renderChildren(e.options)}
+                        </optgroup>
+                    ` : c`
+                    <option
+                        .value="${T(e.value)}"
+                        ?disabled="${e.disabled}"
+                        ?selected="${e.selected}">
+                        ${e.text}
+                    </option>
+                `)}
+        `;
+  }
+  /**
+   * Renders the assistive text if available.
+   * @returns A template result with the assistive text
+   */
   renderAssistiveText() {
-    return this.assistiveText ? b`
+    return this.assistiveText ? c`
             <pie-assistive-text
-                id="${g}"
-                variant=${d(this.status)}
-                data-test-id="pie-textarea-assistive-text">
+                id="${u}"
+                variant="${n(this.status)}"
+                data-test-id="pie-select-assistive-text">
                 ${this.assistiveText}
             </pie-assistive-text>
-        ` : x;
+        ` : _;
   }
   render() {
     const {
-      assistiveText: a,
-      disabled: o,
-      status: n,
-      size: t,
-      name: r,
-      _hasLeadingIcon: l
-    } = this, m = {
+      assistiveText: t,
+      disabled: e,
+      status: d,
+      size: i,
+      name: a,
+      options: p,
+      _hasLeadingIcon: x
+    } = this, y = {
       "c-select": !0,
-      [`c-select--${t}`]: !0,
-      [`c-select--${n}`]: !0,
-      "c-select--withLeadingIcon": l,
-      "is-disabled": o
+      [`c-select--${i}`]: !0,
+      [`c-select--${d}`]: !0,
+      "c-select--withLeadingIcon": x,
+      "is-disabled": e
     };
-    return b`
+    return c`
             <div
-                class="${_(m)}"
+                class="${S(y)}"
                 data-test-id="pie-select-shell">
-                    <slot name="leadingIcon" @slotchange=${this._handleLeadingIconSlotchange}></slot>
-                    <select
-                        name=${d(r)}
-                        ?disabled=${o}
-                        aria-describedby=${d(a ? g : void 0)}
-                        aria-invalid=${n === "error" ? "true" : "false"}
-                        aria-errormessage="${d(n === "error" ? g : void 0)}">
-                        <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="${n(a)}"
+                    ?disabled="${e}"
+                    aria-describedby="${n(t ? u : void 0)}"
+                    aria-invalid="${d === "error" ? "true" : "false"}"
+                    aria-errormessage="${n(d === "error" ? u : void 0)}"
+                    @change=${this._handleChange}>
+                    ${this.renderChildren(p)}
+                </select>
+                <icon-chevron-down size='s' class='c-select-trailingIcon'></icon-chevron-down>
             </div>
             ${this.renderAssistiveText()}
         `;
   }
 };
-p.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 }, p.styles = y(L);
-let e = p;
-s([
-  c({ type: String }),
-  f(v, T, i.size)
-], e.prototype, "size");
-s([
-  c({ type: Boolean })
-], e.prototype, "disabled");
-s([
-  c({ type: String }),
-  f(v, S, i.status)
-], e.prototype, "status");
-s([
-  c({ type: String })
-], e.prototype, "assistiveText");
-s([
-  c({ type: String })
-], e.prototype, "name");
-s([
-  z("select")
-], e.prototype, "focusTarget");
-s([
-  $({ slot: "leadingIcon", flatten: !0 })
-], e.prototype, "_leadingIconSlot");
-s([
-  w()
-], e.prototype, "_hasLeadingIcon");
-k(v, e);
+h.shadowRootOptions = { ...b.shadowRootOptions, delegatesFocus: !0 }, h.styles = $(E);
+let s = h;
+o([
+  l({ type: String }),
+  f(g, A, r.size)
+], s.prototype, "size");
+o([
+  l({ type: Boolean })
+], s.prototype, "disabled");
+o([
+  l({ type: String }),
+  f(g, F, r.status)
+], s.prototype, "status");
+o([
+  l({ type: String })
+], s.prototype, "assistiveText");
+o([
+  l({ type: String })
+], s.prototype, "name");
+o([
+  l({ type: Array })
+], s.prototype, "options");
+o([
+  m("select")
+], s.prototype, "focusTarget");
+o([
+  m("select")
+], s.prototype, "_select");
+o([
+  C({ slot: "leadingIcon", flatten: !0 })
+], s.prototype, "_leadingIconSlot");
+o([
+  L()
+], s.prototype, "_hasLeadingIcon");
+w(g, s);
 export {
-  e as PieSelect,
-  i as defaultProps,
-  T as sizes,
-  S as statusTypes
+  s as PieSelect,
+  r as defaultProps,
+  A as sizes,
+  F as statusTypes
 };

package/dist/react.d.ts

@@ -1,7 +1,156 @@
-import * as React from 'react';
-import { PieSelect as PieSelectLit } from './index';
-import { type SelectProps } from './defs';
-export * from './defs';
-type ReactBaseType = React.HTMLAttributes<HTMLSelectElement>;
-export declare const PieSelect: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<PieSelectLit> & ReactBaseType>;
-//# sourceMappingURL=react.d.ts.map
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+import type { CSSResult } from 'lit';
+import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
+import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
+import type { LitElement } from 'lit';
+import * as React_2 from 'react';
+import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
+import type { TemplateResult } from 'lit';
+
+declare type DefaultProps = ComponentDefaultProps<SelectProps, keyof Omit<SelectProps, 'name' | 'assistiveText'>>;
+
+export declare const defaultProps: DefaultProps;
+
+export declare const PieSelect: React_2.ForwardRefExoticComponent<SelectProps & React_2.RefAttributes<PieSelect_2> & PieSelectEvents & ReactBaseType>;
+
+/**
+ * @tagname pie-select
+ * @event {CustomEvent} change - when the selected option is changed.
+ */
+declare class PieSelect_2 extends PieSelect_base implements SelectProps {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    size: "small" | "medium" | "large";
+    disabled: boolean;
+    status: "default" | "error";
+    assistiveText: SelectProps['assistiveText'];
+    name: SelectProps['name'];
+    options: SelectProps['options'];
+    focusTarget: HTMLSelectElement;
+    private _select;
+    private _leadingIconSlot;
+    private _hasLeadingIcon;
+    protected firstUpdated(): void;
+    /**
+     * (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
+     */
+    get validity(): ValidityState;
+    /**
+     * 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.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Called when the form that owns this component is reset.
+     * Resets the value to the default select value.
+     */
+    formResetCallback(): void;
+    /**
+     * Captures the native change event and wraps it in a custom event.
+     * @param event - The change event.
+     */
+    private _handleChange;
+    private _handleLeadingIconSlotchange;
+    /**
+     * Renders the options from the options property
+     * @param options - The options to render
+     * @returns A template result with the rendered options
+     */
+    private renderChildren;
+    /**
+     * Renders the assistive text if available.
+     * @returns A template result with the assistive text
+     */
+    private renderAssistiveText;
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+declare const PieSelect_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
+
+declare type PieSelectEvents = {
+    onChange?: (event: CustomEvent) => void;
+};
+
+declare type ReactBaseType = React_2.HTMLAttributes<HTMLSelectElement>;
+
+declare interface SelectOptionGroupProps {
+    /**
+     * What HTML element the option should be such option or optgroup.
+     */
+    tag: 'optgroup';
+    /**
+     * The label for the select option group.
+     */
+    label?: string;
+    /**
+     * The options within the select option group.
+     */
+    options: SelectOptionProps[];
+    /**
+     * Same as the HTML disabled attribute - indicates whether the select option group is disabled.
+     */
+    disabled?: boolean;
+}
+
+declare interface SelectOptionProps {
+    /**
+     * What HTML element the option should be such option or optgroup.
+     */
+    tag: 'option';
+    /**
+     * The text content to display for the select option.
+     */
+    text: string;
+    /**
+     * The value of the select option (used as a key/value pair in HTML forms with `name`).
+     */
+    value?: string;
+    /**
+     * Same as the HTML disabled attribute - indicates whether the select option is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Same as the HTML selected attribute - indicates whether the select option is selected by default when the page first loads.
+     */
+    selected?: boolean;
+}
+
+export declare 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 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;
+    /**
+     * The options to display in the select. Can be an array of option objects or option group objects.
+     */
+    options: (SelectOptionProps | SelectOptionGroupProps)[];
+}
+
+export declare const sizes: readonly ["small", "medium", "large"];
+
+export declare const statusTypes: readonly ["default", "error"];
+
+export { }

package/dist/react.js

@@ -1,13 +1,16 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
-import { PieSelect as s } from "./index.js";
+import { PieSelect as a } from "./index.js";
 import { defaultProps as l, sizes as p, statusTypes as n } from "./index.js";
 const o = t({
   displayName: "PieSelect",
-  elementClass: s,
+  elementClass: a,
   react: e,
   tagName: "pie-select",
-  events: {}
+  events: {
+    onChange: "change"
+    // when the selected option is changed.
+  }
 }), r = o;
 export {
   r as PieSelect,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-select",
   "description": "PIE Design System Select built using Web Components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -38,6 +38,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
+    "@justeattakeaway/pie-assistive-text": "0.8.5",
     "@justeattakeaway/pie-webc-core": "0.24.2"
   },
   "volta": {

package/src/defs.ts

@@ -4,6 +4,55 @@ export const sizes = ['small', 'medium', 'large'] as const;
 
 export const statusTypes = ['default', 'error'] as const;
 
+interface SelectOptionProps {
+   /**
+     * What HTML element the option should be such option or optgroup.
+     */
+    tag: 'option';
+
+    /**
+     * The text content to display for the select option.
+     */
+    text: string;
+
+    /**
+     * The value of the select option (used as a key/value pair in HTML forms with `name`).
+     */
+    value?: string;
+
+    /**
+     * Same as the HTML disabled attribute - indicates whether the select option is disabled.
+     */
+    disabled?: boolean;
+
+    /**
+     * Same as the HTML selected attribute - indicates whether the select option is selected by default when the page first loads.
+     */
+    selected?: boolean;
+}
+
+interface SelectOptionGroupProps {
+    /**
+     * What HTML element the option should be such option or optgroup.
+     */
+    tag: 'optgroup';
+
+    /**
+     * The label for the select option group.
+     */
+    label?: string;
+
+    /**
+     * The options within the select option group.
+     */
+    options: SelectOptionProps[];
+
+    /**
+     * Same as the HTML disabled attribute - indicates whether the select option group is disabled.
+     */
+    disabled?: boolean;
+}
+
 export interface SelectProps {
     /**
      * The size of the select component. Can be `small`, `medium` or `large`. Defaults to `medium`.
@@ -16,7 +65,7 @@ export interface SelectProps {
     disabled?: boolean;
 
     /**
-     * An optional assistive text to display below the select element. Must be provided when the status is success or error.
+     * An optional assistive text to display below the select element. Must be provided when the status is error.
      */
     assistiveText?: string;
 
@@ -29,12 +78,18 @@ export interface SelectProps {
      * 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;
+
+    /**
+     * The options to display in the select. Can be an array of option objects or option group objects.
+     */
+    options: (SelectOptionProps | SelectOptionGroupProps)[];
 }
 
-type DefaultProps = ComponentDefaultProps<SelectProps, keyof Omit<SelectProps, 'name' | 'assistiveText' >>;
+type DefaultProps = ComponentDefaultProps<SelectProps, keyof Omit<SelectProps, 'name' | 'assistiveText'>>;
 
 export const defaultProps: DefaultProps = {
     size: 'medium',
     status: 'default',
     disabled: false,
+    options: [],
 };