@kvdbil/components 8.6.1 → 8.6.2

package/cjs/components/EditRow/index.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),l=require("../../theme.js"),r=require("../../typography/BodyText/index.js"),a=require("../Button/index.js"),n=require("../Chip/index.js"),u=require("../Textfield/index.js");function i(b){return b&&typeof b=="object"&&"default"in b?b:{default:b}}require("../../shared/media-queries.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js"),require("../../icons/components/CloseIcon.js"),require("../Chip/styles.js"),require("../FieldLabel.js"),require("../../shared/helpers.js");var o=i(e),d=i(t);const s=d.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),l=require("../../theme.js"),r=require("../../typography/BodyText/index.js"),a=require("../Button/index.js"),n=require("../Chip/index.js"),u=require("../Textfield/index.js");function i(b){return b&&typeof b=="object"&&"default"in b?b:{default:b}}require("../../shared/media-queries.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js"),require("../../icons/components/CloseIcon.js"),require("../Chip/styles.js"),require("../FieldLabel.js"),require("../../shared/helpers.js");var o=i(e),d=i(t);const f=d.default.div`
   display: flex;
   border-bottom: 1px solid ${l.default.colors.gray.light5};
-`,f=d.default.form`
+`,s=d.default.form`
   flex: 1;
   flex-direction: column;
   margin-bottom: 1rem;
@@ -19,13 +19,16 @@
   min-width: 5rem;
   margin-right: 1rem;
 `,y=d.default(r.BodyLink)`
-  margin-right: 4rem;
+  flex: 1;
+  margin-right: 1rem;
 `,h=d.default(r.BodyText)`
   flex: 1rem;
+  flex: 4;
 `,g=d.default(h)`
   color: ${l.default.colors.text.disabled};
 `,j=d.default.div`
   display: flex;
+  flex-wrap: wrap;
 `,v=d.default(n.Chip)`
-  margin: 0 0.25rem;
-`;exports.default=({value:b,label:T,onEdit:D,options:I=[],inputProps:M={},isClearable:O=!1,editText:V,saveText:z,cancelText:A,noValueText:G,formatterFunc:L,isSingleSelect:H,color:k="secondary"})=>{const[q,B]=e.useState(b),[J,K]=e.useState(b),[w,P]=e.useState(!1),S=typeof q=="string",N=L&&S?L(q):q,Q=S?N:q.join(", "),_=q.length>0,$=()=>{w?B(J):K(q),P(E=>!E)};return o.default.createElement(s,null,!w&&o.default.createElement(o.default.Fragment,null,o.default.createElement(y,null,T),_&&o.default.createElement(h,null,Q),!_&&o.default.createElement(g,null,G),o.default.createElement(a.Button,{variant:"flat",color:k,onClick:$},V)),w&&o.default.createElement(f,{onSubmit:E=>{E.preventDefault(),D==null||D(q),P(!1)}},o.default.createElement(y,null,T),S&&o.default.createElement(c,{...M,autoFocus:!0,value:q,label:T,onChange:E=>B(E.target.value)}),!S&&o.default.createElement(j,null,I.map(E=>o.default.createElement(v,{color:k,onClick:R=>{R.preventDefault(),(C=>{if(typeof q!="object")throw new Error("Cannot toggle chip on other than array");if(H)return q.includes(C)&&O?void B([]):void B([C]);if(q.includes(C)){const F=q.filter(U=>U!==C);B(F)}else B(F=>[...F,C])})(E)},key:E,variant:q.includes(E)?"solid":"outline"},E))),o.default.createElement(m,null,o.default.createElement(x,{type:"button",variant:"flat",color:"neutral",onClick:$},A),o.default.createElement(p,{type:"submit",color:k},z))))};
+  margin: 0.25rem;
+`;exports.default=({value:b,label:S,onChange:D,options:I=[],inputProps:M={},isClearable:O=!1,editText:V,saveText:z,cancelText:A,noValueText:G,formatterFunc:L,isSingleSelect:H,color:T="secondary"})=>{const[q,C]=e.useState(b),[J,K]=e.useState(b),[k,P]=e.useState(!1),w=typeof q=="string",N=L&&w?L(q):q,Q=w?N:q.join(", "),_=q.length>0,$=()=>{k?C(J):K(q),P(E=>!E)};return o.default.createElement(f,null,!k&&o.default.createElement(o.default.Fragment,null,o.default.createElement(y,null,S),_&&o.default.createElement(h,null,Q),!_&&o.default.createElement(g,null,G),o.default.createElement(a.Button,{variant:"flat",color:T,onClick:$},V)),k&&o.default.createElement(s,{onSubmit:E=>{E.preventDefault(),D==null||D(q),P(!1)}},o.default.createElement(y,null,S),w&&o.default.createElement(c,{...M,autoFocus:!0,value:q,label:S,onChange:E=>C(E.target.value)}),!w&&o.default.createElement(j,null,I.map(E=>o.default.createElement(v,{color:T,onClick:R=>{R.preventDefault(),(B=>{if(typeof q!="object")throw new Error("Cannot toggle chip on other than array");if(H)return q.includes(B)&&O?void C([]):void C([B]);if(q.includes(B)){const F=q.filter(U=>U!==B);C(F)}else C(F=>[...F,B])})(E)},key:E,variant:q.includes(E)?"solid":"outline"},E))),o.default.createElement(m,null,o.default.createElement(x,{type:"button",variant:"flat",color:"neutral",onClick:$},A),o.default.createElement(p,{type:"submit",color:T},z))))};

package/esm/components/EditRow/index.js

@@ -1,6 +1,6 @@
-import t,{useState as c}from"react";import r from"styled-components";import x from"../../theme.js";import{BodyLink as $,BodyText as q}from"../../typography/BodyText/index.js";import{Button as d}from"../Button/index.js";import{Chip as N}from"../Chip/index.js";import{TextField as O}from"../Textfield/index.js";import"../../shared/media-queries.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../icons/components/CloseIcon.js";import"../Chip/styles.js";import"../FieldLabel.js";import"../../shared/helpers.js";const z=r.div`
+import t,{useState as c}from"react";import r from"styled-components";import y from"../../theme.js";import{BodyLink as $,BodyText as q}from"../../typography/BodyText/index.js";import{Button as d}from"../Button/index.js";import{Chip as N}from"../Chip/index.js";import{TextField as O}from"../Textfield/index.js";import"../../shared/media-queries.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../icons/components/CloseIcon.js";import"../Chip/styles.js";import"../FieldLabel.js";import"../../shared/helpers.js";const z=r.div`
   display: flex;
-  border-bottom: 1px solid ${x.colors.gray.light5};
+  border-bottom: 1px solid ${y.colors.gray.light5};
 `,A=r.form`
   flex: 1;
   flex-direction: column;
@@ -19,13 +19,16 @@ import t,{useState as c}from"react";import r from"styled-components";import x fr
   min-width: 5rem;
   margin-right: 1rem;
 `,E=r($)`
-  margin-right: 4rem;
+  flex: 1;
+  margin-right: 1rem;
 `,j=r(q)`
   flex: 1rem;
+  flex: 4;
 `,M=r(j)`
-  color: ${x.colors.text.disabled};
+  color: ${y.colors.text.disabled};
 `,P=r.div`
   display: flex;
+  flex-wrap: wrap;
 `,Q=r(N)`
-  margin: 0 0.25rem;
-`,U=({value:u,label:s,onEdit:p,options:C=[],inputProps:v={},isClearable:B=!1,editText:b,saveText:w,cancelText:S,noValueText:F,formatterFunc:f,isSingleSelect:T,color:a="secondary"})=>{const[n,o]=c(u),[V,k]=c(u),[m,h]=c(!1),i=typeof n=="string",L=f&&i?f(n):n,D=i?L:n.join(", "),g=n.length>0,y=()=>{m?o(V):k(n),h(e=>!e)},I=e=>{e.preventDefault(),p==null||p(n),h(!1)},R=e=>{if(typeof n!="object")throw new Error("Cannot toggle chip on other than array");if(T){if(n.includes(e)&&B){o([]);return}o([e]);return}if(n.includes(e)){const l=n.filter(_=>_!==e);o(l);return}o(l=>[...l,e])};return t.createElement(z,null,!m&&t.createElement(t.Fragment,null,t.createElement(E,null,s),g&&t.createElement(j,null,D),!g&&t.createElement(M,null,F),t.createElement(d,{variant:"flat",color:a,onClick:y},b)),m&&t.createElement(A,{onSubmit:I},t.createElement(E,null,s),i&&t.createElement(G,{...v,autoFocus:!0,value:n,label:s,onChange:e=>o(e.target.value)}),!i&&t.createElement(P,null,C.map(e=>t.createElement(Q,{color:a,onClick:l=>{l.preventDefault(),R(e)},key:e,variant:n.includes(e)?"solid":"outline"},e))),t.createElement(H,null,t.createElement(K,{type:"button",variant:"flat",color:"neutral",onClick:y},S),t.createElement(J,{type:"submit",color:a},w))))};export{U as default};
+  margin: 0.25rem;
+`,U=({value:u,label:s,onChange:f,options:v=[],inputProps:C={},isClearable:B=!1,editText:b,saveText:w,cancelText:S,noValueText:F,formatterFunc:p,isSingleSelect:T,color:a="secondary"})=>{const[n,l]=c(u),[V,k]=c(u),[m,h]=c(!1),i=typeof n=="string",L=p&&i?p(n):n,D=i?L:n.join(", "),x=n.length>0,g=()=>{m?l(V):k(n),h(e=>!e)},I=e=>{e.preventDefault(),f==null||f(n),h(!1)},R=e=>{if(typeof n!="object")throw new Error("Cannot toggle chip on other than array");if(T){if(n.includes(e)&&B){l([]);return}l([e]);return}if(n.includes(e)){const o=n.filter(_=>_!==e);l(o);return}l(o=>[...o,e])};return t.createElement(z,null,!m&&t.createElement(t.Fragment,null,t.createElement(E,null,s),x&&t.createElement(j,null,D),!x&&t.createElement(M,null,F),t.createElement(d,{variant:"flat",color:a,onClick:g},b)),m&&t.createElement(A,{onSubmit:I},t.createElement(E,null,s),i&&t.createElement(G,{...C,autoFocus:!0,value:n,label:s,onChange:e=>l(e.target.value)}),!i&&t.createElement(P,null,v.map(e=>t.createElement(Q,{color:a,onClick:o=>{o.preventDefault(),R(e)},key:e,variant:n.includes(e)?"solid":"outline"},e))),t.createElement(H,null,t.createElement(K,{type:"button",variant:"flat",color:"neutral",onClick:g},S),t.createElement(J,{type:"submit",color:a},w))))};export{U as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "8.6.1",
+  "version": "8.6.2",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/types/components/EditRow/index.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import { Color } from '../../Types';
 import { TextFieldProps } from '../Textfield';
-export interface EditRowProps {
+export interface EditRowProps<T> {
     value: string | string[];
     label: string;
     editText: string;
@@ -13,8 +12,8 @@ export interface EditRowProps {
     isSingleSelect?: boolean;
     inputProps?: TextFieldProps;
     isClearable?: boolean;
-    onEdit?<T>(value: T): void;
+    onChange?(value: T): void;
     formatterFunc?(value: string): string;
 }
-declare const EditRow: React.FC<EditRowProps>;
+declare const EditRow: <T extends string | string[]>({ value: initialValue, label, onChange, options, inputProps, isClearable, editText, saveText, cancelText, noValueText, formatterFunc, isSingleSelect, color, }: EditRowProps<T>) => JSX.Element;
 export default EditRow;