@bubbles-ui/extras/es/form/TagifyInput/TagifyInput.js

The Bubbles Design System is Leemonade's open-source design system for products and experiences.

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { useId } from '@mantine/hooks';
import { INPUT_WRAPPER_ORIENTATIONS, INPUT_WRAPPER_PROP_TYPES, INPUT_WRAPPER_SIZES, InputWrapper } from '@bubbles-ui/components';
import { TagifyInputStyles } from './TagifyInput.styles';
import { MixedTags } from './tagify/react.tagify'; // React-wrapper file
import * as styles from './tagify/tagify.css';

// TODO: This condition is yo use the styles variable until we fix the style imports
if (styles) {
  //
}
const noop = _ => _;
export const TAGIFY_TAG_REGEX = /(?:\[{2}\{).*?(?:\}\]{2})/g;
export const TAGIFY_SIZES = INPUT_WRAPPER_SIZES;
export const TAGIFY_ORIENTATIONS = INPUT_WRAPPER_ORIENTATIONS;
export const TAGIFY_DEFAULT_PROPS = {
  mixed: true,
  size: TAGIFY_SIZES[1],
  orientation: 'vertical',
  required: true,
  autoFocus: false,
  readOnly: false,
  label: '',
  description: '',
  error: '',
  help: '',
  settings: {},
  withSuggestions: false,
  amountOfDuplicates: 1
};
const TagifyInput = /*#__PURE__*/forwardRef(({
  name,
  value,
  loading = false,
  onInput = noop,
  onAdd = noop,
  onRemove = noop,
  onEditInput = noop,
  onEditBeforeUpdate = noop,
  onEditUpdated = noop,
  onEditStart = noop,
  onEditKeydown = noop,
  onInvalid = noop,
  onClick = noop,
  onKeydown = noop,
  onFocus = noop,
  onBlur = noop,
  onChange = noop,
  onDropdownShow = noop,
  onDropdownHide = noop,
  onDropdownSelect = noop,
  onDropdownScroll = noop,
  onDropdownNoMatch = noop,
  onDropdownUpdated = noop,
  readOnly,
  disabled,
  children,
  settings = {},
  InputMode = 'input',
  autoFocus,
  whitelist,
  tagifyRef,
  placeholder = '',
  defaultValue,
  showDropdown,
  withSuggestions,
  amountOfDuplicates,
  mixed,
  error,
  size,
  ariaLabel,
  ...props
}, ref) => {
  const uuid = useId();
  const {
    classes,
    cx
  } = TagifyInputStyles({
    size,
    error
  }, {
    name: 'TagifyInput'
  });
  return /*#__PURE__*/React.createElement(InputWrapper, _extends({}, props, {
    uuid: uuid,
    size: size,
    error: error
  }), /*#__PURE__*/React.createElement(MixedTags, {
    className: classes.root,
    id: uuid,
    name: name,
    value: value,
    loading: loading,
    onInput: onInput,
    onAdd: onAdd,
    onRemove: onRemove,
    onEditInput: onEditInput,
    onEditBeforeUpdate: onEditBeforeUpdate,
    onEditUpdated: onEditUpdated,
    onEditStart: onEditStart,
    onEditKeydown: onEditKeydown,
    onInvalid: onInvalid,
    onClick: onClick,
    onKeydown: onKeydown,
    onFocus: onFocus,
    onBlur: onBlur,
    onChange: onChange,
    onDropdownShow: onDropdownShow,
    onDropdownHide: onDropdownHide,
    onDropdownSelect: onDropdownSelect,
    onDropdownScroll: onDropdownScroll,
    onDropdownNoMatch: onDropdownNoMatch,
    onDropdownUpdated: onDropdownUpdated,
    readOnly: readOnly,
    disabled: disabled,
    settings: settings,
    InputMode: InputMode,
    autoFocus: autoFocus,
    whitelist: whitelist,
    tagifyRef: ref,
    placeholder: placeholder,
    defaultValue: defaultValue,
    showDropdown: showDropdown,
    withSuggestions: withSuggestions,
    amountOfDuplicates: amountOfDuplicates,
    ariaLabel: props.label ?? ariaLabel
  }, children));
});
TagifyInput.displayName = 'TagifyInput';
TagifyInput.defaultProps = TAGIFY_DEFAULT_PROPS;
TagifyInput.propTypes = {
  ...INPUT_WRAPPER_PROP_TYPES,
  name: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
  loading: PropTypes.bool,
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
  onChange: PropTypes.func,
  readOnly: PropTypes.bool,
  settings: PropTypes.object,
  InputMode: PropTypes.string,
  autoFocus: PropTypes.bool,
  className: PropTypes.string,
  tagifyRef: PropTypes.object,
  whitelist: PropTypes.array,
  placeholder: PropTypes.string,
  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
  showDropdown: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  withSuggestions: PropTypes.bool,
  amountOfDuplicates: PropTypes.number,
  onInput: PropTypes.func,
  onAdd: PropTypes.func,
  onRemove: PropTypes.func,
  onEditInput: PropTypes.func,
  onEditBeforeUpdate: PropTypes.func,
  onEditUpdated: PropTypes.func,
  onEditStart: PropTypes.func,
  onEditKeydown: PropTypes.func,
  onInvalid: PropTypes.func,
  onClick: PropTypes.func,
  onKeydown: PropTypes.func,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  onDropdownShow: PropTypes.func,
  onDropdownHide: PropTypes.func,
  onDropdownSelect: PropTypes.func,
  onDropdownScroll: PropTypes.func,
  onDropdownNoMatch: PropTypes.func,
  onDropdownUpdated: PropTypes.func
};
export { TagifyInput };