@justeattakeaway/pie-select 0.2.0 → 0.3.0

package/custom-elements.json

@@ -34,7 +34,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    size: 'medium',\n    status: 'default',\n    disabled: false,\n}"
+          "default": "{\n    size: 'medium',\n    status: 'default',\n    disabled: false,\n    options: [],\n}"
         }
       ],
       "exports": [
@@ -118,14 +118,31 @@
               "privacy": "public",
               "attribute": "name"
             },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "SelectProps['options']"
+              },
+              "privacy": "public",
+              "attribute": "options"
+            },
             {
               "kind": "field",
               "name": "focusTarget",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLSelectElement"
               },
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "_select",
+              "type": {
+                "text": "HTMLSelectElement"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_leadingIconSlot",
@@ -143,15 +160,103 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "privacy": "public",
+              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The latest disabled state of the select."
+                }
+              ],
+              "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Called when the form that owns this component is reset.\nResets the value to the default select value."
+            },
+            {
+              "kind": "field",
+              "name": "_handleChange",
+              "privacy": "private",
+              "description": "Captures the native change event and wraps it in a custom event.",
+              "parameters": [
+                {
+                  "description": "The change event.",
+                  "name": "event"
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_handleLeadingIconSlotchange",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "renderChildren",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "SelectProps['options']"
+                  },
+                  "description": "The options to render"
+                }
+              ],
+              "description": "Renders the options from the options property"
+            },
             {
               "kind": "method",
               "name": "renderAssistiveText",
-              "privacy": "private"
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Renders the assistive text if available."
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "when the selected option is changed.",
+              "name": "change"
             }
           ],
           "attributes": [
@@ -180,9 +285,20 @@
                 "text": "SelectProps['name']"
               },
               "fieldName": "name"
+            },
+            {
+              "name": "options",
+              "type": {
+                "text": "SelectProps['options']"
+              },
+              "fieldName": "options"
             }
           ],
           "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@justeattakeaway/pie-webc-core"
+            },
             {
               "name": "RtlMixin",
               "package": "@justeattakeaway/pie-webc-core"
@@ -214,84 +330,6 @@
           }
         }
       ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/pie-option/defs-react.js",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/pie-option/defs.js",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/pie-option/index.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PieOption",
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "pie-option",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "PieOption",
-          "declaration": {
-            "name": "PieOption",
-            "module": "src/pie-option/index.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/pie-option-group/defs-react.js",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/pie-option-group/defs.js",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/pie-option-group/index.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PieOptionGroup",
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "pie-option-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "PieOptionGroup",
-          "declaration": {
-            "name": "PieOptionGroup",
-            "module": "src/pie-option-group/index.js"
-          }
-        }
-      ]
     }
   ]
 }

package/dist/index.d.ts

@@ -1,33 +1,147 @@
-import { LitElement } from 'lit';
-import { type SelectProps } from './defs';
-export * from './defs';
-declare const componentSelector = "pie-select";
-declare const PieSelect_base: import("@justeattakeaway/pie-webc-core").GenericConstructor<import("@justeattakeaway/pie-webc-core").RTLInterface> & typeof LitElement;
-/**
- * @tagname pie-select
- */
-export declare class PieSelect 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'];
-    focusTarget: HTMLElement;
-    private _leadingIconSlot;
-    private _hasLeadingIcon;
-    private _handleLeadingIconSlotchange;
-    private renderAssistiveText;
-    render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: PieSelect;
-    }
-}
-//# sourceMappingURL=index.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 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;
+
+/**
+ * @tagname pie-select
+ * @event {CustomEvent} change - when the selected option is changed.
+ */
+export declare class PieSelect 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 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 { }