@justeattakeaway/pie-text-input 0.28.8 → 0.28.10

package/README.md

@@ -22,6 +22,8 @@
   - [Displaying error messages](#displaying-error-messages)
   - [Labelling](#labelling)
 - [Usage Examples](#usage-examples)
+- [Pitfalls](#pitfalls)
+  - [Controlled input values](#controlled-input-values)
 - [Questions and Support](#questions-and-support)
 - [Contributing](#contributing)
 
@@ -281,6 +283,27 @@ import { IconPlaceholder } from '@justeattakeaway/pie-icons-webc/dist/react/Icon
   <IconPlaceholder slot="leadingIcon"></IconPlaceholder>
 </PieTextInput>
 ```
+## Pitfalls
+
+### Controlled input values
+
+If we want to add a constraint to what the user can input, then on input/change we perform the condition check and if it succeeds, update the input value. If it fails, then manually assign event.target.value to the last known valid input to prevent it from updating.
+
+> This will need to be done regardless of application framework used.
+
+Example:
+
+```js
+const onInput = (event) => {
+  // For example, users can type only uppercase letters
+  const value = event.target.value
+  if (value === value.toUpperCase()) {
+    inputValue.value = value
+  } else {
+    event.target.value = inputValue.value
+  }
+}
+```
 
 ## Questions and Support
 

package/custom-elements.json

@@ -136,15 +136,12 @@
             {
               "kind": "field",
               "name": "type",
-              "privacy": "public",
-              "attribute": "type",
-              "reflects": true
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "value",
-              "privacy": "public",
-              "attribute": "value"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -152,16 +149,12 @@
               "type": {
                 "text": "TextInputProps['name']"
               },
-              "privacy": "public",
-              "attribute": "name",
-              "reflects": true
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "disabled",
-              "privacy": "public",
-              "attribute": "disabled",
-              "reflects": true
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -169,8 +162,7 @@
               "type": {
                 "text": "TextInputProps['pattern']"
               },
-              "privacy": "public",
-              "attribute": "pattern"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -178,8 +170,7 @@
               "type": {
                 "text": "TextInputProps['minlength']"
               },
-              "privacy": "public",
-              "attribute": "minlength"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -187,8 +178,7 @@
               "type": {
                 "text": "TextInputProps['maxlength']"
               },
-              "privacy": "public",
-              "attribute": "maxlength"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -196,8 +186,7 @@
               "type": {
                 "text": "TextInputProps['autocomplete']"
               },
-              "privacy": "public",
-              "attribute": "autocomplete"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -205,8 +194,7 @@
               "type": {
                 "text": "TextInputProps['placeholder']"
               },
-              "privacy": "public",
-              "attribute": "placeholder"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -214,8 +202,7 @@
               "type": {
                 "text": "TextInputProps['autoFocus']"
               },
-              "privacy": "public",
-              "attribute": "autoFocus"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -223,14 +210,12 @@
               "type": {
                 "text": "TextInputProps['inputmode']"
               },
-              "privacy": "public",
-              "attribute": "inputmode"
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "readonly",
-              "privacy": "public",
-              "attribute": "readonly"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -238,8 +223,7 @@
               "type": {
                 "text": "TextInputProps['defaultValue']"
               },
-              "privacy": "public",
-              "attribute": "defaultValue"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -247,14 +231,12 @@
               "type": {
                 "text": "TextInputProps['assistiveText']"
               },
-              "privacy": "public",
-              "attribute": "assistiveText"
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "status",
-              "privacy": "public",
-              "attribute": "status"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -262,8 +244,7 @@
               "type": {
                 "text": "TextInputProps['step']"
               },
-              "privacy": "public",
-              "attribute": "step"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -271,8 +252,7 @@
               "type": {
                 "text": "TextInputProps['min']"
               },
-              "privacy": "public",
-              "attribute": "min"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -280,14 +260,12 @@
               "type": {
                 "text": "TextInputProps['max']"
               },
-              "privacy": "public",
-              "attribute": "max"
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "size",
-              "privacy": "public",
-              "attribute": "size"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -296,8 +274,7 @@
                 "text": "boolean"
               },
               "privacy": "public",
-              "default": "false",
-              "attribute": "required"
+              "default": "false"
             },
             {
               "kind": "field",
@@ -397,131 +374,6 @@
               "name": "change"
             }
           ],
-          "attributes": [
-            {
-              "name": "type",
-              "fieldName": "type"
-            },
-            {
-              "name": "value",
-              "fieldName": "value"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "TextInputProps['name']"
-              },
-              "fieldName": "name"
-            },
-            {
-              "name": "disabled",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "pattern",
-              "type": {
-                "text": "TextInputProps['pattern']"
-              },
-              "fieldName": "pattern"
-            },
-            {
-              "name": "minlength",
-              "type": {
-                "text": "TextInputProps['minlength']"
-              },
-              "fieldName": "minlength"
-            },
-            {
-              "name": "maxlength",
-              "type": {
-                "text": "TextInputProps['maxlength']"
-              },
-              "fieldName": "maxlength"
-            },
-            {
-              "name": "autocomplete",
-              "type": {
-                "text": "TextInputProps['autocomplete']"
-              },
-              "fieldName": "autocomplete"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "TextInputProps['placeholder']"
-              },
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "autoFocus",
-              "type": {
-                "text": "TextInputProps['autoFocus']"
-              },
-              "fieldName": "autoFocus"
-            },
-            {
-              "name": "inputmode",
-              "type": {
-                "text": "TextInputProps['inputmode']"
-              },
-              "fieldName": "inputmode"
-            },
-            {
-              "name": "readonly",
-              "fieldName": "readonly"
-            },
-            {
-              "name": "defaultValue",
-              "type": {
-                "text": "TextInputProps['defaultValue']"
-              },
-              "fieldName": "defaultValue"
-            },
-            {
-              "name": "assistiveText",
-              "type": {
-                "text": "TextInputProps['assistiveText']"
-              },
-              "fieldName": "assistiveText"
-            },
-            {
-              "name": "status",
-              "fieldName": "status"
-            },
-            {
-              "name": "step",
-              "type": {
-                "text": "TextInputProps['step']"
-              },
-              "fieldName": "step"
-            },
-            {
-              "name": "min",
-              "type": {
-                "text": "TextInputProps['min']"
-              },
-              "fieldName": "min"
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "TextInputProps['max']"
-              },
-              "fieldName": "max"
-            },
-            {
-              "name": "size",
-              "fieldName": "size"
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "required"
-            }
-          ],
           "mixins": [
             {
               "name": "FormControlMixin",

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 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 { CSSResult } from 'lit';
+import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
+import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import type { PIEInputElement } from '@justeattakeaway/pie-webc-core';
-import type { PropertyValues } from 'lit';
-import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
-import type { TemplateResult } from 'lit-html';
+import { PIEInputElement } from '@justeattakeaway/pie-webc-core';
+import { PropertyValues } from 'lit';
+import { RTLInterface } from '@justeattakeaway/pie-webc-core';
+import { TemplateResult } from 'lit-html';
 
 /**
  * The default values for the `TextInputProps` that are required (i.e. they have a fallback value in the component).
@@ -33,7 +33,8 @@ export declare class PieTextInput extends PieTextInput_base implements TextInput
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
     };
     type: "number" | "text" | "password" | "url" | "email" | "tel";
     value: string;

package/dist/index.js

@@ -10,7 +10,7 @@ const z = class z extends ft {
     this.getAttribute("v") || this.setAttribute("v", z.v);
   }
 };
-z.v = "0.28.8";
+z.v = "0.28.10";
 let X = z;
 const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInput{--input-padding-block: var(--dt-spacing-c);--input-padding-inline: var(--dt-spacing-d);--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-placeholder);--input-border-color: var(--dt-color-border-form);--input-container-color: var(--dt-color-container-default);--input-radius: var(--dt-radius-rounded-c);--input-font-size: calc(var(--dt-font-body-l-size) * 1px);--input-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--input-height: 48px;--input-cursor: text;--icon-display-override: block;--icon-size-override: 24px;height:var(--input-height);border:1px solid var(--input-border-color);border-radius:var(--input-radius);padding-inline-start:var(--input-padding-inline);padding-inline-end:var(--input-padding-inline);padding-block-start:var(--input-padding-block);padding-block-end:var(--input-padding-block);font-size:var(--input-font-size);line-height:var(--input-line-height);display:flex;flex-wrap:nowrap;align-items:center;background-color:var(--input-container-color);color:var(--input-text-color-leading-trailing-content);cursor:var(--input-cursor)}.c-textInput.c-textInput--large{--input-padding-block: var(--dt-spacing-d);--input-height: 56px}.c-textInput.c-textInput--small{--input-padding-block: var(--dt-spacing-b);--input-height: 40px}.c-textInput.c-textInput--error{--input-border-color: var(--dt-color-support-error)}.c-textInput ::slotted([slot=leadingText]),.c-textInput ::slotted([slot=leadingIcon]){margin-inline-end:var(--input-gap)}.c-textInput ::slotted([slot=trailingText]),.c-textInput ::slotted([slot=trailingIcon]){margin-inline-start:var(--input-gap)}@supports (gap: var(--input-gap)){.c-textInput{gap:var(--input-gap)}.c-textInput ::slotted([slot=leadingText]),.c-textInput ::slotted([slot=leadingIcon]){margin-inline-end:0}.c-textInput ::slotted([slot=trailingText]),.c-textInput ::slotted([slot=trailingIcon]){margin-inline-start:0}}.c-textInput:not(.is-disabled) ::slotted([slot=leadingIcon]),.c-textInput:not(.is-disabled) ::slotted([slot=trailingIcon]){color:var(--dt-color-content-subdued)}@media (hover: hover){.c-textInput:hover{--input-container-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-textInput:hover{--input-container-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-textInput.c-textInput--readonly{--input-container-color: var(--dt-color-container-subtle);--input-border-color: var(--dt-color-border-form)}.c-textInput.is-disabled.c-textInput--readonly,.c-textInput.is-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);--input-text-color-placeholder: var(--dt-color-content-disabled);--input-text-color-leading-trailing-content: var(--dt-color-content-disabled);--input-cursor: auto}.c-textInput:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}input{border:0;outline:0;height:24px;padding:0;color:var(--input-text-color);width:100%;font-size:var(--input-font-size);font-family:inherit;background:none;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}input::placeholder{color:var(--input-text-color-placeholder);opacity:1}input:disabled{-webkit-text-fill-color:var(--input-text-color);color:var(--input-text-color);-webkit-opacity:1;opacity:1}input[type=number]:not([step])::-webkit-inner-spin-button,input[type=number]:not([step])::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]:not([step]){-moz-appearance:textfield}", Ht = ["text", "number", "password", "url", "email", "tel"], Zt = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], zt = ["default", "success", "error"], Wt = ["small", "medium", "large"], w = {
   type: "text",

package/dist/react.d.ts

@@ -1,13 +1,13 @@
 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 { CSSResult } from 'lit';
+import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
+import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import type { PIEInputElement } from '@justeattakeaway/pie-webc-core';
-import type { PropertyValues } from 'lit';
+import { PIEInputElement } from '@justeattakeaway/pie-webc-core';
+import { PropertyValues } from 'lit';
 import * as React_2 from 'react';
-import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
-import type { TemplateResult } from 'lit-html';
+import { RTLInterface } from '@justeattakeaway/pie-webc-core';
+import { TemplateResult } from 'lit-html';
 
 /**
  * The default values for the `TextInputProps` that are required (i.e. they have a fallback value in the component).
@@ -21,7 +21,7 @@ export declare const defaultProps: DefaultProps;
 
 export declare const inputModes: readonly ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"];
 
-export declare const PieTextInput: React_2.ForwardRefExoticComponent<TextInputProps & React_2.RefAttributes<PieTextInput_2> & PieTextInputEvents & ReactBaseType>;
+export declare const PieTextInput: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<TextInputProps> & React_2.RefAttributes<PieTextInput_2> & PieTextInputEvents & ReactBaseType>;
 
 /**
  * @tagname pie-text-input
@@ -36,7 +36,8 @@ declare class PieTextInput_2 extends PieTextInput_base implements TextInputProps
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
     };
     type: "number" | "text" | "password" | "url" | "email" | "tel";
     value: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-text-input",
   "description": "PIE Design System Input built using Web Components",
-  "version": "0.28.8",
+  "version": "0.28.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -39,15 +39,15 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.20.1",
-    "@justeattakeaway/pie-css": "0.17.0",
-    "@justeattakeaway/pie-icons-webc": "1.13.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.5.1",
+    "@justeattakeaway/pie-components-config": "0.21.0",
+    "@justeattakeaway/pie-css": "0.18.0",
+    "@justeattakeaway/pie-icons-webc": "1.14.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.6.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.10.8",
+    "@justeattakeaway/pie-assistive-text": "0.10.9",
     "@justeattakeaway/pie-webc-core": "1.0.0",
     "element-internals-polyfill": "1.3.11"
   },