@justeattakeaway/pie-text-input 0.23.6 → 0.24.1

package/dist/react.d.ts

@@ -12,7 +12,7 @@ import type { TemplateResult } from 'lit-html';
 /**
  * The default values for the `TextInputProps` that are required (i.e. they have a fallback value in the component).
  */
-declare type DefaultProps = ComponentDefaultProps<TextInputProps, 'type' | 'value' | 'size' | 'status'>;
+declare type DefaultProps = ComponentDefaultProps<TextInputProps, 'type' | 'value' | 'size' | 'status' | 'disabled' | 'readonly'>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -38,27 +38,27 @@ declare class PieTextInput_2 extends PieTextInput_base implements TextInputProps
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
     };
-    type?: "number" | "text" | "password" | "url" | "email" | "tel" | undefined;
+    type: "number" | "text" | "password" | "url" | "email" | "tel";
     value: string;
-    name?: TextInputProps['name'];
-    disabled?: TextInputProps['disabled'];
-    pattern?: TextInputProps['pattern'];
-    minlength?: TextInputProps['minlength'];
-    maxlength?: TextInputProps['maxlength'];
-    autocomplete?: TextInputProps['autocomplete'];
-    placeholder?: TextInputProps['placeholder'];
-    autoFocus?: TextInputProps['autoFocus'];
-    inputmode?: TextInputProps['inputmode'];
-    readonly?: TextInputProps['readonly'];
-    defaultValue?: TextInputProps['defaultValue'];
-    assistiveText?: TextInputProps['assistiveText'];
-    status?: TextInputProps['status'];
-    step?: TextInputProps['step'];
-    min?: TextInputProps['min'];
-    max?: TextInputProps['max'];
-    size?: TextInputProps['size'];
-    required?: TextInputProps['required'];
-    private input?;
+    name: TextInputProps['name'];
+    disabled: boolean;
+    pattern: TextInputProps['pattern'];
+    minlength: TextInputProps['minlength'];
+    maxlength: TextInputProps['maxlength'];
+    autocomplete: TextInputProps['autocomplete'];
+    placeholder: TextInputProps['placeholder'];
+    autoFocus: TextInputProps['autoFocus'];
+    inputmode: TextInputProps['inputmode'];
+    readonly: boolean;
+    defaultValue: TextInputProps['defaultValue'];
+    assistiveText: TextInputProps['assistiveText'];
+    status: "default" | "error" | "success";
+    step: TextInputProps['step'];
+    min: TextInputProps['min'];
+    max: TextInputProps['max'];
+    size: "small" | "medium" | "large";
+    required: boolean;
+    private input;
     focusTarget: HTMLElement;
     /**
      * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -77,7 +77,7 @@ declare class PieTextInput_2 extends PieTextInput_base implements TextInputProps
      * Resets the value to the default value.
      */
     formResetCallback(): void;
-    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(): void;
     protected updated(_changedProperties: PropertyValues<this>): void;
     /**
      * Handles data processing in response to the input event. The native input event is left to bubble up.

package/dist/react.js

@@ -1,14 +1,8 @@
 import * as t from "react";
 import { createComponent as e } from "@lit/react";
 import { PieTextInput as p } from "./index.js";
-import { defaultProps as T, inputModes as f, sizes as l, statusTypes as d, types as g } from "./index.js";
-import "lit";
-import "lit/decorators.js";
-import "lit/directives/if-defined.js";
-import "lit/directives/live.js";
-import "@justeattakeaway/pie-webc-core";
-import "@justeattakeaway/pie-assistive-text";
-const o = e({
+import { defaultProps as m, inputModes as u, sizes as x, statusTypes as c, types as I } from "./index.js";
+const n = e({
   displayName: "PieTextInput",
   elementClass: p,
   react: t,
@@ -19,12 +13,12 @@ const o = e({
     onChange: "change"
     // when the input value is changed.
   }
-}), c = o;
+}), a = n;
 export {
-  c as PieTextInput,
-  T as defaultProps,
-  f as inputModes,
-  l as sizes,
-  d as statusTypes,
-  g as types
+  a as PieTextInput,
+  m as defaultProps,
+  u as inputModes,
+  x as sizes,
+  c as statusTypes,
+  I as types
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-text-input",
   "description": "PIE Design System Input built using Web Components",
-  "version": "0.23.6",
+  "version": "0.24.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,14 +37,14 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.12.1",
-    "@justeattakeaway/pie-icons-webc": "0.25.1",
+    "@justeattakeaway/pie-css": "0.13.0",
+    "@justeattakeaway/pie-icons-webc": "0.25.2",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.7.1",
-    "@justeattakeaway/pie-webc-core": "0.24.0",
+    "@justeattakeaway/pie-assistive-text": "0.7.2",
+    "@justeattakeaway/pie-webc-core": "0.24.1",
     "element-internals-polyfill": "1.3.11"
   },
   "volta": {

package/src/defs-react.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>

package/src/defs.ts

@@ -115,7 +115,7 @@ export interface TextInputProps {
 /**
  * The default values for the `TextInputProps` that are required (i.e. they have a fallback value in the component).
  */
-type DefaultProps = ComponentDefaultProps<TextInputProps, 'type' | 'value' | 'size' | 'status'>;
+type DefaultProps = ComponentDefaultProps<TextInputProps, 'type' | 'value' | 'size' | 'status' | 'disabled' | 'readonly'>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -125,4 +125,6 @@ export const defaultProps: DefaultProps = {
     value: '',
     size: 'medium',
     status: 'default',
+    disabled: false,
+    readonly: false,
 };

package/src/index.ts

@@ -1,8 +1,9 @@
 import {
-    LitElement, html, unsafeCSS, PropertyValues, nothing,
+    LitElement, html, unsafeCSS, type PropertyValues, nothing,
 } from 'lit';
 import { property, query } 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 {
@@ -12,7 +13,7 @@ import '@justeattakeaway/pie-assistive-text';
 
 import styles from './text-input.scss?inline';
 import {
-    types, statusTypes, TextInputProps, defaultProps,
+    type TextInputProps, types, statusTypes, defaultProps,
 } from './defs';
 import 'element-internals-polyfill';
 
@@ -36,68 +37,68 @@ export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) impleme
 
     @property({ type: String, reflect: true })
     @validPropertyValues(componentSelector, types, defaultProps.type)
-    public type? = defaultProps.type;
+    public type = defaultProps.type;
 
     @property({ type: String })
     public value = defaultProps.value;
 
     @property({ type: String })
-    public name?: TextInputProps['name'];
+    public name: TextInputProps['name'];
 
     @property({ type: Boolean, reflect: true })
-    public disabled?: TextInputProps['disabled'];
+    public disabled = defaultProps.disabled;
 
     @property({ type: String })
-    public pattern?: TextInputProps['pattern'];
+    public pattern: TextInputProps['pattern'];
 
     @property({ type: Number })
-    public minlength?: TextInputProps['minlength'];
+    public minlength: TextInputProps['minlength'];
 
     @property({ type: Number })
-    public maxlength?: TextInputProps['maxlength'];
+    public maxlength: TextInputProps['maxlength'];
 
     @property({ type: String })
-    public autocomplete?: TextInputProps['autocomplete'];
+    public autocomplete: TextInputProps['autocomplete'];
 
     @property({ type: String })
-    public placeholder?: TextInputProps['placeholder'];
+    public placeholder: TextInputProps['placeholder'];
 
     @property({ type: Boolean })
-    public autoFocus?: TextInputProps['autoFocus'];
+    public autoFocus: TextInputProps['autoFocus'];
 
     @property({ type: String })
-    public inputmode?: TextInputProps['inputmode'];
+    public inputmode: TextInputProps['inputmode'];
 
     @property({ type: Boolean })
-    public readonly?: TextInputProps['readonly'];
+    public readonly = defaultProps.readonly;
 
     @property({ type: String })
-    public defaultValue?: TextInputProps['defaultValue'];
+    public defaultValue: TextInputProps['defaultValue'];
 
     @property({ type: String })
-    public assistiveText?: TextInputProps['assistiveText'];
+    public assistiveText: TextInputProps['assistiveText'];
 
     @property({ type: String })
     @validPropertyValues(componentSelector, statusTypes, defaultProps.status)
-    public status?: TextInputProps['status'] = defaultProps.status;
+    public status = defaultProps.status;
 
     @property({ type: Number })
-    public step?: TextInputProps['step'];
+    public step: TextInputProps['step'];
 
     @property({ type: Number })
-    public min?: TextInputProps['min'];
+    public min: TextInputProps['min'];
 
     @property({ type: Number })
-    public max?: TextInputProps['max'];
+    public max: TextInputProps['max'];
 
     @property({ type: String })
-    public size?: TextInputProps['size'] = defaultProps.size;
+    public size = defaultProps.size;
 
     @property({ type: Boolean })
-    public required?: TextInputProps['required'] = false;
+    public required = false;
 
     @query('input')
-    private input?: HTMLInputElement;
+    private input!: HTMLInputElement;
 
     @query('input')
     public focusTarget!: HTMLElement;
@@ -107,7 +108,7 @@ export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) impleme
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
      */
     public get validity (): ValidityState {
-        return (this.input as HTMLInputElement).validity;
+        return this.input.validity;
     }
 
     /**
@@ -129,21 +130,16 @@ export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) impleme
 
         // This ensures the input value is updated when the form is reset.
         // Otherwise there is a bug where values like 'e1212' for number inputs do not correctly reset.
-        if (this.input) {
-            this.input.value = this.value;
-        }
+        this.input.value = this.value;
 
         this._internals.setFormValue(this.value);
     }
 
-    protected firstUpdated (_changedProperties: PropertyValues<this>): void {
-        super.firstUpdated(_changedProperties);
+    protected firstUpdated (): void {
         this._internals.setFormValue(this.value);
     }
 
     protected updated (_changedProperties: PropertyValues<this>): void {
-        super.updated(_changedProperties);
-
         if (_changedProperties.has('value')) {
             this._internals.setFormValue(this.value);
         }
@@ -195,14 +191,18 @@ export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) impleme
             required,
         } = this;
 
+        const classes : ClassInfo = {
+            'c-textInput': true,
+            [`c-textInput--${size}`]: true,
+            [`c-textInput--${status}`]: true,
+            'c-textInput--disabled': disabled,
+            'c-textInput--readonly': readonly,
+        };
+
         return html`
             <div
-                class="c-textInput"
-                data-test-id="pie-text-input-shell"
-                data-pie-size=${ifDefined(size)}
-                data-pie-status=${ifDefined(status)}
-                ?data-pie-disabled=${live(disabled)}
-                ?data-pie-readonly=${readonly}>
+                class="${classMap(classes)}"
+                data-test-id="pie-text-input-shell">
                 <!-- The reason for separate slots for icons and text is that we cannot programmatically be aware of the
                 HTML used inside of the slot without breaking SSR in consuming applications (icons need to use different colours than text content)
                 Therefore, we provide two slots and advise consumers do not attempt to use both leading/trailing at the same time

package/src/text-input.scss

@@ -6,7 +6,7 @@
     --input-gap: var(--dt-spacing-d);
     --input-text-color: var(--dt-color-content-default);
     --input-text-color-leading-trailing-content: var(--dt-color-content-default);
-    --input-text-color-placeholder: var(--dt-color-content-subdued);
+    --input-text-color-placeholder: var(--dt-color-content-placeholder);
     --input-border-color: var(--dt-color-interactive-form);
     --input-container-color: var(--dt-color-container-default);
     --input-radius: var(--dt-radius-rounded-c);
@@ -34,17 +34,17 @@
     color: var(--input-text-color-leading-trailing-content); // Applies to the leadingText and trailingText slot content
     cursor: var(--input-cursor);
 
-    &[data-pie-size="large"] {
+    &.c-textInput--large {
         --input-padding-block: var(--dt-spacing-d);
         --input-height: 56px;
     }
 
-    &[data-pie-size="small"] {
+    &.c-textInput--small {
         --input-padding-block: var(--dt-spacing-b);
         --input-height: 40px;
     }
 
-    &[data-pie-status="error"] {
+    &.c-textInput--error {
         --input-border-color: var(--dt-color-support-error);
     }
 
@@ -72,8 +72,8 @@
         }
     }
 
-    &:not([data-pie-disabled]) ::slotted([slot="leadingIcon"]),
-    &:not([data-pie-disabled]) ::slotted([slot="trailingIcon"]) {
+    &:not(.c-textInput--disabled) ::slotted([slot="leadingIcon"]),
+    &:not(.c-textInput--disabled) ::slotted([slot="trailingIcon"]) {
         color: var(--dt-color-content-subdued);
     }
 
@@ -83,14 +83,14 @@
         }
     }
 
-    &[data-pie-readonly] {
+    &.c-textInput--readonly {
         --input-container-color: var(--dt-color-container-subtle);
         --input-border-color: var(--dt-color-interactive-form);
     }
 
     // Ensure that if an input is readonly and disabled, the disabled styles take precedence
-    &[data-pie-disabled][data-pie-readonly],
-    &[data-pie-disabled]{
+    &.c-textInput--disabled.c-textInput--readonly,
+    &.c-textInput--disabled {
         --input-container-color: var(--dt-color-disabled-01);
         --input-border-color: var(--dt-color-disabled-01);
         --input-text-color: var(--dt-color-content-disabled);