@codacy/ui-components 0.67.70 → 0.67.71

package/lib/TagsInput/ReactTagInput/ContentEditable.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+interface Props {
+    value: string;
+    className: string;
+    innerEditableRef: React.RefObject<HTMLDivElement>;
+    inputRef: React.RefObject<HTMLInputElement>;
+    change: (value: string) => void;
+    remove: () => void;
+    validator?: (value: string) => boolean;
+    removeOnBackspace?: boolean;
+    delimiters?: number[];
+}
+export declare class ContentEditable extends React.Component<Props> {
+    focused: boolean;
+    removed: boolean;
+    preFocusedValue: string;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props): void;
+    setContent: () => void;
+    onPaste: (e: React.ClipboardEvent<HTMLDivElement>) => void;
+    onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    getValue: () => string;
+    getRef: () => HTMLDivElement | null;
+    focusInputRef: () => void;
+    render(): React.JSX.Element;
+}
+export {};

package/lib/TagsInput/ReactTagInput/ContentEditable.js

@@ -0,0 +1,135 @@
+import React from 'react';
+import { removeLineBreaks } from './functions';
+export class ContentEditable extends React.Component {
+  // Track focus state of editable tag
+  focused = false;
+
+  // Track if element has been removed from DOM
+  removed = false;
+
+  // Save value before input is focused / user starts typing
+  preFocusedValue = '';
+  componentDidMount() {
+    // The content of a contentEditable element is owned by the browser, not React, so it is
+    // written imperatively via the ref. `textContent` is used rather than `innerHTML` so the
+    // value is always treated as literal text and never parsed as markup.
+    this.setContent();
+    this.preFocusedValue = this.getValue();
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value) {
+      this.setContent();
+    }
+  }
+  setContent = () => {
+    const ref = this.props.innerEditableRef.current;
+    const content = removeLineBreaks(this.props.value);
+    // Guard against clobbering the caret position when the DOM already holds this text
+    if (ref && ref.textContent !== content) {
+      ref.textContent = content;
+    }
+  };
+  onPaste = e => {
+    // Cancel paste event
+    e.preventDefault();
+
+    // Remove formatting from clipboard contents
+    const text = e.clipboardData.getData('text/plain');
+    const splitText = text.split(/,| /);
+    const firstString = splitText[0];
+
+    // Insert text manually from paste command. `insertText` inserts the string as literal
+    // text; `insertHTML` would parse it as markup.
+    document.execCommand('insertText', false, removeLineBreaks(firstString));
+  };
+  onClick = e => {
+    e.stopPropagation();
+  };
+  onFocus = () => {
+    this.preFocusedValue = this.getValue();
+    this.focused = true;
+  };
+  onBlur = () => {
+    this.focused = false;
+    const ref = this.props.innerEditableRef.current;
+    const {
+      validator,
+      change
+    } = this.props;
+    if (!this.removed && ref) {
+      // On blur, if no content in tag, remove it
+      if (ref.innerText === '') {
+        this.props.remove();
+        return;
+      }
+
+      // Validate input if needed
+      if (validator) {
+        const valid = validator(this.getValue());
+        // If invalidate, switch ref back to pre focused value
+        if (!valid) {
+          ref.innerText = this.preFocusedValue;
+          return;
+        }
+      }
+      change(ref.innerText);
+    }
+  };
+  onKeyDown = e => {
+    const {
+      delimiters
+    } = this.props;
+
+    // On enter, focus main tag input
+    if (e.keyCode === 13 || delimiters !== null && delimiters !== void 0 && delimiters.includes(e.keyCode)) {
+      e.preventDefault();
+      this.focusInputRef();
+      return;
+    }
+
+    // On backspace, if no content in ref, remove tag and focus main tag input
+    const {
+      removeOnBackspace
+    } = this.props;
+    const value = this.getValue();
+    if (removeOnBackspace && e.keyCode === 8 && value === '') {
+      this.removed = true;
+      this.props.remove();
+      this.focusInputRef();
+      return;
+    }
+  };
+  getValue = () => {
+    const ref = this.getRef();
+    return ref ? ref.innerText : '';
+  };
+  getRef = () => {
+    return this.props.innerEditableRef.current;
+  };
+  focusInputRef = () => {
+    const {
+      inputRef
+    } = this.props;
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  render() {
+    const {
+      className,
+      innerEditableRef
+    } = this.props;
+    // No children are rendered here on purpose: the text is written as `textContent` in
+    // setContent(), so React never has to manage the children of a contentEditable node.
+    return /*#__PURE__*/React.createElement("div", {
+      ref: innerEditableRef,
+      className: className,
+      contentEditable: true,
+      onClick: this.onClick,
+      onPaste: this.onPaste,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      onKeyDown: this.onKeyDown
+    });
+  }
+}

package/lib/TagsInput/ReactTagInput/ReactTagInput.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+type Tags = string[];
+export interface ReactTagInputProps {
+    id?: string;
+    tags: Tags;
+    onChange: (tags: Tags) => void;
+    placeholder?: string;
+    maxTags?: number;
+    validator?: (val: string) => boolean;
+    editable?: boolean;
+    readOnly?: boolean;
+    removeOnBackspace?: boolean;
+    delimiters?: number[];
+    required?: boolean;
+}
+interface State {
+    input: string;
+}
+export declare class ReactTagInput extends React.Component<ReactTagInputProps, State> {
+    state: {
+        input: string;
+    };
+    inputRef: React.RefObject<HTMLInputElement>;
+    onWrapperClick: () => void;
+    onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onInputKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onBlur: () => void;
+    onPaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
+    addTag: (value: string) => void;
+    removeTag: (i: number) => void;
+    updateTag: (i: number, value: string) => void;
+    render(): React.JSX.Element;
+}
+export {};

package/lib/TagsInput/ReactTagInput/ReactTagInput.js

@@ -0,0 +1,180 @@
+import React from 'react';
+import { Tag } from './Tag';
+import { classSelectors } from './selectors';
+export class ReactTagInput extends React.Component {
+  state = {
+    input: ''
+  };
+
+  // Ref for input element
+  inputRef = /*#__PURE__*/React.createRef();
+  onWrapperClick = () => {
+    var _this$inputRef$curren;
+    (_this$inputRef$curren = this.inputRef.current) === null || _this$inputRef$curren === void 0 || _this$inputRef$curren.focus();
+  };
+  onInputChange = e => {
+    var _this$inputRef$curren2;
+    const {
+      placeholder
+    } = this.props;
+    (_this$inputRef$curren2 = this.inputRef.current) === null || _this$inputRef$curren2 === void 0 || _this$inputRef$curren2.setAttribute('size', placeholder === null || placeholder === void 0 ? void 0 : placeholder.length.toString());
+    this.setState({
+      input: e.target.value
+    });
+  };
+  onInputKeyDown = e => {
+    const {
+      input
+    } = this.state;
+    const {
+      validator,
+      removeOnBackspace,
+      delimiters = [9, 13, 188, 32]
+    } = this.props;
+
+    //Check if alt + tab was hit to onfocus element
+    if (e.keyCode === 9 && e.altKey) {
+      var _this$inputRef$curren3;
+      (_this$inputRef$curren3 = this.inputRef.current) === null || _this$inputRef$curren3 === void 0 || _this$inputRef$curren3.blur();
+    }
+    // Check if default Enter or one of the delimiter keys was hit
+    else if (e.keyCode === 13 || delimiters !== null && delimiters !== void 0 && delimiters.includes(e.keyCode)) {
+      // Prevent form submission if tag input is nested in <form>
+      e.preventDefault();
+
+      // If input is blank, do nothing
+      if (input === '') {
+        return;
+      }
+
+      // Check if input is valid
+      const valid = validator !== undefined ? validator(input) : true;
+      if (!valid) {
+        return;
+      }
+
+      // Add input to tag list
+      this.addTag(input);
+    }
+    // On backspace or delete
+    else if (removeOnBackspace && (e.keyCode === 8 || e.keyCode === 46)) {
+      // If currently typing, do nothing
+      if (input !== '') {
+        return;
+      }
+
+      // If input is blank, remove previous tag
+      this.removeTag(this.props.tags.length - 1);
+    }
+  };
+  onBlur = () => {
+    const {
+      input
+    } = this.state;
+    const {
+      validator
+    } = this.props;
+    if (input === '') {
+      return;
+    }
+
+    // Check if input is valid
+    const valid = validator !== undefined ? validator(input) : true;
+    if (!valid) {
+      return;
+    }
+
+    // Add input to tag list
+    this.addTag(input);
+  };
+  onPaste = e => {
+    // Cancel paste event
+    e.preventDefault();
+
+    // Remove formatting from clipboard contents
+    const text = e.clipboardData.getData('text/plain');
+    const splitText = text.split(/[ ,\n\r\t\v\f\0]+/);
+
+    //If a list with spaces or commas is pasted, each item will be a tag
+    const tags = [...this.props.tags];
+    splitText.forEach(tag => {
+      if (!tags.includes(tag) && tag !== '') {
+        tags.push(tag);
+      }
+    });
+    this.props.onChange(tags);
+  };
+  addTag = value => {
+    const tags = [...this.props.tags];
+    if (!tags.includes(value)) {
+      tags.push(value);
+      this.props.onChange(tags);
+    }
+    this.setState({
+      input: ''
+    });
+  };
+  removeTag = i => {
+    const tags = [...this.props.tags];
+    tags.splice(i, 1);
+    this.props.onChange(tags);
+  };
+  updateTag = (i, value) => {
+    const tags = [...this.props.tags];
+    const numOccurrencesOfValue = tags.reduce((prev, currentValue, index) => prev + (currentValue === value && index !== i ? 1 : 0), 0);
+    if (numOccurrencesOfValue > 0) {
+      tags.splice(i, 1);
+    } else {
+      tags[i] = value;
+    }
+    this.props.onChange(tags);
+  };
+  render() {
+    const {
+      input
+    } = this.state;
+    const {
+      id,
+      tags,
+      placeholder = 'Type and press enter',
+      maxTags,
+      editable,
+      readOnly,
+      validator,
+      removeOnBackspace,
+      delimiters,
+      required = false
+    } = this.props;
+    const maxTagsReached = maxTags !== undefined ? tags.length >= maxTags : false;
+    const isEditable = readOnly ? false : editable || false;
+    const showInput = !readOnly && !maxTagsReached;
+    return /*#__PURE__*/React.createElement("div", {
+      id: id ? `${id}-wrapper` : '',
+      className: classSelectors.wrapper,
+      onClick: this.onWrapperClick
+    }, tags.map((tag, i) => /*#__PURE__*/React.createElement(Tag, {
+      key: i,
+      value: tag,
+      index: i,
+      editable: isEditable,
+      readOnly: readOnly || false,
+      inputRef: this.inputRef,
+      update: this.updateTag,
+      remove: this.removeTag,
+      validator: validator,
+      removeOnBackspace: removeOnBackspace,
+      delimiters: delimiters
+    })), showInput && /*#__PURE__*/React.createElement("input", {
+      id: id,
+      ref: this.inputRef,
+      value: input,
+      className: classSelectors.input,
+      placeholder: placeholder,
+      onChange: this.onInputChange,
+      onKeyDown: this.onInputKeyDown,
+      onPaste: this.onPaste,
+      onBlur: this.onBlur,
+      required: required
+    }));
+  }
+}

package/lib/TagsInput/ReactTagInput/Tag.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface Props {
+    value: string;
+    index: number;
+    editable: boolean;
+    readOnly: boolean;
+    inputRef: React.RefObject<HTMLInputElement>;
+    update: (i: number, value: string) => void;
+    remove: (i: number) => void;
+    validator?: (val: string) => boolean;
+    removeOnBackspace?: boolean;
+    delimiters?: number[];
+}
+export declare const CloseIcon: () => React.JSX.Element;
+export declare class Tag extends React.Component<Props> {
+    innerEditableRef: React.RefObject<HTMLDivElement>;
+    remove: () => void;
+    render(): React.JSX.Element;
+}
+export {};

package/lib/TagsInput/ReactTagInput/Tag.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { classSelectors } from './selectors';
+import { ContentEditable } from './ContentEditable';
+export const CloseIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "8",
+  height: "8",
+  viewBox: "0 0 8 8",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M0.146447 0.146447C0.341709 -0.0488155 0.658291 -0.0488155 0.853553 0.146447L7.85355 7.14645C8.04882 7.34171 8.04882 7.65829 7.85355 7.85355C7.65829 8.04882 7.34171 8.04882 7.14645 7.85355L0.146447 0.853553C-0.0488155 0.658291 -0.0488155 0.341709 0.146447 0.146447Z",
+  fill: "#7E90B2"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M7.85355 0.146447C8.04882 0.341709 8.04882 0.658291 7.85355 0.853553L0.853553 7.85355C0.658291 8.04882 0.341709 8.04882 0.146447 7.85355C-0.0488155 7.65829 -0.0488155 7.34171 0.146447 7.14645L7.14645 0.146447C7.34171 -0.0488155 7.65829 -0.0488155 7.85355 0.146447Z",
+  fill: "#7E90B2"
+}));
+export class Tag extends React.Component {
+  innerEditableRef = /*#__PURE__*/React.createRef();
+  remove = () => this.props.remove(this.props.index);
+  render() {
+    const {
+      value,
+      index,
+      editable,
+      inputRef,
+      validator,
+      update,
+      removeOnBackspace,
+      delimiters
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classSelectors.tag
+    }, !editable && /*#__PURE__*/React.createElement("div", {
+      className: classSelectors.tagContent
+    }, value), editable && /*#__PURE__*/React.createElement(ContentEditable, {
+      value: value,
+      inputRef: inputRef,
+      innerEditableRef: this.innerEditableRef,
+      className: classSelectors.tagContent,
+      change: newValue => update(index, newValue),
+      remove: this.remove,
+      validator: validator,
+      removeOnBackspace: removeOnBackspace,
+      delimiters: delimiters
+    }), /*#__PURE__*/React.createElement("div", {
+      className: classSelectors.tagRemove,
+      onClick: this.remove
+    }, /*#__PURE__*/React.createElement(CloseIcon, null)));
+  }
+}

package/lib/TagsInput/ReactTagInput/functions.d.ts

@@ -0,0 +1 @@
+export declare function removeLineBreaks(value: string): string;

package/lib/TagsInput/ReactTagInput/functions.js

@@ -0,0 +1,3 @@
+export function removeLineBreaks(value) {
+  return value.replace(/(\r\n|\n|\r)/gm, '');
+}

package/lib/TagsInput/ReactTagInput/index.d.ts

@@ -0,0 +1 @@
+export * from './ReactTagInput';

package/lib/TagsInput/ReactTagInput/index.js

@@ -0,0 +1 @@
+export * from './ReactTagInput';

package/lib/TagsInput/ReactTagInput/selectors.d.ts

@@ -0,0 +1,8 @@
+export declare const classSelectors: {
+    wrapper: string;
+    input: string;
+    tag: string;
+    tagContent: string;
+    tagRemove: string;
+    tagRemoveReadOnly: string;
+};

package/lib/TagsInput/ReactTagInput/selectors.js

@@ -0,0 +1,8 @@
+export const classSelectors = {
+  wrapper: 'react-tag-input',
+  input: 'react-tag-input__input',
+  tag: 'react-tag-input__tag',
+  tagContent: 'react-tag-input__tag__content',
+  tagRemove: 'react-tag-input__tag__remove',
+  tagRemoveReadOnly: 'react-tag-input__tag__remove-readonly'
+};

package/lib/TagsInput/TagsInput.js

@@ -1,6 +1,6 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
-import ReactTagInput from '@pathofdev/react-tag-input';
+import { ReactTagInput } from './ReactTagInput';
 import { StyledTagsInput, TagsInputWrapper } from './style';
 import { Labeled } from '../';
 export const TagsInput = ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.67.70",
+  "version": "0.67.71",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -36,7 +36,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.6",
-    "@pathofdev/react-tag-input": "github:inesgomas/react-tag-input",
     "@styled-system/should-forward-prop": "^5.1.5",
     "@testing-library/user-event": "^14.6.1",
     "autosize": "^4.0.2",