New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-tag-autocomplete
Advanced tools
react-tag-autocomplete - npm Package Compare versions
Comparing version 6.3.0 to 7.0.0-beta.1
@@ -1,540 +0,2 @@ | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('prop-types')) : | ||
| typeof define === 'function' && define.amd ? define(['react', 'prop-types'], factory) : | ||
| (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ReactTags = factory(global.React, global.PropTypes)); | ||
| }(this, (function (React, PropTypes) { 'use strict'; | ||
| function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
| var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
| var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes); | ||
| function Tag (props) { | ||
| return ( | ||
| React__default['default'].createElement( 'button', { type: 'button', className: props.classNames.selectedTag, title: props.removeButtonText, onClick: props.onDelete }, | ||
| React__default['default'].createElement( 'span', { className: props.classNames.selectedTagName }, props.tag.name) | ||
| ) | ||
| ) | ||
| } | ||
| var SIZER_STYLES = { | ||
| position: 'absolute', | ||
| width: 0, | ||
| height: 0, | ||
| visibility: 'hidden', | ||
| overflow: 'scroll', | ||
| whiteSpace: 'pre' | ||
| }; | ||
| var STYLE_PROPS = [ | ||
| 'fontSize', | ||
| 'fontFamily', | ||
| 'fontWeight', | ||
| 'fontStyle', | ||
| 'letterSpacing', | ||
| 'textTransform' | ||
| ]; | ||
| var Input = /*@__PURE__*/(function (superclass) { | ||
| function Input (props) { | ||
| superclass.call(this, props); | ||
| this.state = { inputWidth: null }; | ||
| this.input = React__default['default'].createRef(); | ||
| this.sizer = React__default['default'].createRef(); | ||
| } | ||
| if ( superclass ) Input.__proto__ = superclass; | ||
| Input.prototype = Object.create( superclass && superclass.prototype ); | ||
| Input.prototype.constructor = Input; | ||
| Input.prototype.componentDidMount = function componentDidMount () { | ||
| if (this.props.autoresize) { | ||
| this.copyInputStyles(); | ||
| this.updateInputWidth(); | ||
| } | ||
| }; | ||
| Input.prototype.componentDidUpdate = function componentDidUpdate (ref) { | ||
| var query = ref.query; | ||
| var placeholderText = ref.placeholderText; | ||
| if (query !== this.props.query || placeholderText !== this.props.placeholderText) { | ||
| this.updateInputWidth(); | ||
| } | ||
| }; | ||
| Input.prototype.copyInputStyles = function copyInputStyles () { | ||
| var this$1$1 = this; | ||
| var inputStyle = window.getComputedStyle(this.input.current); | ||
| STYLE_PROPS.forEach(function (prop) { | ||
| this$1$1.sizer.current.style[prop] = inputStyle[prop]; | ||
| }); | ||
| }; | ||
| Input.prototype.updateInputWidth = function updateInputWidth () { | ||
| var inputWidth; | ||
| if (this.props.autoresize) { | ||
| // scrollWidth is designed to be fast not accurate. | ||
| // +2 is completely arbitrary but does the job. | ||
| inputWidth = Math.ceil(this.sizer.current.scrollWidth) + 2; | ||
| } | ||
| if (inputWidth !== this.state.inputWidth) { | ||
| this.setState({ inputWidth: inputWidth }); | ||
| } | ||
| }; | ||
| Input.prototype.render = function render () { | ||
| var ref = this.props; | ||
| var id = ref.id; | ||
| var query = ref.query; | ||
| var ariaLabelText = ref.ariaLabelText; | ||
| var placeholderText = ref.placeholderText; | ||
| var expanded = ref.expanded; | ||
| var classNames = ref.classNames; | ||
| var inputAttributes = ref.inputAttributes; | ||
| var inputEventHandlers = ref.inputEventHandlers; | ||
| var index = ref.index; | ||
| return ( | ||
| React__default['default'].createElement( 'div', { className: classNames.searchWrapper }, | ||
| React__default['default'].createElement( 'input', Object.assign({}, | ||
| inputAttributes, inputEventHandlers, { ref: this.input, value: query, placeholder: placeholderText, className: classNames.searchInput, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': ariaLabelText || placeholderText, 'aria-owns': id, 'aria-activedescendant': index > -1 ? (id + "-" + index) : null, 'aria-expanded': expanded, style: { width: this.state.inputWidth } })), | ||
| React__default['default'].createElement( 'div', { ref: this.sizer, style: SIZER_STYLES }, query || placeholderText) | ||
| ) | ||
| ) | ||
| }; | ||
| return Input; | ||
| }(React__default['default'].Component)); | ||
| function escapeForRegExp (string) { | ||
| return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&') | ||
| } | ||
| function matchAny (string) { | ||
| return new RegExp(escapeForRegExp(string), 'gi') | ||
| } | ||
| function matchPartial (string) { | ||
| return new RegExp(("(?:^|\\s)" + (escapeForRegExp(string))), 'i') | ||
| } | ||
| function matchExact (string) { | ||
| return new RegExp(("^" + (escapeForRegExp(string)) + "$"), 'i') | ||
| } | ||
| function markIt (name, query) { | ||
| var regexp = matchAny(query); | ||
| return name.replace(regexp, '<mark>$&</mark>') | ||
| } | ||
| function DefaultSuggestionComponent (ref) { | ||
| var item = ref.item; | ||
| var query = ref.query; | ||
| return ( | ||
| React__default['default'].createElement( 'span', { dangerouslySetInnerHTML: { __html: markIt(item.name, query) } }) | ||
| ) | ||
| } | ||
| function Suggestions (props) { | ||
| var SuggestionComponent = props.suggestionComponent || DefaultSuggestionComponent; | ||
| var options = props.options.map(function (item, index) { | ||
| var key = (props.id) + "-" + index; | ||
| var classNames = []; | ||
| if (props.index === index) { | ||
| classNames.push(props.classNames.suggestionActive); | ||
| } | ||
| if (item.disabled) { | ||
| classNames.push(props.classNames.suggestionDisabled); | ||
| } | ||
| return ( | ||
| React__default['default'].createElement( 'li', { | ||
| id: key, key: key, role: 'option', className: classNames.join(' '), 'aria-disabled': Boolean(item.disabled), onMouseDown: function (e) { return e.preventDefault(); }, onClick: function () { return props.addTag(item); } }, | ||
| item.prefix | ||
| ? React__default['default'].createElement( 'span', { className: props.classNames.suggestionPrefix }, item.prefix, ' ') | ||
| : null, | ||
| item.disableMarkIt | ||
| ? item.name | ||
| : React__default['default'].createElement( SuggestionComponent, { item: item, query: props.query }) | ||
| ) | ||
| ) | ||
| }); | ||
| return ( | ||
| React__default['default'].createElement( 'div', { className: props.classNames.suggestions }, | ||
| React__default['default'].createElement( 'ul', { role: 'listbox', id: props.id }, options) | ||
| ) | ||
| ) | ||
| } | ||
| function focusNextElement (scope, currentTarget) { | ||
| var interactiveEls = scope.querySelectorAll('a,button,input'); | ||
| var currentEl = Array.prototype.findIndex.call( | ||
| interactiveEls, | ||
| function (element) { return element === currentTarget; } | ||
| ); | ||
| var nextEl = interactiveEls[currentEl - 1] || interactiveEls[currentEl + 1]; | ||
| if (nextEl) { | ||
| nextEl.focus(); | ||
| } | ||
| } | ||
| var KEYS = { | ||
| ENTER: 'Enter', | ||
| TAB: 'Tab', | ||
| BACKSPACE: 'Backspace', | ||
| UP_ARROW: 'ArrowUp', | ||
| UP_ARROW_COMPAT: 'Up', | ||
| DOWN_ARROW: 'ArrowDown', | ||
| DOWN_ARROW_COMPAT: 'Down' | ||
| }; | ||
| var CLASS_NAMES = { | ||
| root: 'react-tags', | ||
| rootFocused: 'is-focused', | ||
| selected: 'react-tags__selected', | ||
| selectedTag: 'react-tags__selected-tag', | ||
| selectedTagName: 'react-tags__selected-tag-name', | ||
| search: 'react-tags__search', | ||
| searchWrapper: 'react-tags__search-wrapper', | ||
| searchInput: 'react-tags__search-input', | ||
| suggestions: 'react-tags__suggestions', | ||
| suggestionActive: 'is-active', | ||
| suggestionDisabled: 'is-disabled', | ||
| suggestionPrefix: 'react-tags__suggestion-prefix' | ||
| }; | ||
| function findMatchIndex (options, query) { | ||
| return options.findIndex(function (option) { return matchExact(query).test(option.name); }) | ||
| } | ||
| function pressDelimiter () { | ||
| if (this.state.query.length >= this.props.minQueryLength) { | ||
| // Check if the user typed in an existing suggestion. | ||
| var match = findMatchIndex(this.state.options, this.state.query); | ||
| var index = this.state.index === -1 ? match : this.state.index; | ||
| var tag = index > -1 ? this.state.options[index] : null; | ||
| if (tag) { | ||
| this.addTag(tag); | ||
| } else if (this.props.allowNew) { | ||
| this.addTag({ name: this.state.query }); | ||
| } | ||
| } | ||
| } | ||
| function pressUpKey (e) { | ||
| e.preventDefault(); | ||
| // if first item, cycle to the bottom | ||
| var size = this.state.options.length - 1; | ||
| this.setState({ index: this.state.index <= 0 ? size : this.state.index - 1 }); | ||
| } | ||
| function pressDownKey (e) { | ||
| e.preventDefault(); | ||
| // if last item, cycle to top | ||
| var size = this.state.options.length - 1; | ||
| this.setState({ index: this.state.index >= size ? 0 : this.state.index + 1 }); | ||
| } | ||
| function pressBackspaceKey () { | ||
| // when backspace key is pressed and query is blank, delete the last tag | ||
| if (!this.state.query.length) { | ||
| this.deleteTag(this.props.tags.length - 1); | ||
| } | ||
| } | ||
| function defaultSuggestionsFilter (item, query) { | ||
| var regexp = matchPartial(query); | ||
| return regexp.test(item.name) | ||
| } | ||
| function getOptions (props, state) { | ||
| var options; | ||
| if (props.suggestionsTransform) { | ||
| options = props.suggestionsTransform(state.query, props.suggestions); | ||
| } else { | ||
| options = props.suggestions.filter(function (item) { return props.suggestionsFilter(item, state.query); }); | ||
| } | ||
| options = options.slice(0, props.maxSuggestionsLength); | ||
| if (props.allowNew && props.newTagText && findMatchIndex(options, state.query) === -1) { | ||
| options.push({ id: 0, name: state.query, prefix: props.newTagText, disableMarkIt: true }); | ||
| } else if (props.noSuggestionsText && options.length === 0) { | ||
| options.push({ id: 0, name: props.noSuggestionsText, disabled: true, disableMarkIt: true }); | ||
| } | ||
| return options | ||
| } | ||
| var ReactTags = /*@__PURE__*/(function (superclass) { | ||
| function ReactTags (props) { | ||
| superclass.call(this, props); | ||
| this.state = { | ||
| query: '', | ||
| focused: false, | ||
| index: -1 | ||
| }; | ||
| this.inputEventHandlers = { | ||
| // Provide a no-op function to the input component to avoid warnings | ||
| // <https://github.com/i-like-robots/react-tags/issues/135> | ||
| // <https://github.com/facebook/react/issues/13835> | ||
| onChange: function () {}, | ||
| onBlur: this.onBlur.bind(this), | ||
| onFocus: this.onFocus.bind(this), | ||
| onInput: this.onInput.bind(this), | ||
| onKeyDown: this.onKeyDown.bind(this) | ||
| }; | ||
| this.container = React__default['default'].createRef(); | ||
| this.input = React__default['default'].createRef(); | ||
| } | ||
| if ( superclass ) ReactTags.__proto__ = superclass; | ||
| ReactTags.prototype = Object.create( superclass && superclass.prototype ); | ||
| ReactTags.prototype.constructor = ReactTags; | ||
| ReactTags.prototype.onInput = function onInput (e) { | ||
| var query = e.target.value; | ||
| if (this.props.onInput) { | ||
| this.props.onInput(query); | ||
| } | ||
| // NOTE: This test is a last resort for soft keyboards and browsers which do not | ||
| // support `KeyboardEvent.key`. | ||
| // <https://bugs.chromium.org/p/chromium/issues/detail?id=763559> | ||
| // <https://bugs.chromium.org/p/chromium/issues/detail?id=118639> | ||
| if ( | ||
| query.length === this.state.query.length + 1 && | ||
| this.props.delimiters.indexOf(query.slice(-1)) > -1 | ||
| ) { | ||
| pressDelimiter.call(this); | ||
| } else if (query !== this.state.query) { | ||
| this.setState({ query: query }); | ||
| } | ||
| }; | ||
| ReactTags.prototype.onKeyDown = function onKeyDown (e) { | ||
| // when one of the terminating keys is pressed, add current query to the tags | ||
| if (this.props.delimiters.indexOf(e.key) > -1) { | ||
| if (this.state.query || this.state.index > -1) { | ||
| e.preventDefault(); | ||
| } | ||
| pressDelimiter.call(this); | ||
| } | ||
| // when backspace key is pressed and query is blank, delete the last tag | ||
| if (e.key === KEYS.BACKSPACE && this.props.allowBackspace) { | ||
| pressBackspaceKey.call(this, e); | ||
| } | ||
| if (e.key === KEYS.UP_ARROW || e.key === KEYS.UP_ARROW_COMPAT) { | ||
| pressUpKey.call(this, e); | ||
| } | ||
| if (e.key === KEYS.DOWN_ARROW || e.key === KEYS.DOWN_ARROW_COMPAT) { | ||
| pressDownKey.call(this, e); | ||
| } | ||
| }; | ||
| ReactTags.prototype.onClick = function onClick (e) { | ||
| if (document.activeElement !== e.target) { | ||
| this.focusInput(); | ||
| } | ||
| }; | ||
| ReactTags.prototype.onBlur = function onBlur () { | ||
| this.setState({ focused: false, index: -1 }); | ||
| if (this.props.onBlur) { | ||
| this.props.onBlur(); | ||
| } | ||
| if (this.props.addOnBlur) { | ||
| pressDelimiter.call(this); | ||
| } | ||
| }; | ||
| ReactTags.prototype.onFocus = function onFocus () { | ||
| this.setState({ focused: true }); | ||
| if (this.props.onFocus) { | ||
| this.props.onFocus(); | ||
| } | ||
| }; | ||
| ReactTags.prototype.onDeleteTag = function onDeleteTag (index, event) { | ||
| // Because we'll destroy the element with cursor focus we need to ensure | ||
| // it does not get lost and move it to the next interactive element | ||
| if (this.container.current) { | ||
| focusNextElement(this.container.current, event.currentTarget); | ||
| } | ||
| this.deleteTag(index); | ||
| }; | ||
| ReactTags.prototype.addTag = function addTag (tag) { | ||
| if (tag.disabled) { | ||
| return | ||
| } | ||
| if (typeof this.props.onValidate === 'function' && !this.props.onValidate(tag)) { | ||
| return | ||
| } | ||
| this.props.onAddition({ id: tag.id, name: tag.name }); | ||
| this.clearInput(); | ||
| }; | ||
| ReactTags.prototype.deleteTag = function deleteTag (i) { | ||
| this.props.onDelete(i); | ||
| }; | ||
| ReactTags.prototype.clearInput = function clearInput () { | ||
| this.setState({ | ||
| query: '', | ||
| index: -1 | ||
| }); | ||
| }; | ||
| ReactTags.prototype.clearSelectedIndex = function clearSelectedIndex () { | ||
| this.setState({ index: -1 }); | ||
| }; | ||
| ReactTags.prototype.focusInput = function focusInput () { | ||
| if (this.input.current && this.input.current.input.current) { | ||
| this.input.current.input.current.focus(); | ||
| } | ||
| }; | ||
| ReactTags.prototype.render = function render () { | ||
| var this$1$1 = this; | ||
| var TagComponent = this.props.tagComponent || Tag; | ||
| var expanded = this.state.focused && this.state.query.length >= this.props.minQueryLength; | ||
| var classNames = Object.assign({}, CLASS_NAMES, this.props.classNames); | ||
| var rootClassNames = [classNames.root]; | ||
| this.state.focused && rootClassNames.push(classNames.rootFocused); | ||
| return ( | ||
| React__default['default'].createElement( 'div', { ref: this.container, className: rootClassNames.join(' '), onClick: this.onClick.bind(this) }, | ||
| React__default['default'].createElement( 'div', { | ||
| className: classNames.selected, 'aria-relevant': 'additions removals', 'aria-live': 'polite' }, | ||
| this.props.tags.map(function (tag, i) { return ( | ||
| React__default['default'].createElement( TagComponent, { | ||
| key: i, tag: tag, removeButtonText: this$1$1.props.removeButtonText, classNames: classNames, onDelete: this$1$1.onDeleteTag.bind(this$1$1, i) }) | ||
| ); }) | ||
| ), | ||
| React__default['default'].createElement( 'div', { className: classNames.search }, | ||
| React__default['default'].createElement( Input, Object.assign({}, | ||
| this.state, { id: this.props.id, ref: this.input, classNames: classNames, inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, autoresize: this.props.autoresize, expanded: expanded, placeholderText: this.props.placeholderText, ariaLabelText: this.props.ariaLabelText })), | ||
| expanded && this.state.options.length | ||
| ? React__default['default'].createElement( Suggestions, Object.assign({}, | ||
| this.state, { id: this.props.id, classNames: classNames, expanded: expanded, addTag: this.addTag.bind(this), suggestionComponent: this.props.suggestionComponent })) | ||
| : null | ||
| ) | ||
| ) | ||
| ) | ||
| }; | ||
| ReactTags.getDerivedStateFromProps = function getDerivedStateFromProps (props, state) { | ||
| if (state.prevQuery !== state.query || state.prevSuggestions !== props.suggestions) { | ||
| return { | ||
| prevQuery: state.query, | ||
| prevSuggestions: props.suggestions, | ||
| options: getOptions(props, state) | ||
| } | ||
| } | ||
| return null | ||
| }; | ||
| return ReactTags; | ||
| }(React__default['default'].Component)); | ||
| ReactTags.defaultProps = { | ||
| id: 'ReactTags', | ||
| tags: [], | ||
| placeholderText: 'Add new tag', | ||
| removeButtonText: 'Click to remove tag', | ||
| noSuggestionsText: null, | ||
| newTagText: null, | ||
| suggestions: [], | ||
| suggestionsFilter: defaultSuggestionsFilter, | ||
| suggestionsTransform: null, | ||
| autoresize: true, | ||
| classNames: CLASS_NAMES, | ||
| delimiters: [KEYS.TAB, KEYS.ENTER], | ||
| minQueryLength: 2, | ||
| maxSuggestionsLength: 6, | ||
| allowNew: false, | ||
| allowBackspace: true, | ||
| addOnBlur: false, | ||
| tagComponent: null, | ||
| suggestionComponent: null, | ||
| inputAttributes: {} | ||
| }; | ||
| ReactTags.propTypes = { | ||
| id: PropTypes__default['default'].string, | ||
| tags: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object), | ||
| placeholderText: PropTypes__default['default'].string, | ||
| ariaLabelText: PropTypes__default['default'].string, | ||
| removeButtonText: PropTypes__default['default'].string, | ||
| noSuggestionsText: PropTypes__default['default'].string, | ||
| newTagText: PropTypes__default['default'].string, | ||
| suggestions: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object), | ||
| suggestionsFilter: PropTypes__default['default'].func, | ||
| suggestionsTransform: PropTypes__default['default'].func, | ||
| autoresize: PropTypes__default['default'].bool, | ||
| delimiters: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string), | ||
| onDelete: PropTypes__default['default'].func.isRequired, | ||
| onAddition: PropTypes__default['default'].func.isRequired, | ||
| onInput: PropTypes__default['default'].func, | ||
| onFocus: PropTypes__default['default'].func, | ||
| onBlur: PropTypes__default['default'].func, | ||
| onValidate: PropTypes__default['default'].func, | ||
| minQueryLength: PropTypes__default['default'].number, | ||
| maxSuggestionsLength: PropTypes__default['default'].number, | ||
| classNames: PropTypes__default['default'].object, | ||
| allowNew: PropTypes__default['default'].bool, | ||
| allowBackspace: PropTypes__default['default'].bool, | ||
| addOnBlur: PropTypes__default['default'].bool, | ||
| tagComponent: PropTypes__default['default'].oneOfType([ | ||
| PropTypes__default['default'].func, | ||
| PropTypes__default['default'].element | ||
| ]), | ||
| suggestionComponent: PropTypes__default['default'].oneOfType([ | ||
| PropTypes__default['default'].func, | ||
| PropTypes__default['default'].element | ||
| ]), | ||
| inputAttributes: PropTypes__default['default'].object | ||
| }; | ||
| return ReactTags; | ||
| }))); | ||
| var st=Object.defineProperty,ot=Object.defineProperties;var lt=Object.getOwnPropertyDescriptors;var L=Object.getOwnPropertySymbols;var Q=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable;var J=(d,s,g)=>s in d?st(d,s,{enumerable:!0,configurable:!0,writable:!0,value:g}):d[s]=g,p=(d,s)=>{for(var g in s||(s={}))Q.call(s,g)&&J(d,g,s[g]);if(L)for(var g of L(s))X.call(s,g)&&J(d,g,s[g]);return d},b=(d,s)=>ot(d,lt(s));var Y=(d,s)=>{var g={};for(var u in d)Q.call(d,u)&&s.indexOf(u)<0&&(g[u]=d[u]);if(d!=null&&L)for(var u of L(d))s.indexOf(u)<0&&X.call(d,u)&&(g[u]=d[u]);return g};(function(d,s){typeof exports=="object"&&typeof module!="undefined"?s(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],s):(d=typeof globalThis!="undefined"?globalThis:d||self,s(d.ReactTags={},d.React))})(this,function(d,s){"use strict";function g(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var u=g(s);function Z(e){return e.selectionStart===0&&e.selectionEnd===0}function R(e){const t=e.value.length;return e.selectionStart===t&&e.selectionEnd===t}function at(e){return e}function N(e){return`${e}-label`}function M(e){return`${e}-combobox`}function ee(e){return`${e}-input`}function z(e){return`${e}-listbox`}function W(e,t){return`${e}-option-${se(t)}`}const te=/%value%/;function _(e,t){return e.replace(te,t)}const ne=/\s+/g;function D(e){return`${String(e.value)}-${e.label}`}function se(e){return D(e).replace(ne,"_")}function O(e,t){return t.findIndex(({value:n})=>n===e.value)}const oe=/[-\\^$*+?.()|[\]{}]/g;function q(e){return e.replace(oe,"\\$&")}function H(e){return new RegExp(`${q(e)}`,"i")}function le(e){return new RegExp(`^${q(e)}$`,"i")}function ae(e){const t=H(e);return n=>t.test(n)}function ue(e){const t=le(e);return n=>t.test(n)}function re(e,t){const n=ae(e);return t.filter(o=>n(o.label))}function ie(e,t){const n=ue(e);return t.find(o=>n(o.label))||null}const v=u.default.createContext(null);function ce(){const{comboBoxRef:e,id:t,manager:n}=s.useContext(v),o=s.useCallback(r=>{var c;((c=e.current)==null?void 0:c.contains(r.relatedTarget))||(n.collapse(),n.clearActiveIndex())},[e,n]),l=s.useCallback(r=>{var c;((c=e.current)==null?void 0:c.contains(r.relatedTarget))||n.expand()},[e,n]),a=s.useCallback(()=>{n.state.isExpanded||n.expand()},[n]);return{id:M(t),onBlur:o,onClick:a,onFocus:l,ref:e}}const w={Enter:"Enter",Escape:"Escape",Tab:"Tab",Backspace:"Backspace",UpArrow:"ArrowUp",UpArrowCompat:"Up",DownArrow:"ArrowDown",DownArrowCompat:"Down"},G=Symbol("Create new tag"),de=Symbol("No options"),fe={autoComplete:"off",autoCorrect:"off","data-form-type":"other",spellCheck:!1},P=()=>{};function pe({allowBackspace:e,allowTab:t,ariaDescribedBy:n,ariaErrorMessage:o}){const{id:l,inputRef:a,isDisabled:r,isInvalid:c,manager:i,onInput:m,onSelect:x}=s.useContext(v),E=s.useCallback(f=>{const k=f.currentTarget.value;i.updateValue(k),m==null||m(k)},[i,m]),y=s.useCallback(f=>{f.preventDefault(),x()},[x]),S=s.useCallback(f=>{i.state.isExpanded?(f.preventDefault(),i.updateActiveIndex(i.state.activeIndex+1)):R(f.currentTarget)&&i.expand()},[i]),T=s.useCallback(f=>{i.state.isExpanded?(f.preventDefault(),i.updateActiveIndex(i.state.activeIndex-1)):Z(f.currentTarget)&&i.expand()},[i]),h=s.useCallback(()=>{i.state.isExpanded?(i.clearActiveIndex(),i.collapse()):i.clearValue()},[i]),I=s.useCallback(()=>{const f=i.state.value==="",k=i.state.selected[i.state.selected.length-1];f&&k&&x(k)},[i,x]),V=s.useCallback(f=>{if(f.key===w.UpArrow)return T(f);if(f.key===w.DownArrow)return S(f);if(f.key===w.Enter)return y(f);if(f.key===w.Escape)return h();if(f.key===w.Backspace&&e)return I();if(f.key===w.Tab&&t)return y(f)},[e,t,I,y,h,S,T]),{activeOption:A,isExpanded:$,value:F}=i.state;return b(p({},fe),{"aria-autocomplete":"list","aria-activedescendant":A?W(l,A):null,"aria-describedby":n||null,"aria-disabled":r,"aria-errormessage":c&&o||null,"aria-invalid":c,"aria-labelledby":N(l),"aria-expanded":$,"aria-owns":z(l),id:ee(l),onChange:r?P:E,onKeyDown:r?P:V,ref:a,role:"combobox",type:"text",value:F})}const ve={position:"absolute",width:0,height:0,visibility:"hidden",overflow:"scroll",whiteSpace:"pre"},me=["fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","textTransform"];function ge({allowResize:e=!0,text:t}){const n=s.useRef(),{inputRef:o}=s.useContext(v),[l,a]=s.useState(0);return s.useEffect(()=>{const r=window.getComputedStyle(o.current);me.forEach(c=>{n.current.style[c]=r[c]})},[o,n]),s.useEffect(()=>{if(e){const r=Math.ceil(n.current.scrollWidth)+2;l!==r&&a(r)}},[e,t,l]),{width:l,sizerProps:{ref:n,style:ve}}}function xe(){var i;const{inputRef:e,manager:t,tagListRef:n}=s.useContext(v),o=t.state.selected.length,l=U(o),a=o<l,r=(i=n.current)==null?void 0:i.contains(document.activeElement),c=U(r);s.useEffect(()=>{var m,x;if(a){const E=(m=n.current)==null?void 0:m.contains(document.activeElement);c&&!E&&((x=e.current)==null||x.focus())}},[e,c,n,a])}function be({newOptionText:e,noOptionsText:t,onValidate:n}){const o=s.useCallback(a=>({disabled:typeof n=="function"?!n(a):!1,label:e,value:G}),[e,n]),l=s.useCallback(()=>({disabled:!0,label:t,value:de}),[t]);return{newTagOption:o,noTagsOption:l}}function ye(){const{id:e,listBoxRef:t,manager:n}=s.useContext(v);return s.useEffect(()=>{var o;n.state.activeIndex===-1&&((o=t.current)==null||o.scrollTo({top:0}))},[t,n.state.activeIndex]),{"aria-labelledby":N(e),id:z(e),ref:t,role:"listbox"}}var C=(e=>(e[e.ClearActiveIndex=0]="ClearActiveIndex",e[e.ClearAll=1]="ClearAll",e[e.ClearValue=2]="ClearValue",e[e.Collapse=3]="Collapse",e[e.Expand=4]="Expand",e[e.UpdateActiveIndex=5]="UpdateActiveIndex",e[e.UpdateSelected=6]="UpdateSelected",e[e.UpdateSuggestions=7]="UpdateSuggestions",e[e.UpdateValue=8]="UpdateValue",e))(C||{});function Ee(e,t){const n=t-1;return e>n?-1:e<-1?n:e}function Ce(e,t){if(t.type===0)return b(p({},e),{activeIndex:-1,activeOption:null});if(t.type===1)return b(p({},e),{activeIndex:-1,activeOption:null,isExpanded:!1,options:[...e.suggestions],value:""});if(t.type===2){const n=[...e.suggestions],o=e.activeOption?O(e.activeOption,n):-1;return b(p({},e),{activeIndex:o,activeOption:n[o],options:n,value:""})}if(t.type===3)return b(p({},e),{activeIndex:-1,activeOption:null,isExpanded:!1});if(t.type===4)return b(p({},e),{isExpanded:!0});if(t.type===5){const n=Ee(t.payload,e.options.length);return b(p({},e),{activeIndex:n,activeOption:e.options[n]})}if(t.type===6)return b(p({},e),{selected:t.payload});if(t.type===7){const n=e.suggestionsTransform(e.value,t.payload);e.allowNew&&e.value&&n.push(e.newTagOption(e.value)),n.length===0&&e.value&&n.push(e.noTagsOption(e.value));const o=e.activeOption?O(e.activeOption,n):-1;return b(p({},e),{activeIndex:o,activeOption:n[o]||null,options:n,suggestions:t.payload})}if(t.type===8){const n=e.suggestionsTransform(t.payload,e.suggestions);e.allowNew&&t.payload&&n.push(e.newTagOption(t.payload)),n.length===0&&t.payload&&n.push(e.noTagsOption(t.payload));const o=e.activeOption?O(e.activeOption,n):-1;return b(p({},e),{activeIndex:o,activeOption:n[o]||null,isExpanded:!0,options:n,value:t.payload})}return e}function Ie(e){return b(p({},e),{options:[...e.suggestions]})}function he(e){var l;const t=s.useRef(),[n,o]=s.useReducer(Ce,e,Ie);return(l=t.current)!=null||(t.current={state:null,clearActiveIndex(){o({type:C.ClearActiveIndex})},clearAll(){o({type:C.ClearAll})},clearValue(){o({type:C.ClearValue})},collapse(){o({type:C.Collapse})},expand(){o({type:C.Expand})},updateActiveIndex(a){o({type:C.UpdateActiveIndex,payload:a})},updateSelected(a){o({type:C.UpdateSelected,payload:a})},updateSuggestions(a){o({type:C.UpdateSuggestions,payload:a})},updateValue(a){o({type:C.UpdateValue,payload:a})}}),t.current.state=n,e.selected!==n.selected&&t.current.updateSelected(e.selected),e.suggestions!==n.suggestions&&t.current.updateSuggestions(e.suggestions),t.current}function ke(e,t){if((e==null?void 0:e.value)===G&&e.disabled===!1)return{value:null,label:t}}function we(e){const t=ke(e.activeOption,e.value)||e.activeOption||ie(e.value,e.options);return(t==null?void 0:t.disabled)?null:t}function Se({closeOnSelect:e,manager:t,onAddition:n,onDelete:o}){return s.useCallback(l=>{if(l!=null||(l=we(t.state)),!l)return;const a=O(l,t.state.selected);a>=0?o(a):(n(l),e?t.clearAll():t.clearValue())},[e,t,o,n])}function Te(e){var h;const t=s.useRef(),{id:n,inputRef:o,manager:l,onSelect:a}=s.useContext(v),{options:r,selected:c,activeIndex:i}=l.state,m=r[e],x=e===i,E=(h=m.disabled)!=null?h:!1,y=O(m,c)>-1,S=s.useCallback(()=>{var I;a(),(I=o.current)==null||I.focus()},[o,a]),T=s.useCallback(()=>{e!==i&&l.updateActiveIndex(e)},[e,l,i]);return s.useEffect(()=>{var I;x&&((I=t.current)==null||I.scrollIntoView({block:"nearest",inline:"start"}))},[x,r.length]),b(p({},m),{active:x,disabled:E,index:e,selected:y,optionProps:{"aria-disabled":E,"aria-posinset":e+1,"aria-selected":E?null:y,"aria-setsize":r.length,id:W(n,m),onClick:S,onMouseDown:T,ref:t,role:"option",tabIndex:-1}})}function U(e){const t=s.useRef();return s.useEffect(()=>{t.current=e},[e]),t.current}function Oe(){const[e,t]=s.useState(!1),{id:n,inputRef:o,rootRef:l}=s.useContext(v),a=s.useCallback(()=>t(!0),[]),r=s.useCallback(()=>{var i;((i=l.current)==null?void 0:i.contains(document.activeElement))||t(!1)},[l]),c=s.useCallback(()=>{var i;document.activeElement===l.current&&((i=o.current)==null||i.focus())},[o,l]);return{isActive:e,rootProps:{"aria-describedby":N(n),id:n,onBlur:r,onClick:c,onFocus:a,ref:l,tabIndex:-1}}}function Ne(e,t){const{isDisabled:n,manager:o,onSelect:l}=s.useContext(v),a=o.state.selected[e],r=s.useCallback(()=>l(a),[l,a]);return b(p({},a),{tagProps:{"aria-disabled":n,title:_(t,a.label),onClick:n?P:r}})}const _e={position:"absolute",width:1,height:1,left:-9999,overflow:"hidden",clip:"rect(0 0 0 0)"};function Ae({ariaAddedText:e,ariaRemovedText:t}){const{manager:n}=s.useContext(v),{selected:o}=n.state,l=U(o)||o,a=s.useRef([]);return o.forEach(r=>{l.includes(r)||a.current.push(_(e,r.label))}),l.forEach(r=>{o.includes(r)||a.current.push(_(t,r.label))}),u.default.createElement("div",{"aria-live":"polite","aria-relevant":"additions",role:"status",style:_e},a.current.join(` | ||
| `))}function Be({children:e}){const{classNames:t}=s.useContext(v),n=ce();return u.default.createElement("div",p({className:t.comboBox},n),e)}function Le({allowBackspace:e=!0,allowResize:t=!0,allowTab:n=!1,ariaDescribedBy:o,ariaErrorMessage:l,placeholderText:a}){const{classNames:r}=s.useContext(v),y=pe({allowBackspace:e,allowTab:n,ariaDescribedBy:o,ariaErrorMessage:l}),{value:c}=y,i=Y(y,["value"]),m=c.length<a.length?a:c,{sizerProps:x,width:E}=ge({allowResize:t,text:m});return u.default.createElement(u.default.Fragment,null,u.default.createElement("input",p({className:r.input,placeholder:a,style:{width:E},value:c},i)),t?u.default.createElement("div",p({},x),m):null)}function De({children:e}){const{classNames:t,id:n}=s.useContext(v);return u.default.createElement("div",{className:t.label,id:N(n)},e)}function Pe({children:e}){const{classNames:t,manager:n}=s.useContext(v),o=ye();return!n.state.isExpanded||u.default.Children.count(e)===0?null:u.default.createElement("div",p({className:t.listBox},o),e)}function Ue({label:e,query:t}){return u.default.createElement("span",null,_(e,t))}function Ve({index:e}){const{classNames:t,manager:n}=s.useContext(v),{active:o,label:l,value:a,optionProps:r}=Te(e),c=[t.option];return o&&c.push(t.optionIsActive),u.default.createElement("div",p({className:c.join(" ")},r),typeof a=="symbol"?u.default.createElement(Ue,{label:l,query:n.state.value}):u.default.createElement(Ke,{label:l,query:n.state.value}))}function $e(e,t){const n=H(t);return e.replace(n,"<mark>$&</mark>")}function Fe({label:e,query:t}){return u.default.createElement("span",{dangerouslySetInnerHTML:{__html:$e(e,t)}})}const Ke=u.default.memo(Fe);function je({children:e}){xe();const{classNames:t,isDisabled:n,isInvalid:o}=s.useContext(v),{isActive:l,rootProps:a}=Oe(),r=[t.root];return l&&r.push(t.rootIsActive),n&&r.push(t.rootIsDisabled),o&&r.push(t.rootIsInvalid),u.default.createElement("div",p({className:r.join(" ")},a),e)}function ze({index:e,title:t}){const{classNames:n}=s.useContext(v),{label:o,tagProps:l}=Ne(e,t);return u.default.createElement("button",p({type:"button",className:n.tag},l),u.default.createElement("span",{className:n.tagName},o))}function We({children:e,label:t}){const{classNames:n,tagListRef:o}=s.useContext(v);return u.default.createElement("ul",{className:n.tagList,"aria-label":t,ref:o,role:"list"},e.map(l=>u.default.createElement("li",{className:n.tagListItem,key:l.key,role:"listitem"},l)))}const qe={root:"react-tags",rootIsActive:"is-active",rootIsDisabled:"is-disabled",rootIsInvalid:"is-invalid",label:"react-tags__label",tagList:"react-tags__list",tagListItem:"react-tags__list-item",tag:"react-tags__tag",tagName:"react-tags__tag-name",comboBox:"react-tags__combobox",input:"react-tags__combobox-input",listBox:"react-tags__listbox",noOptions:"react-tags__listbox-no-options",option:"react-tags__listbox-option",optionIsActive:"is-active"};function He({allowBackspace:e=!0,allowNew:t=!1,allowResize:n=!0,allowTab:o=!1,ariaAddedText:l="Added tag %value%",ariaDescribedBy:a,ariaErrorMessage:r,ariaRemovedText:c="Removed tag %value%",classNames:i=qe,closeOnSelect:m=!1,id:x="react-tags",isDisabled:E=!1,isInvalid:y=!1,labelText:S="Select tags",newOptionText:T="Add %value%",noOptionsText:h="No options found for %value%",tagListLabelText:I="Selected tags",onAddition:V,onDelete:A,onInput:$,onValidate:F,placeholderText:f="Add a tag",removeButtonText:k="Remove %value% from the list",selected:Ge=[],suggestions:Je=[],suggestionsTransform:Qe=re}){const Xe=s.useRef(),Ye=s.useRef(),Ze=s.useRef(),Re=s.useRef(),Me=s.useRef(),{newTagOption:et,noTagsOption:tt}=be({newOptionText:T,noOptionsText:h,onValidate:F}),B=he({activeIndex:-1,activeOption:null,allowNew:t,isExpanded:!1,newTagOption:et,noTagsOption:tt,options:[],selected:Ge,suggestions:Je,suggestionsTransform:Qe,value:""}),nt=Se({closeOnSelect:m,manager:B,onAddition:V,onDelete:A});return u.default.createElement(v.Provider,{value:{classNames:i,comboBoxRef:Xe,id:x,inputRef:Ye,isDisabled:E,isInvalid:y,listBoxRef:Ze,manager:B,onInput:$,onSelect:nt,rootRef:Re,tagListRef:Me}},u.default.createElement(je,null,u.default.createElement(De,null,S),u.default.createElement(We,{label:I},B.state.selected.map((K,j)=>u.default.createElement(ze,{key:D(K),index:j,title:k}))),u.default.createElement(Be,null,u.default.createElement(Le,{allowBackspace:e,allowResize:n,allowTab:o,placeholderText:f,ariaDescribedBy:a,ariaErrorMessage:r}),u.default.createElement(Pe,null,B.state.options.map((K,j)=>u.default.createElement(Ve,{key:D(K),index:j})))),u.default.createElement(Ae,{ariaAddedText:l,ariaRemovedText:c})))}d.ReactTags=He,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"}); |
114
package.json
| { | ||
| "name": "react-tag-autocomplete", | ||
| "version": "6.3.0", | ||
| "description": "React Tag Autocomplete is a simple tagging component ready to drop in your React projects.", | ||
| "main": "dist/ReactTags.cjs.js", | ||
| "module": "dist/ReactTags.esm.js", | ||
| "version": "7.0.0-beta.1", | ||
| "description": "", | ||
| "module": "dist/ReactTags.es.js", | ||
| "browser": "dist/ReactTags.umd.js", | ||
| "types": "src/index.ts", | ||
| "scripts": { | ||
| "prepare": "npm run build", | ||
| "prepublish": "npm run build", | ||
| "pretest": "npm run lint && npm run build", | ||
| "lint": "standard lib/*.js spec/*.js", | ||
| "test": "jasmine", | ||
| "coverage": "nyc --include 'dist/**' npm test", | ||
| "dev": "rollup --environment=NODE_ENV:development -c example/rollup.config.js --watch", | ||
| "example": "rollup --environment=NODE_ENV:production -c example/rollup.config.js", | ||
| "build": "rollup -c rollup.config.js" | ||
| "build": "vite build -c vite.config.js", | ||
| "type-check": "tsc --noEmit", | ||
| "lint": "eslint . --ext ts,tsx,js,jsx", | ||
| "format": "prettier --write '**/*.{ts,tsx,js,jsx,json,yml}'", | ||
| "spec": "vitest run", | ||
| "verify": "npm run lint && npm run type-check && npm run format", | ||
| "test": "npm run verify && npm run spec", | ||
| "example:dev": "cd example && vite -c vite.config.js", | ||
| "example:build": "cd example && vite build -c vite.config.js", | ||
| "prepare": "husky install", | ||
| "prepublishOnly": "npm run test && npm run build" | ||
| }, | ||
| "keywords": [ | ||
| "react", | ||
| "tags", | ||
| "tag input", | ||
| "react-component", | ||
| "autosuggest", | ||
| "autocomplete" | ||
| ], | ||
| "keywords": [], | ||
| "author": "Matt Hinchliffe", | ||
| "contributors": [ | ||
| "Prakhar Srivastav", | ||
| "Simon Hötten", | ||
| "Andre-John Mas", | ||
| "Mike Kamermans", | ||
| "Juliette Prétot", | ||
| "Andrew Pillsbury", | ||
| "Axel Niklasson", | ||
| "Serhiy Yefremenko", | ||
| "Paul Shannon", | ||
| "Herdis Maria", | ||
| "Sibiraj S", | ||
| "Cristina Lozano", | ||
| "Alexander Nestorov", | ||
| "Lars Haßler", | ||
| "Joel Posti" | ||
| ], | ||
| "license": "MIT", | ||
| "repository": "https://github.com/i-like-robots/react-tags", | ||
| "peerDependencies": { | ||
| "prop-types": "^15.5.0", | ||
| "react": "^16.5.0 || ^17.0.0", | ||
| "react-dom": "^16.5.0 || ^17.0.0" | ||
| "license": "ISC", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/i-like-robots/react-tag-autocomplete.git" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/i-like-robots/react-tag-autocomplete/issues" | ||
| }, | ||
| "homepage": "https://github.com/i-like-robots/react-tag-autocomplete", | ||
| "devDependencies": { | ||
| "@rollup/plugin-buble": "^0.21.0", | ||
| "@rollup/plugin-commonjs": "^19.0.0", | ||
| "@rollup/plugin-node-resolve": "^13.0.0", | ||
| "@rollup/plugin-replace": "^2.4.2", | ||
| "coveralls": "^3.1.0", | ||
| "jasmine": "^3.7.0", | ||
| "jsdom": "^16.6.0", | ||
| "match-sorter": "^4.2.0", | ||
| "nyc": "^15.1.0", | ||
| "prop-types": "^15.7.2", | ||
| "react": "^16.13.0", | ||
| "react-dom": "^16.13.0", | ||
| "rollup": "^2.52.6", | ||
| "rollup-plugin-serve": "^1.1.0", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "sinon": "^11.1.0", | ||
| "standard": "^16.0.2" | ||
| "@testing-library/react": "^12.1.2", | ||
| "@testing-library/user-event": "^13.5.0", | ||
| "@types/node": "^16.11.6", | ||
| "@types/react": "^17.0.38", | ||
| "@typescript-eslint/eslint-plugin": "^5.11.0", | ||
| "@typescript-eslint/parser": "^5.11.0", | ||
| "@vitejs/plugin-react-refresh": "^1.3.6", | ||
| "axe-core": "^4.4.0", | ||
| "eslint": "^8.8.0", | ||
| "eslint-plugin-react-hooks": "^4.3.0", | ||
| "husky": "^7.0.4", | ||
| "jsdom": "^18.1.0", | ||
| "lint-staged": "^12.3.2", | ||
| "match-sorter": "^6.3.0", | ||
| "prettier": "^2.5.0", | ||
| "react": "^17.0.2", | ||
| "react-dom": "^17.0.2", | ||
| "typescript": "^4.5.4", | ||
| "vite": "^2.8.4", | ||
| "vitest": "^0.5.6" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^17.0.0" | ||
| }, | ||
| "engines": { | ||
| "node": ">= 10.0.0" | ||
| "node": ">= 16.12.0" | ||
| }, | ||
| "lint-staged": { | ||
| "*.{ts,tsx,js,jsx}": "eslint --cache --fix", | ||
| "*.{ts,tsx,js,jsx,json,yml}": "prettier --write" | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage 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
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by431.54%
371788
- Dependency count
- decreased by-66.67%
1
- Number of package files
- increased by671.43%
54
- Lines of code
- increased by837.58%
12076
- Number of low maintenance alerts
- decreased by-100%
0
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Dev dependency count
- increased by17.65%
20
- Number of low quality alerts
- increased by100%
2
- Number of lines in readme file
- decreased by-25.41%
276
- Number of medium supply chain risk alerts
- increased byInfinity%
2
No dependency changes