@fremtind/jkl-text-input-react - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1-alpha.55

build/browser/index.js

@@ -1,2 +0,3 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { SupportLabel } from '@fremtind/jkl-typography-react';
 
@@ -57,22 +58,40 @@ function _extends() {
 
-var SupportText = function SupportText(_ref) {
-  var helpText = _ref.helpText,
-      errorText = _ref.errorText,
-      isInvalid = _ref.isInvalid;
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
 
-  if (isInvalid && errorText) {
-    return React.createElement("span", {
-      className: "jkl-form-support-text jkl-form-support-text--error"
-    }, errorText);
-  }
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-  if (helpText) {
-    return React.createElement("span", {
-      className: "jkl-form-support-text jkl-form-support-text--help"
-    }, helpText);
+function _iterableToArrayLimit(arr, i) {
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
   }
 
-  return null;
-};
+  return _arr;
+}
 
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+
 var TextField = function TextField(_ref) {
@@ -83,8 +102,6 @@ var _ref$type = _ref.type,
       inline = _ref$inline === void 0 ? false : _ref$inline,
-      _ref$isInvalid = _ref.isInvalid,
-      isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      helpText = _ref.helpText,
-      errorText = _ref.errorText,
+      helpLabel = _ref.helpLabel,
+      errorLabel = _ref.errorLabel,
       id = _ref.id,
@@ -94,3 +111,5 @@ label = _ref.label,
       className = _ref$className === void 0 ? "" : _ref$className,
-      rest = _objectWithoutProperties(_ref, ["type", "inline", "isInvalid", "readOnly", "helpText", "errorText", "id", "label", "className"]);
+      placeholder = _ref.placeholder,
+      value = _ref.value,
+      rest = _objectWithoutProperties(_ref, ["type", "inline", "readOnly", "helpLabel", "errorLabel", "id", "label", "className", "placeholder", "value"]);
 
@@ -102,13 +121,15 @@ return React.createElement("label", {
     type: type,
-    "aria-invalid": isInvalid,
+    "aria-invalid": !!errorLabel,
     className: "jkl-text-field__input",
     id: id,
     placeholder: " ",
-    readOnly: readOnly
-  }, rest)), React.createElement("span", {
+    readOnly: readOnly,
+    value: value
+  }, rest)), !value && placeholder && React.createElement("span", {
+    className: "jkl-text-field__placeholder"
+  }, placeholder), React.createElement("span", {
     className: "jkl-text-field__label"
-  }, label), React.createElement(SupportText, {
-    helpText: helpText,
-    errorText: errorText,
-    isInvalid: isInvalid
+  }, label), React.createElement(SupportLabel, {
+    helpLabel: helpLabel,
+    errorLabel: errorLabel
   }));
@@ -118,12 +139,28 @@ };
 var TextArea = function TextArea(_ref) {
-  var _ref$isInvalid = _ref.isInvalid,
-      isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
-      id = _ref.id,
+  var id = _ref.id,
       label = _ref.label,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className,
-      helpText = _ref.helpText,
-      errorText = _ref.errorText,
-      rest = _objectWithoutProperties(_ref, ["isInvalid", "id", "label", "className", "helpText", "errorText"]);
+      helpLabel = _ref.helpLabel,
+      errorLabel = _ref.errorLabel,
+      _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? 7 : _ref$rows,
+      restProps = _objectWithoutProperties(_ref, ["id", "label", "className", "helpLabel", "errorLabel", "rows"]);
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
+  var height = isFocused || restProps.value ? "".concat(rows * 2 + 0.5, "rem") : undefined;
+
+  function onBlur(event) {
+    setIsFocused(false);
+    restProps.onBlur && restProps.onBlur(event);
+  }
+
+  function onFocus() {
+    return setIsFocused(true);
+  }
+
   return React.createElement("label", {
@@ -133,12 +170,16 @@ "data-testid": "jkl-text-field",
   }, React.createElement("textarea", _extends({
-    "aria-invalid": isInvalid,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    style: {
+      height: height
+    },
+    "aria-invalid": !!errorLabel,
     className: "jkl-text-field__input",
     id: id,
     placeholder: " "
-  }, rest)), React.createElement("span", {
+  }, restProps)), React.createElement("span", {
     className: "jkl-text-field__label"
-  }, label), React.createElement(SupportText, {
-    helpText: helpText,
-    errorText: errorText,
-    isInvalid: isInvalid
+  }, label), React.createElement(SupportLabel, {
+    helpLabel: helpLabel,
+    errorLabel: errorLabel
   }));
@@ -145,0 +186,0 @@ };

build/browser/index.min.js

@@ -1,1 +0,1 @@
-import e from"react";function t(){return(t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var l,r,a=function(e,t){if(null==e)return{};var l,r,a={},n=Object.keys(e);for(r=0;r<n.length;r++)l=n[r],t.indexOf(l)>=0||(a[l]=e[l]);return a}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)l=n[r],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(a[l]=e[l])}return a}var r=function(t){var l=t.helpText,r=t.errorText;return t.isInvalid&&r?e.createElement("span",{className:"jkl-form-support-text jkl-form-support-text--error"},r):l?e.createElement("span",{className:"jkl-form-support-text jkl-form-support-text--help"},l):null},a=function(a){var n=a.type,i=void 0===n?"text":n,o=a.inline,s=void 0!==o&&o,c=a.isInvalid,d=void 0!==c&&c,p=a.readOnly,x=void 0!==p&&p,m=a.helpText,f=a.errorText,u=a.id,v=a.label,j=a.className,b=void 0===j?"":j,y=l(a,["type","inline","isInvalid","readOnly","helpText","errorText","id","label","className"]);return e.createElement("label",{"data-testid":"jkl-text-field",className:"jkl-text-field".concat(s?" jkl-text-field--inline":""," ").concat(b)},e.createElement("input",t({type:i,"aria-invalid":d,className:"jkl-text-field__input",id:u,placeholder:" ",readOnly:x},y)),e.createElement("span",{className:"jkl-text-field__label"},v),e.createElement(r,{helpText:m,errorText:f,isInvalid:d}))},n=function(a){var n=a.isInvalid,i=void 0!==n&&n,o=a.id,s=a.label,c=a.className,d=void 0===c?"":c,p=a.helpText,x=a.errorText,m=l(a,["isInvalid","id","label","className","helpText","errorText"]);return e.createElement("label",{"data-testid":"jkl-text-field",className:"jkl-text-field jkl-text-area ".concat(d)},e.createElement("textarea",t({"aria-invalid":i,className:"jkl-text-field__input",id:o,placeholder:" "},m)),e.createElement("span",{className:"jkl-text-field__label"},s),e.createElement(r,{helpText:p,errorText:x,isInvalid:i}))};export{n as TextArea,a as TextField};
+import e,{useState as t}from"react";import{SupportLabel as l}from"@fremtind/jkl-typography-react";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r])}return e}).apply(this,arguments)}function a(e,t){if(null==e)return{};var l,r,a=function(e,t){if(null==e)return{};var l,r,a={},n=Object.keys(e);for(r=0;r<n.length;r++)l=n[r],t.indexOf(l)>=0||(a[l]=e[l]);return a}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)l=n[r],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(a[l]=e[l])}return a}function n(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var l=[],r=!0,a=!1,n=void 0;try{for(var i,o=e[Symbol.iterator]();!(r=(i=o.next()).done)&&(l.push(i.value),!t||l.length!==t);r=!0);}catch(e){a=!0,n=e}finally{try{r||null==o.return||o.return()}finally{if(a)throw n}}return l}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var i=function(t){var n=t.type,i=void 0===n?"text":n,o=t.inline,c=void 0!==o&&o,u=t.readOnly,d=void 0!==u&&u,s=t.helpLabel,f=t.errorLabel,p=t.id,b=t.label,m=t.className,v=void 0===m?"":m,y=t.placeholder,h=t.value,j=a(t,["type","inline","readOnly","helpLabel","errorLabel","id","label","className","placeholder","value"]);return e.createElement("label",{"data-testid":"jkl-text-field",className:"jkl-text-field".concat(c?" jkl-text-field--inline":""," ").concat(v)},e.createElement("input",r({type:i,"aria-invalid":!!f,className:"jkl-text-field__input",id:p,placeholder:" ",readOnly:d,value:h},j)),!h&&y&&e.createElement("span",{className:"jkl-text-field__placeholder"},y),e.createElement("span",{className:"jkl-text-field__label"},b),e.createElement(l,{helpLabel:s,errorLabel:f}))},o=function(i){var o=i.id,c=i.label,u=i.className,d=void 0===u?"":u,s=i.helpLabel,f=i.errorLabel,p=i.rows,b=void 0===p?7:p,m=a(i,["id","label","className","helpLabel","errorLabel","rows"]),v=n(t(!1),2),y=v[0],h=v[1],j=y||m.value?"".concat(2*b+.5,"rem"):void 0;return e.createElement("label",{"data-testid":"jkl-text-field",className:"jkl-text-field jkl-text-area ".concat(d)},e.createElement("textarea",r({onFocus:function(){return h(!0)},onBlur:function(e){h(!1),m.onBlur&&m.onBlur(e)},style:{height:j},"aria-invalid":!!f,className:"jkl-text-field__input",id:o,placeholder:" "},m)),e.createElement("span",{className:"jkl-text-field__label"},c),e.createElement(l,{helpLabel:s,errorLabel:f}))};export{o as TextArea,i as TextField};

build/cjs/index.js

@@ -7,3 +7,5 @@ 'use strict';
 
-var React = _interopDefault(require('react'));
+var React = require('react');
+var React__default = _interopDefault(React);
+var jklTypographyReact = require('@fremtind/jkl-typography-react');
 
@@ -64,22 +66,40 @@ function _extends() {
 
-var SupportText = function SupportText(_ref) {
-  var helpText = _ref.helpText,
-      errorText = _ref.errorText,
-      isInvalid = _ref.isInvalid;
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
 
-  if (isInvalid && errorText) {
-    return React.createElement("span", {
-      className: "jkl-form-support-text jkl-form-support-text--error"
-    }, errorText);
-  }
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-  if (helpText) {
-    return React.createElement("span", {
-      className: "jkl-form-support-text jkl-form-support-text--help"
-    }, helpText);
+function _iterableToArrayLimit(arr, i) {
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
   }
 
-  return null;
-};
+  return _arr;
+}
 
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+
 var TextField = function TextField(_ref) {
@@ -90,8 +110,6 @@ var _ref$type = _ref.type,
       inline = _ref$inline === void 0 ? false : _ref$inline,
-      _ref$isInvalid = _ref.isInvalid,
-      isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      helpText = _ref.helpText,
-      errorText = _ref.errorText,
+      helpLabel = _ref.helpLabel,
+      errorLabel = _ref.errorLabel,
       id = _ref.id,
@@ -101,20 +119,24 @@ label = _ref.label,
       className = _ref$className === void 0 ? "" : _ref$className,
-      rest = _objectWithoutProperties(_ref, ["type", "inline", "isInvalid", "readOnly", "helpText", "errorText", "id", "label", "className"]);
+      placeholder = _ref.placeholder,
+      value = _ref.value,
+      rest = _objectWithoutProperties(_ref, ["type", "inline", "readOnly", "helpLabel", "errorLabel", "id", "label", "className", "placeholder", "value"]);
 
-  return React.createElement("label", {
+  return React__default.createElement("label", {
     "data-testid": "jkl-text-field",
     className: "jkl-text-field".concat(inline ? " jkl-text-field--inline" : "", " ").concat(className)
-  }, React.createElement("input", _extends({
+  }, React__default.createElement("input", _extends({
     type: type,
-    "aria-invalid": isInvalid,
+    "aria-invalid": !!errorLabel,
     className: "jkl-text-field__input",
     id: id,
     placeholder: " ",
-    readOnly: readOnly
-  }, rest)), React.createElement("span", {
+    readOnly: readOnly,
+    value: value
+  }, rest)), !value && placeholder && React__default.createElement("span", {
+    className: "jkl-text-field__placeholder"
+  }, placeholder), React__default.createElement("span", {
     className: "jkl-text-field__label"
-  }, label), React.createElement(SupportText, {
-    helpText: helpText,
-    errorText: errorText,
-    isInvalid: isInvalid
+  }, label), React__default.createElement(jklTypographyReact.SupportLabel, {
+    helpLabel: helpLabel,
+    errorLabel: errorLabel
   }));
@@ -124,26 +146,46 @@ };
 var TextArea = function TextArea(_ref) {
-  var _ref$isInvalid = _ref.isInvalid,
-      isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
-      id = _ref.id,
+  var id = _ref.id,
       label = _ref.label,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className,
-      helpText = _ref.helpText,
-      errorText = _ref.errorText,
-      rest = _objectWithoutProperties(_ref, ["isInvalid", "id", "label", "className", "helpText", "errorText"]);
+      helpLabel = _ref.helpLabel,
+      errorLabel = _ref.errorLabel,
+      _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? 7 : _ref$rows,
+      restProps = _objectWithoutProperties(_ref, ["id", "label", "className", "helpLabel", "errorLabel", "rows"]);
 
-  return React.createElement("label", {
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
+  var height = isFocused || restProps.value ? "".concat(rows * 2 + 0.5, "rem") : undefined;
+
+  function onBlur(event) {
+    setIsFocused(false);
+    restProps.onBlur && restProps.onBlur(event);
+  }
+
+  function onFocus() {
+    return setIsFocused(true);
+  }
+
+  return React__default.createElement("label", {
     "data-testid": "jkl-text-field",
     className: "jkl-text-field jkl-text-area ".concat(className)
-  }, React.createElement("textarea", _extends({
-    "aria-invalid": isInvalid,
+  }, React__default.createElement("textarea", _extends({
+    onFocus: onFocus,
+    onBlur: onBlur,
+    style: {
+      height: height
+    },
+    "aria-invalid": !!errorLabel,
     className: "jkl-text-field__input",
     id: id,
     placeholder: " "
-  }, rest)), React.createElement("span", {
+  }, restProps)), React__default.createElement("span", {
     className: "jkl-text-field__label"
-  }, label), React.createElement(SupportText, {
-    helpText: helpText,
-    errorText: errorText,
-    isInvalid: isInvalid
+  }, label), React__default.createElement(jklTypographyReact.SupportLabel, {
+    helpLabel: helpLabel,
+    errorLabel: errorLabel
   }));
@@ -150,0 +192,0 @@ };

build/esm/index.js

@@ -1,2 +0,3 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { SupportLabel } from '@fremtind/jkl-typography-react';
 
@@ -57,22 +58,40 @@ function _extends() {
 
-var SupportText = function SupportText(_ref) {
-  var helpText = _ref.helpText,
-      errorText = _ref.errorText,
-      isInvalid = _ref.isInvalid;
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
 
-  if (isInvalid && errorText) {
-    return React.createElement("span", {
-      className: "jkl-form-support-text jkl-form-support-text--error"
-    }, errorText);
-  }
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-  if (helpText) {
-    return React.createElement("span", {
-      className: "jkl-form-support-text jkl-form-support-text--help"
-    }, helpText);
+function _iterableToArrayLimit(arr, i) {
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
   }
 
-  return null;
-};
+  return _arr;
+}
 
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+
 var TextField = function TextField(_ref) {
@@ -83,8 +102,6 @@ var _ref$type = _ref.type,
       inline = _ref$inline === void 0 ? false : _ref$inline,
-      _ref$isInvalid = _ref.isInvalid,
-      isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      helpText = _ref.helpText,
-      errorText = _ref.errorText,
+      helpLabel = _ref.helpLabel,
+      errorLabel = _ref.errorLabel,
       id = _ref.id,
@@ -94,3 +111,5 @@ label = _ref.label,
       className = _ref$className === void 0 ? "" : _ref$className,
-      rest = _objectWithoutProperties(_ref, ["type", "inline", "isInvalid", "readOnly", "helpText", "errorText", "id", "label", "className"]);
+      placeholder = _ref.placeholder,
+      value = _ref.value,
+      rest = _objectWithoutProperties(_ref, ["type", "inline", "readOnly", "helpLabel", "errorLabel", "id", "label", "className", "placeholder", "value"]);
 
@@ -102,13 +121,15 @@ return React.createElement("label", {
     type: type,
-    "aria-invalid": isInvalid,
+    "aria-invalid": !!errorLabel,
     className: "jkl-text-field__input",
     id: id,
     placeholder: " ",
-    readOnly: readOnly
-  }, rest)), React.createElement("span", {
+    readOnly: readOnly,
+    value: value
+  }, rest)), !value && placeholder && React.createElement("span", {
+    className: "jkl-text-field__placeholder"
+  }, placeholder), React.createElement("span", {
     className: "jkl-text-field__label"
-  }, label), React.createElement(SupportText, {
-    helpText: helpText,
-    errorText: errorText,
-    isInvalid: isInvalid
+  }, label), React.createElement(SupportLabel, {
+    helpLabel: helpLabel,
+    errorLabel: errorLabel
   }));
@@ -118,12 +139,28 @@ };
 var TextArea = function TextArea(_ref) {
-  var _ref$isInvalid = _ref.isInvalid,
-      isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
-      id = _ref.id,
+  var id = _ref.id,
       label = _ref.label,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className,
-      helpText = _ref.helpText,
-      errorText = _ref.errorText,
-      rest = _objectWithoutProperties(_ref, ["isInvalid", "id", "label", "className", "helpText", "errorText"]);
+      helpLabel = _ref.helpLabel,
+      errorLabel = _ref.errorLabel,
+      _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? 7 : _ref$rows,
+      restProps = _objectWithoutProperties(_ref, ["id", "label", "className", "helpLabel", "errorLabel", "rows"]);
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
+  var height = isFocused || restProps.value ? "".concat(rows * 2 + 0.5, "rem") : undefined;
+
+  function onBlur(event) {
+    setIsFocused(false);
+    restProps.onBlur && restProps.onBlur(event);
+  }
+
+  function onFocus() {
+    return setIsFocused(true);
+  }
+
   return React.createElement("label", {
@@ -133,12 +170,16 @@ "data-testid": "jkl-text-field",
   }, React.createElement("textarea", _extends({
-    "aria-invalid": isInvalid,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    style: {
+      height: height
+    },
+    "aria-invalid": !!errorLabel,
     className: "jkl-text-field__input",
     id: id,
     placeholder: " "
-  }, rest)), React.createElement("span", {
+  }, restProps)), React.createElement("span", {
     className: "jkl-text-field__label"
-  }, label), React.createElement(SupportText, {
-    helpText: helpText,
-    errorText: errorText,
-    isInvalid: isInvalid
+  }, label), React.createElement(SupportLabel, {
+    helpLabel: helpLabel,
+    errorLabel: errorLabel
   }));
@@ -145,0 +186,0 @@ };

build/esm/index.min.js

@@ -1,1 +0,1 @@
-import e from"react";function t(){return(t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var l,r,a=function(e,t){if(null==e)return{};var l,r,a={},n=Object.keys(e);for(r=0;r<n.length;r++)l=n[r],t.indexOf(l)>=0||(a[l]=e[l]);return a}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)l=n[r],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(a[l]=e[l])}return a}var r=function(t){var l=t.helpText,r=t.errorText;return t.isInvalid&&r?e.createElement("span",{className:"jkl-form-support-text jkl-form-support-text--error"},r):l?e.createElement("span",{className:"jkl-form-support-text jkl-form-support-text--help"},l):null},a=function(a){var n=a.type,i=void 0===n?"text":n,o=a.inline,s=void 0!==o&&o,c=a.isInvalid,d=void 0!==c&&c,p=a.readOnly,x=void 0!==p&&p,m=a.helpText,f=a.errorText,u=a.id,v=a.label,j=a.className,b=void 0===j?"":j,y=l(a,["type","inline","isInvalid","readOnly","helpText","errorText","id","label","className"]);return e.createElement("label",{"data-testid":"jkl-text-field",className:"jkl-text-field".concat(s?" jkl-text-field--inline":""," ").concat(b)},e.createElement("input",t({type:i,"aria-invalid":d,className:"jkl-text-field__input",id:u,placeholder:" ",readOnly:x},y)),e.createElement("span",{className:"jkl-text-field__label"},v),e.createElement(r,{helpText:m,errorText:f,isInvalid:d}))},n=function(a){var n=a.isInvalid,i=void 0!==n&&n,o=a.id,s=a.label,c=a.className,d=void 0===c?"":c,p=a.helpText,x=a.errorText,m=l(a,["isInvalid","id","label","className","helpText","errorText"]);return e.createElement("label",{"data-testid":"jkl-text-field",className:"jkl-text-field jkl-text-area ".concat(d)},e.createElement("textarea",t({"aria-invalid":i,className:"jkl-text-field__input",id:o,placeholder:" "},m)),e.createElement("span",{className:"jkl-text-field__label"},s),e.createElement(r,{helpText:p,errorText:x,isInvalid:i}))};export{n as TextArea,a as TextField};
+import e,{useState as t}from"react";import{SupportLabel as l}from"@fremtind/jkl-typography-react";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r])}return e}).apply(this,arguments)}function a(e,t){if(null==e)return{};var l,r,a=function(e,t){if(null==e)return{};var l,r,a={},n=Object.keys(e);for(r=0;r<n.length;r++)l=n[r],t.indexOf(l)>=0||(a[l]=e[l]);return a}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)l=n[r],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(a[l]=e[l])}return a}function n(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var l=[],r=!0,a=!1,n=void 0;try{for(var i,o=e[Symbol.iterator]();!(r=(i=o.next()).done)&&(l.push(i.value),!t||l.length!==t);r=!0);}catch(e){a=!0,n=e}finally{try{r||null==o.return||o.return()}finally{if(a)throw n}}return l}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var i=function(t){var n=t.type,i=void 0===n?"text":n,o=t.inline,c=void 0!==o&&o,u=t.readOnly,d=void 0!==u&&u,s=t.helpLabel,f=t.errorLabel,p=t.id,b=t.label,m=t.className,v=void 0===m?"":m,y=t.placeholder,h=t.value,j=a(t,["type","inline","readOnly","helpLabel","errorLabel","id","label","className","placeholder","value"]);return e.createElement("label",{"data-testid":"jkl-text-field",className:"jkl-text-field".concat(c?" jkl-text-field--inline":""," ").concat(v)},e.createElement("input",r({type:i,"aria-invalid":!!f,className:"jkl-text-field__input",id:p,placeholder:" ",readOnly:d,value:h},j)),!h&&y&&e.createElement("span",{className:"jkl-text-field__placeholder"},y),e.createElement("span",{className:"jkl-text-field__label"},b),e.createElement(l,{helpLabel:s,errorLabel:f}))},o=function(i){var o=i.id,c=i.label,u=i.className,d=void 0===u?"":u,s=i.helpLabel,f=i.errorLabel,p=i.rows,b=void 0===p?7:p,m=a(i,["id","label","className","helpLabel","errorLabel","rows"]),v=n(t(!1),2),y=v[0],h=v[1],j=y||m.value?"".concat(2*b+.5,"rem"):void 0;return e.createElement("label",{"data-testid":"jkl-text-field",className:"jkl-text-field jkl-text-area ".concat(d)},e.createElement("textarea",r({onFocus:function(){return h(!0)},onBlur:function(e){h(!1),m.onBlur&&m.onBlur(e)},style:{height:j},"aria-invalid":!!f,className:"jkl-text-field__input",id:o,placeholder:" "},m)),e.createElement("span",{className:"jkl-text-field__label"},c),e.createElement(l,{helpLabel:s,errorLabel:f}))};export{o as TextArea,i as TextField};

build/TextArea.d.ts

@@ -1,2 +0,2 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, FocusEvent } from "react";
 interface Props {
@@ -6,10 +6,11 @@ label: string;
     onChange?: (value: ChangeEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (value: FocusEvent<HTMLTextAreaElement>) => void;
     className?: string;
-    isInvalid?: boolean;
     id?: string;
     required?: boolean;
-    helpText?: string;
-    errorText?: string;
+    helpLabel?: string;
+    errorLabel?: string;
+    rows?: number;
 }
-export declare const TextArea: ({ isInvalid, id, label, className, helpText, errorText, ...rest }: Props) => JSX.Element;
+export declare const TextArea: ({ id, label, className, helpLabel, errorLabel, rows, ...restProps }: Props) => JSX.Element;
 export {};

build/TextField.d.ts

@@ -1,2 +0,2 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, FocusEvent } from "react";
 interface Props {
@@ -6,7 +6,8 @@ label: string;
     inline?: boolean;
-    helpText?: string;
-    errorText?: string;
+    helpLabel?: string;
+    errorLabel?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     type?: "text" | "number" | "tel" | "password" | "email" | "year";
-    isInvalid?: boolean;
     id?: string;
@@ -17,4 +18,5 @@ autoComplete?: string;
     className?: string;
+    placeholder?: string;
 }
-export declare const TextField: ({ type, inline, isInvalid, readOnly, helpText, errorText, id, label, className, ...rest }: Props) => JSX.Element;
+export declare const TextField: ({ type, inline, readOnly, helpLabel, errorLabel, id, label, className, placeholder, value, ...rest }: Props) => JSX.Element;
 export {};

package.json

 {
     "name": "@fremtind/jkl-text-input-react",
-    "version": "0.7.0",
+    "version": "0.7.1-alpha.55+b3452c4a",
     "publishConfig": {
@@ -30,2 +30,3 @@ "access": "public"
     "scripts": {
+        "clean": "rimraf build/ dist/ .cache node_modules/",
         "build:types": "tsc -p tsconfig-for-declarations.json",
@@ -40,7 +41,7 @@ "build:scripts": "rollup --config ../../rollup.config.js",
     "dependencies": {
-        "@fremtind/jkl-text-input": "^0.8.0"
+        "@fremtind/jkl-text-input": "^0.8.1-alpha.55+b3452c4a",
+        "@fremtind/jkl-typography-react": "^0.7.1-alpha.55+b3452c4a"
     },
     "devDependencies": {
-        "@fremtind/browserslist-config-jkl": "^0.3.3",
-        "npm-run-all": "^4.1.5"
+        "@fremtind/browserslist-config-jkl": "^0.3.4-alpha.79+b3452c4a"
     },
@@ -63,3 +64,3 @@ "peerDependencies": {
     ],
-    "gitHead": "adb4778c0af82b61c39a560601d4a98fbe27fe3b"
+    "gitHead": "b3452c4ac9b73bdd89f0b44338a3091eac33ca2a"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29713

increased by15.61%

Dev dependency count

1

decreased by-50%

Lines of code

522

increased by23.7%

Worsened metrics

Dependency count

6

increased by20%

Number of package files

12

decreased by-7.69%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@fremtind/jkl-typography-react@^0.7.1-alpha.55+b3452c4a

• + Added@fremtind/jkl-core@0.8.1-alpha.55(transitive)

• + Added@fremtind/jkl-text-input@0.8.1-alpha.55(transitive)

• + Added@fremtind/jkl-typography-react@0.7.1-alpha.55(transitive)

• - Removed@fremtind/jkl-core@0.8.0(transitive)

• - Removed@fremtind/jkl-text-input@0.8.0(transitive)

• Updated@fremtind/jkl-text-input@^0.8.1-alpha.55+b3452c4a