@yaireo/tagify - npm Package Compare versions

src/react-compat-layer.js

2

dist/tagify.polyfills.min.js

		/*
		Tagify v4.27.0 - tags input component
		Tagify v4.31.0 - tags input component
		By: Yair Even-Or <vsync.design@gmail.com>
		@@ -4,0 +4,0 @@ https://github.com/yairEO/tagify

24

package.json

		{
		"name": "@yaireo/tagify",
		"version": "4.27.0",
		"version": "4.31.0",
		"homepage": "https://github.com/yairEO/tagify",
		@@ -29,2 +29,10 @@ "description": "lightweight, efficient Tags input component in Vanilla JS / React / Angular [super customizable, tiny size & top performance]",
		},
		"scripts": {
		"start": "gulp --dev",
		"build": "gulp",
		"version": "gulp build && git add .",
		"prepublishOnly": "pjv",
		"test": "pnpm exec playwright test",
		"serve": "npx http-server -o index.html -c-1"
		},
		"jest": {
		@@ -42,4 +50,4 @@ "preset": "jest-puppeteer"
		"./react.tagify": "./src/react.tagify",
		"./dist/react.tagify": "./dist/react.tagify.jsx",
		"./dist/react.tagify.jsx": "./dist/react.tagify.jsx",
		"./dist/react.tagify": "./src/react.tagify",
		"./dist/react.tagify.jsx": "./src/react.tagify",
		"./dist/tagify.min.js": "./dist/tagify.js",
		@@ -50,2 +58,3 @@ "./dist/tagify.min": "./dist/tagify.js",
		"./dist/tagify.vue": "./dist/tagify.vue",
		"./vue": "./dist/tagify.vue",
		"./dist/tagify.css": "./dist/tagify.css"
		@@ -109,10 +118,3 @@ },
		"vinyl-source-stream": "^2.0.0"
		},
		"scripts": {
		"start": "gulp --dev",
		"build": "gulp",
		"version": "gulp build && git add .",
		"test": "pnpm exec playwright test",
		"serve": "npx http-server -o index.html -c-1"
		}
		}
		}

3

src/parts/dropdown.js

		@@ -210,6 +210,5 @@ import { sameStr, isObject, minify, getNodeHeight, getCaretGlobalPosition } from './helpers'
		_s = this.settings,
		enabled = typeof _s.dropdown.enabled == 'number' && _s.dropdown.enabled >= 0,
		appendTarget = this.dropdown.getAppendTarget();

		if( !enabled ) return this;
		if( !_s.dropdown.enabled ) return this;

		@@ -216,0 +215,0 @@ this.DOM.scope.setAttribute("aria-expanded", true)

45

src/parts/events.js

		import { decode, extend, getfirstTextNode, isChromeAndroidBrowser, isNodeTag, isWithinNodeTag, injectAtCaret, getSetTagData, fixCaretBetweenTags, placeCaretAfterNode } from './helpers'
		import {ZERO_WIDTH_CHAR} from './constants'

		var deleteBackspaceTimeout;

		export function triggerChangeEvent(){
		@@ -455,45 +453,2 @@ if( this.settings.mixMode.integrated ) return;

		clearTimeout(deleteBackspaceTimeout)
		// a minimum delay is needed before the node actually gets detached from the document (don't know why),
		// to know exactly which tag was deleted. This is the easiest way of knowing besides using MutationObserver
		deleteBackspaceTimeout = setTimeout(() => {
		var sel = document.getSelection(),
		currentValue = decode(this.DOM.input.innerHTML),
		prevElm = !deleteKeyTagDetected && sel.anchorNode.previousSibling;

		// fixes #384, where the first and only tag will not get removed with backspace
		/*
		* [UPDATE DEC 3, 22] SEEMS BELOEW CODE IS NOT NEEDED ANY MORE
		*
		if( currentValue.length > lastInputValue.length && prevElm ){
		if( isNodeTag.call(this, prevElm) && !prevElm.hasAttribute('readonly') ){
		this.removeTags(prevElm)
		this.fixFirefoxLastTagNoCaret()

		// the above "removeTag" methods removes the tag with a transition. Chrome adds a <br> element for some reason at this stage
		if( this.DOM.input.children.length == 2 && this.DOM.input.children[1].tagName == "BR" ){
		this.DOM.input.innerHTML = ""
		this.value.length = 0
		return true
		}
		}

		else
		prevElm.remove()
		}
		*/

		// find out which tag(s) were deleted and trigger "remove" event
		// iterate over the list of tags still in the document and then filter only those from the "this.value" collection
		this.value = [].map.call(lastTagElems, (node, nodeIdx) => {
		var tagData = getSetTagData(node)

		// since readonly cannot be removed (it's technically resurrected if removed somehow)
		if( node.parentNode \|\| tagData.readonly )
		return tagData
		else
		this.trigger('remove', { tag:node, index:nodeIdx, data:tagData })
		})
		.filter(n=>n) // remove empty items in the mapped array
		}, 20) // Firefox needs this higher duration for some reason or things get buggy when deleting text from the end
		break;
		@@ -500,0 +455,0 @@ }

2

src/parts/suggestions.js

		@@ -289,3 +289,3 @@ import { isObject, escapeHTML, extend, unaccent, logger } from './helpers'

		if( !value \|\| !tagData && !isNoMatch ){
		if( !tagData && !isNoMatch ){
		closeOnSelect && setTimeout(this.dropdown.hide.bind(this))
		@@ -292,0 +292,0 @@ return

85

src/react.tagify.jsx

		'use client';

		import React, {useMemo, useEffect, useRef, useCallback} from "react"
		import {renderToStaticMarkup} from "react-dom/server"
		import {string, array, func, bool, object, oneOfType} from "prop-types"
		import React, {memo, useMemo, useEffect, useRef, useCallback, renderToStaticMarkup} from './react-compat-layer'
		// import {renderToStaticMarkup} from "react-dom/server"
		// import {string, array, func, bool, object, oneOfType} from "prop-types"
		import Tagify from "./tagify.js"
		@@ -243,44 +243,45 @@

		TagifyWrapper.propTypes = {
		name: string,
		value: oneOfType([string, array]),
		loading: bool,
		children: oneOfType([string, array]),
		onChange: func,
		readOnly: bool,
		disabled: bool,
		userInput: bool,
		settings: object,
		InputMode: string,
		autoFocus: bool,
		className: string,
		tagifyRef: object,
		whitelist: array,
		placeholder: string,
		defaultValue: oneOfType([string, array]),
		showDropdown: oneOfType([string, bool]),
		onInput: func,
		onAdd: func,
		onRemove: func,
		onEditInput: func,
		onEditBeforeUpdate: func,
		onEditUpdated: func,
		onEditStart: func,
		onEditKeydown: func,
		onInvalid: func,
		onClick: func,
		onKeydown: func,
		onFocus: func,
		onBlur: func,
		onDropdownShow: func,
		onDropdownHide: func,
		onDropdownSelect: func,
		onDropdownScroll: func,
		onDropdownNoMatch: func,
		onDropdownUpdated: func,
		}
		// TagifyWrapper.propTypes = {
		// name: string,
		// value: oneOfType([string, array]),
		// loading: bool,
		// children: oneOfType([string, array]),
		// onChange: func,
		// readOnly: bool,
		// disabled: bool,
		// userInput: bool,
		// settings: object,
		// InputMode: string,
		// autoFocus: bool,
		// className: string,
		// tagifyRef: object,
		// whitelist: array,
		// placeholder: string,
		// defaultValue: oneOfType([string, array]),
		// showDropdown: oneOfType([string, bool]),
		// onInput: func,
		// onAdd: func,
		// onRemove: func,
		// onEditInput: func,
		// onEditBeforeUpdate: func,
		// onEditUpdated: func,
		// onEditStart: func,
		// onEditKeydown: func,
		// onInvalid: func,
		// onClick: func,
		// onKeydown: func,
		// onFocus: func,
		// onBlur: func,
		// onDropdownShow: func,
		// onDropdownHide: func,
		// onDropdownSelect: func,
		// onDropdownScroll: func,
		// onDropdownNoMatch: func,
		// onDropdownUpdated: func,
		// }

		const Tags = React.memo(TagifyWrapper)
		const Tags = memo(TagifyWrapper)
		Tags.displayName = "Tags"


		export const MixedTags = ({ children, ...rest }) =>
		@@ -287,0 +288,0 @@ <Tags InputMode="textarea" {...rest}>{children}</Tags>

dist/react.tagify.jsx