datocms-react-ui 0.7.15 → 0.8.1

package/dist/cjs/Form/index.js

@@ -91,6 +91,15 @@ var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json
  *         textInputProps={{ monospaced: true }}
  *         onChange={(newValue) => console.log(newValue)}
  *       />
+ *       <TextareaField
+ *         required
+ *         name="longText"
+ *         id="longText"
+ *         label="Long text"
+ *         value="Lorem ipsum dolor sit amet, consectetur adipiscing elit.."
+ *         hint="Enter some text"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
  *       <SelectField
  *         name="option"
  *         id="option"

package/dist/cjs/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Form/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAOe;AACf,0DAA4B;AAC5B,oFAA8C;AAU9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AACI,IAAM,IAAI,GAAG,UAAC,EAMT;IALV,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EAChB,UAAU,cALM,gDAMpB,CADc;IAEb,IAAM,UAAU,GAAG,IAAA,oBAAE,EAAC,gCAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,IAAM,kBAAkB,GAAG,IAAA,oBAAE,EAC3B,gCAAM,CAAC,UAAU,EACjB,gCAAM,CAAC,sBAAe,OAAO,CAAE,CAAC,CACjC,CAAC;IAEF,IAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,UAAC,KAAgB;QACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,iDAAM,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,IAAM,UAAU,GAChE,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;QAC5B,IAAI,KAAK,EAAE;YACT,OAAO,uCAAK,SAAS,EAAE,kBAAkB,IAAG,KAAK,CAAO,CAAC;SAC1D;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,IAAI,QAkCf"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Form/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAOe;AACf,0DAA4B;AAC5B,oFAA8C;AAU9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmGG;AACI,IAAM,IAAI,GAAG,UAAC,EAMT;IALV,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EAChB,UAAU,cALM,gDAMpB,CADc;IAEb,IAAM,UAAU,GAAG,IAAA,oBAAE,EAAC,gCAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,IAAM,kBAAkB,GAAG,IAAA,oBAAE,EAC3B,gCAAM,CAAC,UAAU,EACjB,gCAAM,CAAC,sBAAe,OAAO,CAAE,CAAC,CACjC,CAAC;IAEF,IAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,UAAC,KAAgB;QACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,iDAAM,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,IAAM,UAAU,GAChE,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;QAC5B,IAAI,KAAK,EAAE;YACT,OAAO,uCAAK,SAAS,EAAE,kBAAkB,IAAG,KAAK,CAAO,CAAC;SAC1D;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,IAAI,QAkCf"}

package/dist/cjs/TextareaField/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextareaField = void 0;
+var react_1 = __importDefault(require("react"));
+var __1 = require("..");
+function TextareaField(_a) {
+    var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, textareaInputProps = _a.textareaInputProps;
+    return (react_1.default.createElement(__1.FieldWrapper, { formLabelProps: formLabelProps, id: id, required: required, error: error, hint: hint, label: label },
+        react_1.default.createElement(__1.TextareaInput, __assign({}, textareaInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error }))));
+}
+exports.TextareaField = TextareaField;
+//# sourceMappingURL=index.js.map

package/dist/cjs/TextareaField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextareaField/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyC;AACzC,wBAKY;AAgBZ,SAAgB,aAAa,CAAC,EAYT;QAXnB,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,kBAAkB,wBAAA;IAElB,OAAO,CACL,8BAAC,gBAAY,IACX,cAAc,EAAE,cAAc,EAC9B,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK;QAEZ,8BAAC,iBAAa,eACR,kBAAkB,IACtB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,IACd,CACW,CAChB,CAAC;AACJ,CAAC;AAjCD,sCAiCC"}

package/dist/cjs/TextareaInput/index.js

@@ -0,0 +1,71 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextareaInput = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+var TextareaInput = function (_a) {
+    var _b;
+    var className = _a.className, _c = _a.disabled, disabled = _c === void 0 ? false : _c, error = _a.error, id = _a.id, inputRef = _a.inputRef, maxLength = _a.maxLength, name = _a.name, labelText = _a.labelText, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, value = _a.value, monospaced = _a.monospaced, otherProps = __rest(_a, ["className", "disabled", "error", "id", "inputRef", "maxLength", "name", "labelText", "onBlur", "onChange", "placeholder", "required", "value", "monospaced"]);
+    var handleChange = (0, react_1.useCallback)(function (e) {
+        if (onChange) {
+            onChange(e.target.value, e);
+        }
+    }, [onChange]);
+    var classNames = (0, classnames_1.default)(styles_module_css_json_1.default['TextareaInput'], className, (_b = {},
+        _b[styles_module_css_json_1.default['TextareaInput--disabled']] = disabled,
+        _b[styles_module_css_json_1.default['TextareaInput--error']] = error,
+        _b[styles_module_css_json_1.default['TextareaInput--monospaced']] = monospaced,
+        _b));
+    return (react_1.default.createElement("textarea", __assign({ className: classNames, "aria-label": labelText, id: id, name: name, required: required, placeholder: placeholder, maxLength: maxLength, disabled: disabled, onBlur: onBlur, onChange: handleChange, value: value, ref: inputRef }, otherProps)));
+};
+exports.TextareaInput = TextareaInput;
+//# sourceMappingURL=index.js.map

package/dist/cjs/TextareaInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextareaInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmE;AACnE,0DAA4B;AAC5B,oFAAyC;AAkBlC,IAAM,aAAa,GAAG,UAAC,EAgBT;;IAfnB,IAAA,SAAS,eAAA,EACT,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,EAAE,QAAA,EACF,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,UAAU,gBAAA,EACP,UAAU,cAfe,8JAgB7B,CADc;IAEb,IAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,UAAC,CAAmC;QAClC,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;SAC7B;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,IAAM,UAAU,GAAG,IAAA,oBAAE,EAAC,gCAAC,CAAC,eAAe,CAAC,EAAE,SAAS;QACjD,GAAC,gCAAC,CAAC,yBAAyB,CAAC,IAAG,QAAQ;QACxC,GAAC,gCAAC,CAAC,sBAAsB,CAAC,IAAG,KAAK;QAClC,GAAC,gCAAC,CAAC,2BAA2B,CAAC,IAAG,UAAU;YAC5C,CAAC;IAEH,OAAO,CACL,qDACE,SAAS,EAAE,UAAU,gBACT,SAAS,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,QAAQ,IACT,UAAU,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAjDW,QAAA,aAAa,iBAiDxB"}

package/dist/cjs/TextareaInput/styles.module.css.json

@@ -0,0 +1 @@
+{ "TextareaInput": "_TextareaInput_1wnu9_1", "TextareaInput--monospaced": "_TextareaInput--monospaced_1wnu9_30", "TextareaInput--disabled": "_TextareaInput--disabled_1wnu9_35", "TextareaInput--error": "_TextareaInput--error_1wnu9_41" }

package/dist/cjs/index.js

@@ -35,6 +35,8 @@ __exportStar(require("./SwitchField"), exports);
 __exportStar(require("./SwitchInput"), exports);
 __exportStar(require("./TextField"), exports);
 __exportStar(require("./TextInput"), exports);
+__exportStar(require("./TextareaField"), exports);
+__exportStar(require("./TextareaInput"), exports);
 __exportStar(require("./Toolbar"), exports);
 __exportStar(require("./useClickOutside"), exports);
 __exportStar(require("./useMediaQuery"), exports);

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,gDAA8B;AAC9B,2CAAyB;AACzB,qDAAmC;AACnC,6CAA2B;AAC3B,+CAA6B;AAC7B,+CAA6B;AAC7B,8CAA4B;AAC5B,yCAAuB;AACvB,iDAA+B;AAC/B,8CAA4B;AAC5B,0CAAwB;AACxB,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B;AAC9B,iDAA+B;AAC/B,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,4CAA0B;AAC1B,oDAAkC;AAClC,kDAAgC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,gDAA8B;AAC9B,2CAAyB;AACzB,qDAAmC;AACnC,6CAA2B;AAC3B,+CAA6B;AAC7B,+CAA6B;AAC7B,8CAA4B;AAC5B,yCAAuB;AACvB,iDAA+B;AAC/B,8CAA4B;AAC5B,0CAAwB;AACxB,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B;AAC9B,iDAA+B;AAC/B,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,kDAAgC;AAChC,kDAAgC;AAChC,4CAA0B;AAC1B,oDAAkC;AAClC,kDAAgC"}

package/dist/esm/Form/index.d.ts

@@ -45,6 +45,15 @@ export interface FormProps {
  *         textInputProps={{ monospaced: true }}
  *         onChange={(newValue) => console.log(newValue)}
  *       />
+ *       <TextareaField
+ *         required
+ *         name="longText"
+ *         id="longText"
+ *         label="Long text"
+ *         value="Lorem ipsum dolor sit amet, consectetur adipiscing elit.."
+ *         hint="Enter some text"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
  *       <SelectField
  *         name="option"
  *         id="option"

package/dist/esm/Form/index.js

@@ -62,6 +62,15 @@ import styles from './styles.module.css.json';
  *         textInputProps={{ monospaced: true }}
  *         onChange={(newValue) => console.log(newValue)}
  *       />
+ *       <TextareaField
+ *         required
+ *         name="longText"
+ *         id="longText"
+ *         label="Long text"
+ *         value="Lorem ipsum dolor sit amet, consectetur adipiscing elit.."
+ *         hint="Enter some text"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
  *       <SelectField
  *         name="option"
  *         id="option"

package/dist/esm/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Form/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,QAAQ,EACR,WAAW,GAKZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAU9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AACH,MAAM,CAAC,IAAM,IAAI,GAAG,UAAC,EAMT;IALV,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EAChB,UAAU,cALM,gDAMpB,CADc;IAEb,IAAM,UAAU,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,IAAM,kBAAkB,GAAG,EAAE,CAC3B,MAAM,CAAC,UAAU,EACjB,MAAM,CAAC,sBAAe,OAAO,CAAE,CAAC,CACjC,CAAC;IAEF,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,KAAgB;QACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,uCAAM,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,IAAM,UAAU,GAChE,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;QAC5B,IAAI,KAAK,EAAE;YACT,OAAO,6BAAK,SAAS,EAAE,kBAAkB,IAAG,KAAK,CAAO,CAAC;SAC1D;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Form/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,QAAQ,EACR,WAAW,GAKZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAU9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmGG;AACH,MAAM,CAAC,IAAM,IAAI,GAAG,UAAC,EAMT;IALV,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EAChB,UAAU,cALM,gDAMpB,CADc;IAEb,IAAM,UAAU,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,IAAM,kBAAkB,GAAG,EAAE,CAC3B,MAAM,CAAC,UAAU,EACjB,MAAM,CAAC,sBAAe,OAAO,CAAE,CAAC,CACjC,CAAC;IAEF,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,KAAgB;QACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,uCAAM,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,IAAM,UAAU,GAChE,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;QAC5B,IAAI,KAAK,EAAE;YACT,OAAO,6BAAK,SAAS,EAAE,kBAAkB,IAAG,KAAK,CAAO,CAAC;SAC1D;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/TextareaField/index.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { FormLabelProps, TextareaInputProps } from '..';
+declare type TextareaFieldProps = {
+    id: string;
+    name: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    placeholder?: string;
+    error?: ReactNode;
+    required?: boolean;
+    formLabelProps?: FormLabelProps;
+    value: TextareaInputProps['value'];
+    onChange: TextareaInputProps['onChange'];
+    textareaInputProps?: TextareaInputProps;
+};
+export declare function TextareaField({ id, name, label, hint, error, required, placeholder, formLabelProps, value, onChange, textareaInputProps, }: TextareaFieldProps): JSX.Element;
+export {};

package/dist/esm/TextareaField/index.js

@@ -0,0 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { FieldWrapper, TextareaInput, } from '..';
+export function TextareaField(_a) {
+    var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, textareaInputProps = _a.textareaInputProps;
+    return (React.createElement(FieldWrapper, { formLabelProps: formLabelProps, id: id, required: required, error: error, hint: hint, label: label },
+        React.createElement(TextareaInput, __assign({}, textareaInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error }))));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/TextareaField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextareaField/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,YAAY,EAEZ,aAAa,GAEd,MAAM,IAAI,CAAC;AAgBZ,MAAM,UAAU,aAAa,CAAC,EAYT;QAXnB,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,kBAAkB,wBAAA;IAElB,OAAO,CACL,oBAAC,YAAY,IACX,cAAc,EAAE,cAAc,EAC9B,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK;QAEZ,oBAAC,aAAa,eACR,kBAAkB,IACtB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,IACd,CACW,CAChB,CAAC;AACJ,CAAC"}

package/dist/esm/TextareaInput/index.d.ts

@@ -0,0 +1,13 @@
+import React, { RefObject } from 'react';
+export declare type TextareaInputChangeEventHandler = (newValue: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+export declare type TextareaInputProps = {
+    name?: string;
+    labelText?: string;
+    id?: string;
+    className?: string;
+    monospaced?: boolean;
+    onChange?: TextareaInputChangeEventHandler;
+    inputRef?: RefObject<HTMLTextAreaElement>;
+    error?: boolean;
+} & Omit<JSX.IntrinsicElements['textarea'], 'onChange'>;
+export declare const TextareaInput: ({ className, disabled, error, id, inputRef, maxLength, name, labelText, onBlur, onChange, placeholder, required, value, monospaced, ...otherProps }: TextareaInputProps) => JSX.Element;

package/dist/esm/TextareaInput/index.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback } from 'react';
+import cn from 'classnames';
+import s from './styles.module.css.json';
+export var TextareaInput = function (_a) {
+    var _b;
+    var className = _a.className, _c = _a.disabled, disabled = _c === void 0 ? false : _c, error = _a.error, id = _a.id, inputRef = _a.inputRef, maxLength = _a.maxLength, name = _a.name, labelText = _a.labelText, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, value = _a.value, monospaced = _a.monospaced, otherProps = __rest(_a, ["className", "disabled", "error", "id", "inputRef", "maxLength", "name", "labelText", "onBlur", "onChange", "placeholder", "required", "value", "monospaced"]);
+    var handleChange = useCallback(function (e) {
+        if (onChange) {
+            onChange(e.target.value, e);
+        }
+    }, [onChange]);
+    var classNames = cn(s['TextareaInput'], className, (_b = {},
+        _b[s['TextareaInput--disabled']] = disabled,
+        _b[s['TextareaInput--error']] = error,
+        _b[s['TextareaInput--monospaced']] = monospaced,
+        _b));
+    return (React.createElement("textarea", __assign({ className: classNames, "aria-label": labelText, id: id, name: name, required: required, placeholder: placeholder, maxLength: maxLength, disabled: disabled, onBlur: onBlur, onChange: handleChange, value: value, ref: inputRef }, otherProps)));
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/TextareaInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextareaInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAA0B,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAkBzC,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,EAgBT;;IAfnB,IAAA,SAAS,eAAA,EACT,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,EAAE,QAAA,EACF,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,UAAU,gBAAA,EACP,UAAU,cAfe,8JAgB7B,CADc;IAEb,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,CAAmC;QAClC,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;SAC7B;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,IAAM,UAAU,GAAG,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE,SAAS;QACjD,GAAC,CAAC,CAAC,yBAAyB,CAAC,IAAG,QAAQ;QACxC,GAAC,CAAC,CAAC,sBAAsB,CAAC,IAAG,KAAK;QAClC,GAAC,CAAC,CAAC,2BAA2B,CAAC,IAAG,UAAU;YAC5C,CAAC;IAEH,OAAO,CACL,2CACE,SAAS,EAAE,UAAU,gBACT,SAAS,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,QAAQ,IACT,UAAU,EACd,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/TextareaInput/styles.module.css.json

@@ -0,0 +1 @@
+{ "TextareaInput": "_TextareaInput_1wnu9_1", "TextareaInput--monospaced": "_TextareaInput--monospaced_1wnu9_30", "TextareaInput--disabled": "_TextareaInput--disabled_1wnu9_35", "TextareaInput--error": "_TextareaInput--error_1wnu9_41" }

package/dist/esm/index.d.ts

@@ -19,6 +19,8 @@ export * from './SwitchField';
 export * from './SwitchInput';
 export * from './TextField';
 export * from './TextInput';
+export * from './TextareaField';
+export * from './TextareaInput';
 export * from './Toolbar';
 export * from './useClickOutside';
 export * from './useMediaQuery';

package/dist/esm/index.js

@@ -19,6 +19,8 @@ export * from './SwitchField';
 export * from './SwitchInput';
 export * from './TextField';
 export * from './TextInput';
+export * from './TextareaField';
+export * from './TextareaInput';
 export * from './Toolbar';
 export * from './useClickOutside';
 export * from './useMediaQuery';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}

package/dist/types/Form/index.d.ts

@@ -45,6 +45,15 @@ export interface FormProps {
  *         textInputProps={{ monospaced: true }}
  *         onChange={(newValue) => console.log(newValue)}
  *       />
+ *       <TextareaField
+ *         required
+ *         name="longText"
+ *         id="longText"
+ *         label="Long text"
+ *         value="Lorem ipsum dolor sit amet, consectetur adipiscing elit.."
+ *         hint="Enter some text"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
  *       <SelectField
  *         name="option"
  *         id="option"

package/dist/types/TextareaField/index.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { FormLabelProps, TextareaInputProps } from '..';
+declare type TextareaFieldProps = {
+    id: string;
+    name: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    placeholder?: string;
+    error?: ReactNode;
+    required?: boolean;
+    formLabelProps?: FormLabelProps;
+    value: TextareaInputProps['value'];
+    onChange: TextareaInputProps['onChange'];
+    textareaInputProps?: TextareaInputProps;
+};
+export declare function TextareaField({ id, name, label, hint, error, required, placeholder, formLabelProps, value, onChange, textareaInputProps, }: TextareaFieldProps): JSX.Element;
+export {};

package/dist/types/TextareaInput/index.d.ts

@@ -0,0 +1,13 @@
+import React, { RefObject } from 'react';
+export declare type TextareaInputChangeEventHandler = (newValue: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+export declare type TextareaInputProps = {
+    name?: string;
+    labelText?: string;
+    id?: string;
+    className?: string;
+    monospaced?: boolean;
+    onChange?: TextareaInputChangeEventHandler;
+    inputRef?: RefObject<HTMLTextAreaElement>;
+    error?: boolean;
+} & Omit<JSX.IntrinsicElements['textarea'], 'onChange'>;
+export declare const TextareaInput: ({ className, disabled, error, id, inputRef, maxLength, name, labelText, onBlur, onChange, placeholder, required, value, monospaced, ...otherProps }: TextareaInputProps) => JSX.Element;

package/dist/types/index.d.ts

@@ -19,6 +19,8 @@ export * from './SwitchField';
 export * from './SwitchInput';
 export * from './TextField';
 export * from './TextInput';
+export * from './TextareaField';
+export * from './TextareaInput';
 export * from './Toolbar';
 export * from './useClickOutside';
 export * from './useMediaQuery';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datocms-react-ui",
-  "version": "0.7.15",
+  "version": "0.8.1",
   "description": "React components to use inside DatoCMS plugins",
   "keywords": [
     "datocms",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "classnames": "^2.3.1",
-    "datocms-plugin-sdk": "^0.7.15",
+    "datocms-plugin-sdk": "^0.8.0",
     "react-intersection-observer": "^8.31.0",
     "react-select": "^5.2.1",
     "scroll-into-view-if-needed": "^2.2.20"
@@ -57,5 +57,5 @@
     "postcss-nested": "^5.0.6",
     "typedoc": "^0.23.20"
   },
-  "gitHead": "5d21c006626fb71e79cbf29a3b7398b9e896ce10"
+  "gitHead": "abf8273c07ea3d1886bc4bc22ebe18eb924d56b7"
 }

package/src/Form/index.tsx

@@ -56,6 +56,15 @@ export interface FormProps {
  *         textInputProps={{ monospaced: true }}
  *         onChange={(newValue) => console.log(newValue)}
  *       />
+ *       <TextareaField
+ *         required
+ *         name="longText"
+ *         id="longText"
+ *         label="Long text"
+ *         value="Lorem ipsum dolor sit amet, consectetur adipiscing elit.."
+ *         hint="Enter some text"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
  *       <SelectField
  *         name="option"
  *         id="option"

package/src/TextareaField/index.tsx

@@ -0,0 +1,56 @@
+import React, { ReactNode } from 'react';
+import {
+  FieldWrapper,
+  FormLabelProps,
+  TextareaInput,
+  TextareaInputProps,
+} from '..';
+
+type TextareaFieldProps = {
+  id: string;
+  name: string;
+  label: ReactNode;
+  hint?: ReactNode;
+  placeholder?: string;
+  error?: ReactNode;
+  required?: boolean;
+  formLabelProps?: FormLabelProps;
+  value: TextareaInputProps['value'];
+  onChange: TextareaInputProps['onChange'];
+  textareaInputProps?: TextareaInputProps;
+};
+
+export function TextareaField({
+  id,
+  name,
+  label,
+  hint,
+  error,
+  required,
+  placeholder,
+  formLabelProps,
+  value,
+  onChange,
+  textareaInputProps,
+}: TextareaFieldProps): JSX.Element {
+  return (
+    <FieldWrapper
+      formLabelProps={formLabelProps}
+      id={id}
+      required={required}
+      error={error}
+      hint={hint}
+      label={label}
+    >
+      <TextareaInput
+        {...textareaInputProps}
+        id={id}
+        name={name}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        error={!!error}
+      />
+    </FieldWrapper>
+  );
+}

package/src/TextareaField/styles.module.css.json

@@ -0,0 +1 @@
+{}

package/src/TextareaInput/index.tsx

@@ -0,0 +1,70 @@
+import React, { useCallback, RefObject, ChangeEvent } from 'react';
+import cn from 'classnames';
+import s from './styles.module.css.json';
+
+export type TextareaInputChangeEventHandler = (
+  newValue: string,
+  event: React.ChangeEvent<HTMLTextAreaElement>,
+) => void;
+
+export type TextareaInputProps = {
+  name?: string;
+  labelText?: string;
+  id?: string;
+  className?: string;
+  monospaced?: boolean;
+  onChange?: TextareaInputChangeEventHandler;
+  inputRef?: RefObject<HTMLTextAreaElement>;
+  error?: boolean;
+} & Omit<JSX.IntrinsicElements['textarea'], 'onChange'>;
+
+export const TextareaInput = ({
+  className,
+  disabled = false,
+  error,
+  id,
+  inputRef,
+  maxLength,
+  name,
+  labelText,
+  onBlur,
+  onChange,
+  placeholder,
+  required = false,
+  value,
+  monospaced,
+  ...otherProps
+}: TextareaInputProps): JSX.Element => {
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      if (onChange) {
+        onChange(e.target.value, e);
+      }
+    },
+    [onChange],
+  );
+
+  const classNames = cn(s['TextareaInput'], className, {
+    [s['TextareaInput--disabled']]: disabled,
+    [s['TextareaInput--error']]: error,
+    [s['TextareaInput--monospaced']]: monospaced,
+  });
+
+  return (
+    <textarea
+      className={classNames}
+      aria-label={labelText}
+      id={id}
+      name={name}
+      required={required}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      disabled={disabled}
+      onBlur={onBlur}
+      onChange={handleChange}
+      value={value}
+      ref={inputRef}
+      {...otherProps}
+    />
+  );
+};

package/src/TextareaInput/styles.module.css

@@ -0,0 +1,52 @@
+.TextareaInput {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid var(--border-color);
+  appearance: none;
+  border-radius: 0;
+  background-image: none;
+  transition: border 0.2s var(--material-ease);
+  font-size: var(--font-size-m);
+  resize: none;
+  font-family: inherit;
+
+  &::placeholder {
+    color: var(--placeholder-body-color);
+  }
+
+  &:hover {
+    border-color: var(--darker-border-color);
+  }
+
+  &:focus {
+    outline: 0;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px var(--semi-transparent-accent-color);
+  }
+}
+
+.TextareaInput--monospaced {
+  font-family: var(--monospaced-font-family);
+  font-size: var(--font-size-s);
+}
+
+.TextareaInput--disabled {
+  color: var(--light-body-color);
+  border-color: var(--border-color);
+  background: var(--lighter-bg-color);
+}
+
+.TextareaInput--error {
+  border-color: var(--alert-color);
+
+  &:hover,
+  &:focus {
+    border-color: var(--alert-color);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba(var(--alert-color-rgb-components), 0.2);
+  }
+}

package/src/TextareaInput/styles.module.css.json

@@ -0,0 +1 @@
+{"TextareaInput":"_TextareaInput_1wnu9_1","TextareaInput--monospaced":"_TextareaInput--monospaced_1wnu9_30","TextareaInput--disabled":"_TextareaInput--disabled_1wnu9_35","TextareaInput--error":"_TextareaInput--error_1wnu9_41"}

package/src/global.css

@@ -16,6 +16,8 @@
 @import './SwitchInput/styles.module.css';
 @import './TextField/styles.module.css';
 @import './TextInput/styles.module.css';
+@import './TextareaField/styles.module.css';
+@import './TextareaInput/styles.module.css';
 @import './Toolbar/Button/styles.module.css';
 @import './Toolbar/Stack/styles.module.css';
 @import './Toolbar/Title/styles.module.css';

package/src/index.ts

@@ -19,6 +19,8 @@ export * from './SwitchField';
 export * from './SwitchInput';
 export * from './TextField';
 export * from './TextInput';
+export * from './TextareaField';
+export * from './TextareaInput';
 export * from './Toolbar';
 export * from './useClickOutside';
 export * from './useMediaQuery';