@justeattakeaway/pie-textarea 0.16.8 → 0.16.10

package/README.md

@@ -22,6 +22,8 @@
     - [Example](#example)
     - [Displaying error messages](#displaying-error-messages)
 - [Usage Examples](#usage-examples)
+- [Pitfalls](#pitfalls)
+  - [Controlled input values](#controlled-input-values)
 - [Questions and Support](#questions-and-support)
 - [Contributing](#contributing)
 
@@ -173,6 +175,28 @@ import { PieTextarea } from '@justeattakeaway/pie-webc/react/textarea.js';
 </PieTextarea>
 ```
 
+## 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
 
 If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).

package/custom-elements.json

@@ -42,7 +42,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\r\n    disabled: false,\r\n    size: 'medium',\r\n    resize: 'auto',\r\n    value: '',\r\n    placeholder: '',\r\n    status: 'default',\r\n    autoFocus: false,\r\n    readonly: false,\r\n    required: false,\r\n}",
+          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\n    value: '',\n    placeholder: '',\n    status: 'default',\n    autoFocus: false,\n    readonly: false,\n    required: false,\n}",
           "description": "Default values for optional properties that have default fallback values in the component."
         }
       ],
@@ -102,8 +102,7 @@
             {
               "kind": "field",
               "name": "value",
-              "privacy": "public",
-              "attribute": "value"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -111,51 +110,42 @@
               "type": {
                 "text": "TextareaProps['defaultValue']"
               },
-              "privacy": "public",
-              "attribute": "defaultValue"
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "disabled",
-              "privacy": "public",
-              "attribute": "disabled",
-              "reflects": true
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "size",
-              "privacy": "public",
-              "attribute": "size"
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "resize",
-              "privacy": "public",
-              "attribute": "resize"
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "readonly",
-              "privacy": "public",
-              "attribute": "readonly"
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "autoFocus",
-              "privacy": "public",
-              "attribute": "autoFocus"
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "required",
-              "privacy": "public",
-              "attribute": "required"
+              "privacy": "public"
             },
             {
               "kind": "field",
               "name": "status",
-              "privacy": "public",
-              "attribute": "status"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -163,8 +153,7 @@
               "type": {
                 "text": "TextareaProps['assistiveText']"
               },
-              "privacy": "public",
-              "attribute": "assistiveText"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -172,9 +161,7 @@
               "type": {
                 "text": "TextareaProps['name']"
               },
-              "privacy": "public",
-              "attribute": "name",
-              "reflects": true
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -182,8 +169,7 @@
               "type": {
                 "text": "TextareaProps['autocomplete']"
               },
-              "privacy": "public",
-              "attribute": "autocomplete"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -191,8 +177,7 @@
               "type": {
                 "text": "TextareaProps['placeholder']"
               },
-              "privacy": "public",
-              "attribute": "placeholder"
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -230,7 +215,7 @@
                 "text": "ValidityState"
               },
               "privacy": "public",
-              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
+              "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
             },
             {
@@ -251,7 +236,7 @@
                   "description": "The latest disabled state of the input."
                 }
               ],
-              "description": "Called after the disabled state of the element changes,\r\neither because the disabled attribute of this element was added or removed;\r\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
+              "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",
@@ -262,7 +247,7 @@
                   "text": "void"
                 }
               },
-              "description": "Called when the form that owns this component is reset.\r\nResets the value to the default value."
+              "description": "Called when the form that owns this component is reset.\nResets the value to the default value."
             },
             {
               "kind": "method",
@@ -329,75 +314,6 @@
               "name": "change"
             }
           ],
-          "attributes": [
-            {
-              "name": "value",
-              "fieldName": "value"
-            },
-            {
-              "name": "defaultValue",
-              "type": {
-                "text": "TextareaProps['defaultValue']"
-              },
-              "fieldName": "defaultValue"
-            },
-            {
-              "name": "disabled",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "size",
-              "fieldName": "size"
-            },
-            {
-              "name": "resize",
-              "fieldName": "resize"
-            },
-            {
-              "name": "readonly",
-              "fieldName": "readonly"
-            },
-            {
-              "name": "autoFocus",
-              "fieldName": "autoFocus"
-            },
-            {
-              "name": "required",
-              "fieldName": "required"
-            },
-            {
-              "name": "status",
-              "fieldName": "status"
-            },
-            {
-              "name": "assistiveText",
-              "type": {
-                "text": "TextareaProps['assistiveText']"
-              },
-              "fieldName": "assistiveText"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "TextareaProps['name']"
-              },
-              "fieldName": "name"
-            },
-            {
-              "name": "autocomplete",
-              "type": {
-                "text": "TextareaProps['autocomplete']"
-              },
-              "fieldName": "autocomplete"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "TextareaProps['placeholder']"
-              },
-              "fieldName": "placeholder"
-            }
-          ],
           "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 `TextareaProps` that are required (i.e. they have a fallback value in the component).
@@ -27,7 +27,8 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
     };
     value: string;
     defaultValue: TextareaProps['defaultValue'];

package/dist/index.js

@@ -10,7 +10,7 @@ const _ = class _ extends D {
     this.getAttribute("v") || this.setAttribute("v", _.v);
   }
 };
-_.v = "0.16.8";
+_.v = "0.16.10";
 let w = _;
 var $ = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function Z(e) {

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 `TextareaProps` that are required (i.e. they have a fallback value in the component).
@@ -19,7 +19,7 @@ declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<Text
  */
 export declare const defaultProps: DefaultProps;
 
-export declare const PieTextarea: React_2.ForwardRefExoticComponent<TextareaProps & React_2.RefAttributes<PieTextarea_2> & PieTextareaEvents & ReactBaseType>;
+export declare const PieTextarea: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<TextareaProps> & React_2.RefAttributes<PieTextarea_2> & PieTextareaEvents & ReactBaseType>;
 
 /**
  * @tagname pie-textarea
@@ -30,7 +30,8 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
     };
     value: string;
     defaultValue: TextareaProps['defaultValue'];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-textarea",
   "description": "PIE Design System Textarea built using Web Components",
-  "version": "0.16.8",
+  "version": "0.16.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -39,14 +39,14 @@
   "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-monorepo-utils": "0.5.1",
+    "@justeattakeaway/pie-components-config": "0.21.0",
+    "@justeattakeaway/pie-css": "0.18.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.6.0",
     "@types/lodash.throttle": "4.1.9",
     "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",
     "lodash.throttle": "4.1.1"
   },