react-mix-tag-input - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

dist/index.d.ts

@@ -14,3 +14,6 @@ import React, { HTMLAttributes } from 'react';
   multiline?: boolean
+  placeholder?: string
   onChange?: (value: MixInputValue[]) => void
+  showTagDeleteBtn?: boolean
+  readonly?: boolean
 }
@@ -17,0 +20,0 @@

dist/index.js

 "use client";
-"use strict";var E=Object.create;var f=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var H=(t,n)=>{for(var e in n)f(t,e,{get:n[e],enumerable:!0})},A=(t,n,e,u)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of h(n))!V.call(t,i)&&i!==e&&f(t,i,{get:()=>n[i],enumerable:!(u=b(n,i))||u.enumerable});return t};var S=(t,n,e)=>(e=t!=null?E(N(t)):{},A(n||!t||!t.__esModule?f(e,"default",{value:t,enumerable:!0}):e,t)),v=t=>A(f({},"__esModule",{value:!0}),t);var P={};H(P,{default:()=>D});module.exports=v(P);var l=S(require("react"));var d="mtag";function x(t){var u;if(!t)return[];let n=Array.from(t),e=[];for(let i=0;i<n.length;i+=1){let o=n[i],c=e.at(-1);if(o instanceof Node&&o.nodeName==="#text"&&o.textContent!==`
-`&&o.textContent!==""&&(typeof c=="string"?e[e.length-1]=c+o.textContent:e.push(o.textContent||"")),o instanceof HTMLElement&&o.nodeName==="SPAN"){let a=(u=o==null?void 0:o.classList)==null?void 0:u.value.replace(d,"").trim();e.push({type:"tag",label:o.innerHTML||o.innerText,...a?{classes:a}:{}})}}return e}function M(t){return!Array.isArray(t)||t.length===0?"":t.reduce((n,e)=>{if(typeof e=="string")return n+=e;if(typeof e=="object"){let{label:u,classes:i}=e;return n+=`<span class="${d} ${i||""}" contenteditable="false">${u}</span>`}return""},"")}var C=(0,l.forwardRef)((t,n)=>{let{onChange:e,value:u,multiline:i,...o}=t,c=(0,l.useRef)(M(u)),a=(0,l.useRef)(null);(0,l.useEffect)(()=>{a.current&&(a.current.innerHTML=M(u))},[u]);let R=r=>{var y,I,T;let p=window.getSelection();if(!p)return;let m=p.getRangeAt(0);m.deleteContents();let s;if(typeof r=="string"?(s=document.createTextNode(r),s.textContent=r):typeof r=="object"&&r.type==="tag"&&(s=document.createElement("span"),s.classList.add(d),r.classes&&s.classList.add(r.classes),s.setAttribute("contentEditable","false"),s.innerHTML=r.label),!s){console.error("invalid content");return}m.insertNode(s);let g=document.createRange();g.setStartAfter(s),g.setEndAfter(s),p.removeAllRanges(),p.addRange(g),(y=a.current)==null||y.focus(),c.current=((I=a.current)==null?void 0:I.innerHTML)??"",e==null||e(x((T=a.current)==null?void 0:T.childNodes))};return(0,l.useImperativeHandle)(n,()=>({inputRef:a.current,insertContent:R,getValue:()=>{var r;return x((r=a.current)==null?void 0:r.childNodes)}})),l.default.createElement("div",{"aria-label":"input",role:"textbox",tabIndex:0,className:"mix-tag-input",contentEditable:!0,ref:a,onInput:()=>{var r;a.current&&(c.current=a.current.innerHTML),e==null||e(x((r=a.current)==null?void 0:r.childNodes))},onKeyDown:r=>{r.key==="Enter"&&!i&&r.preventDefault()},dangerouslySetInnerHTML:{__html:c.current},...i?{"aria-multiline":!0}:{},...o})}),L=C;var D=L;
+"use strict";var S=Object.create;var g=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var P=(t,r)=>{for(var e in r)g(t,e,{get:r[e],enumerable:!0})},A=(t,r,e,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of V(r))!D.call(t,a)&&a!==e&&g(t,a,{get:()=>r[a],enumerable:!(s=N(r,a))||s.enumerable});return t};var _=(t,r,e)=>(e=t!=null?S(C(t)):{},A(r||!t||!t.__esModule?g(e,"default",{value:t,enumerable:!0}):e,t)),w=t=>A(g({},"__esModule",{value:!0}),t);var $={};P($,{default:()=>F});module.exports=w($);var u=_(require("react"));var M="mtag";function m(t){var s;if(!t)return[];let r=Array.from(t),e=[];for(let a=0;a<r.length;a+=1){let o=r[a],x=e.at(-1);if(o instanceof Node&&o.nodeName==="#text"&&o.textContent!==`
+`&&o.textContent!==""&&(typeof x=="string"?e[e.length-1]=x+o.textContent:e.push(o.textContent||"")),o instanceof HTMLElement&&o.nodeName==="SPAN"){let p=(s=o==null?void 0:o.classList)==null?void 0:s.value.replace(M,"").trim();e.push({type:"tag",label:o.innerHTML||o.innerText,...p?{classes:p}:{}})}}return e}function b(t,r=!1){return!Array.isArray(t)||t.length===0?"":t.reduce((e,s)=>{if(typeof s=="string")return e+=s;if(typeof s=="object"){let{label:a,classes:o}=s;return e+=`<span class="${M} ${o||""}" contenteditable="false">${a} ${r?'<button class="mtag-delete-btn" contenteditable="false" tabindex="-1">\xD7</button>':""}</span>`}return""},"")}var K=(0,u.forwardRef)((t,r)=>{let{onChange:e,onClick:s,value:a,multiline:o,placeholder:x,showTagDeleteBtn:p=!0,readonly:R=!1,...H}=t,y=(0,u.useRef)(b(a,p)),l=(0,u.useRef)(null);(0,u.useEffect)(()=>{l.current&&(l.current.innerHTML=b(a,p))},[a]);let v=n=>{var E,I,L;let c=window.getSelection();if(!c)return;let d=c.getRangeAt(0);if(d.commonAncestorContainer!==l.current&&d.commonAncestorContainer.parentElement!==l.current)return;d.deleteContents();let i=null;if(typeof n=="string")i=document.createTextNode(n),i.textContent=n;else if(typeof n=="object"&&n.type==="tag"&&(i=document.createElement("span"),i.classList.add(M),n.classes&&i.classList.add(n.classes),i.setAttribute("contentEditable","false"),i.innerHTML=n.label,p)){let f=document.createElement("button");f.classList.add("mtag-delete-btn"),f.setAttribute("contentEditable","false"),f.setAttribute("tabIndex","-1"),f.innerHTML="&times;",i.appendChild(f)}if(!i){console.error("invalid content");return}d.insertNode(i);let T=document.createRange();T.setStartAfter(i),T.setEndAfter(i),c.removeAllRanges(),c.addRange(T),(E=l.current)==null||E.focus(),y.current=((I=l.current)==null?void 0:I.innerHTML)??"",e==null||e(m((L=l.current)==null?void 0:L.childNodes))};return(0,u.useImperativeHandle)(r,()=>({inputRef:l.current,insertContent:v,getValue:()=>{var n;return m((n=l.current)==null?void 0:n.childNodes)}})),u.default.createElement("div",{"data-placeholder":x,"aria-label":"input",role:"textbox",tabIndex:0,className:"mix-tag-input",contentEditable:!R,ref:l,onInput:()=>{var n;l.current&&(y.current=l.current.innerHTML),e==null||e(m((n=l.current)==null?void 0:n.childNodes))},onKeyDown:n=>{n.key==="Enter"&&!o&&n.preventDefault()},onClick:n=>{var c,d,i;n.target instanceof HTMLButtonElement&&n.target.classList.contains("mtag-delete-btn")&&((d=(c=n.target)==null?void 0:c.parentElement)==null||d.remove(),e==null||e(m((i=l.current)==null?void 0:i.childNodes))),s==null||s(n)},dangerouslySetInnerHTML:{__html:y.current},...o?{"aria-multiline":!0}:{},...H})}),h=K;var F=h;
 //# sourceMappingURL=index.js.map

package.json

 {
   "private": false,
   "name": "react-mix-tag-input",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "A simple react component for inputting tags with a mix of text",
@@ -6,0 +6,0 @@ "module": "dist/index.d.ts",

src/MixInputType.d.ts

@@ -16,3 +16,6 @@ import '@total-typescript/ts-reset'
   multiline?: boolean
+  placeholder?: string
   onChange?: (value: MixInputValue[]) => void
+  showTagDeleteBtn?: boolean
+  readonly?: boolean
 }
@@ -19,0 +22,0 @@

src/utils.ts

@@ -39,3 +39,3 @@ import { type MixInputValue } from './MixInputType'
 
-export function tagValueArrToString(valueArr: MixInputValue[] | undefined): string {
+export function tagValueArrToString(valueArr: MixInputValue[] | undefined, isTagDeletable = false): string {
   if (!Array.isArray(valueArr) || valueArr.length === 0) {
@@ -52,3 +52,3 @@ return ''
       return (acc += `<span class="${DEFAULT_TAG_CLASS} ${classes || ''
-        }" contenteditable="false">${label}</span>`)
+        }" contenteditable="false">${label} ${isTagDeletable ? '<button class="mtag-delete-btn" contenteditable="false" tabindex="-1">×</button>' : ''}</span>`)
     }
@@ -55,0 +55,0 @@ return ''

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46424

increased by22.74%

Lines of code

446

increased by32.34%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes