react-input-chips 0.3.4 → 1.0.0

package/License

@@ -1,9 +1,9 @@
 MIT License
 
-Copyright (c) 2024 [B-Meet]
+Copyright (c) 2026 [B-Meet]
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "react-input-chip-beta"), to deal
+of this software and associated documentation files (the "react-input-chips"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is

package/README.md

@@ -28,15 +28,9 @@ Install react-input-chips with npm
 
 You just need to import the `<InputChips/>` component in the file you want the **react-input-chip** in and pass the required props that's it. All set!
 
-**One important thing** for the default styling of the `<InputChips/>` is that you need to explicitly add CSS file import in the parent or higher or the same component.
-The following is the path to it
-
-```bash
-import "../node_modules/react-input-chips/dist/index.css";
-```
+**Note:** Styles are now automatically injected, so no need to import the CSS file manually!
 
 Hers is the simple plain example
-
 ```javascript
 import { useState } from "react";
 import { InputChips } from "react-input-chips";
@@ -112,7 +106,13 @@ I have for you here all the props supported as of now. (\* these are required pr
 | nextPlaceholder             | -                                    | Placeholder after the first chip is created                                                                                                                                                                                                                 |
 | removeBtnSvg                | is an `SVG` which looks like close/X | You can add any HTML element as of now, but it is better to add an `SVG` element                                                                                                                                                                            |
 | chipStyles                  | -                                    | You add any styles supported by CSS will be added as inline styles for the chip hence, the highest priority is given to your styles                                                                                                                         |
+| chipClassName               | -                                    | Class name for individual chips                                                                                                                                                                                                                             |
 | containerStyles             | -                                    | You can add the CSS styles for the whole input container itself                                                                                                                                                                                             |
+| containerClassName          | -                                    | Class name for the container wrapper                                                                                                                                                                                                                        |
+| inputStyle                  | -                                    | Inline styles for the input field                                                                                                                                                                                                                           |
+| inputClassName              | -                                    | Class name for the input field                                                                                                                                                                                                                              |
+| closeBtnStyle               | -                                    | Inline styles for the close button                                                                                                                                                                                                                          |
+| closeBtnClassName           | -                                    | Class name for the close button                                                                                                                                                                                                                             |
 | errorMsg                    | -                                    | It's the error message you want to display and expects a string as its value                                                                                                                                                                                |
 
 keysToTriggerChipConversion - Allowed key codes

package/dist/index.d.ts

@@ -16,8 +16,14 @@ interface TInputChips {
     containerStyles?: React.CSSProperties;
     backspaceToRemoveChip?: boolean;
     errorMsg?: string;
+    chipClassName?: string;
+    inputStyle?: React.CSSProperties;
+    inputClassName?: string;
+    closeBtnStyle?: React.CSSProperties;
+    closeBtnClassName?: string;
+    containerClassName?: string;
 }
 
-declare const InputChips: ({ chips, setChips, inputValue, setInputValue, keysToTriggerChipConversion, validate, disabled, placeholder, nextPlaceholder, removeBtnSvg, chipStyles, containerStyles, backspaceToRemoveChip, errorMsg, }: TInputChips) => react_jsx_runtime.JSX.Element;
+declare const InputChips: ({ chips, setChips, inputValue, setInputValue, keysToTriggerChipConversion, validate, disabled, placeholder, nextPlaceholder, removeBtnSvg, chipStyles, chipClassName, containerStyles, containerClassName, inputStyle, inputClassName, closeBtnStyle, closeBtnClassName, backspaceToRemoveChip, errorMsg, }: TInputChips) => react_jsx_runtime.JSX.Element;
 
 export { InputChips };

package/dist/index.js

@@ -1,3 +1,31 @@
+// src/components/InputChip.tsx
+import React from "react";
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/components/styles.css
+styleInject(".ric-chip-input-wrapper {\n  gap: 4px;\n  flex: 2;\n  padding: 5px;\n  overflow: auto;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  border: 1px solid #BBBBBB;\n  border-radius: 4px;\n  max-width: 650px;\n  min-width: 300px;\n  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n  &.ric-chip-input-wrapper-focus {\n    border-color: #4a90e2;\n    box-shadow: 0 0 0 1px #4a90e2;\n  }\n  .ric-chip {\n    background: #e5e5e5;\n    border-radius: 4px;\n    color: #333333;\n    display: flex;\n    gap: 0.5rem;\n    align-items: center;\n    justify-content: space-between;\n    max-width: max-content;\n    padding: 6px;\n  }\n  .ric-chip-input {\n    border: none;\n    outline: none;\n    flex: 1;\n    padding: 0 8px;\n    height: 30px;\n  }\n  .ric-closeBtn {\n    outline: none;\n    border: none;\n    background: none;\n    height: 18px;\n    width: 18px;\n    object-fit: cover;\n    cursor: pointer;\n    display: grid;\n    place-items: center;\n  }\n}\n.ric-chip-input-wrapper-error {\n  border: 2px solid red;\n}\n.ric-error-msg-wrapper {\n  margin: 0;\n  font-size: 12px;\n  color: red;\n}\n");
+
 // src/components/InputChip.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var InputChips = ({
@@ -12,10 +40,18 @@ var InputChips = ({
   nextPlaceholder,
   removeBtnSvg,
   chipStyles,
+  chipClassName,
   containerStyles,
+  containerClassName,
+  inputStyle,
+  inputClassName,
+  closeBtnStyle,
+  closeBtnClassName,
   backspaceToRemoveChip = false,
   errorMsg
 }) => {
+  const inputRef = React.useRef(null);
+  const [isFocused, setIsFocused] = React.useState(false);
   const handleInputChange = (e) => {
     const value = e.target.value;
     if (keysToTriggerChipConversion.includes("Space")) {
@@ -25,12 +61,14 @@ var InputChips = ({
     }
   };
   const handleInputKeyDown = (e) => {
-    if (backspaceToRemoveChip && e.key === "Backspace" && inputValue.trim() === "") {
-      setChips((prevState) => {
-        const updatedChips = [...prevState];
-        updatedChips.pop();
-        return updatedChips;
-      });
+    if (backspaceToRemoveChip && e.key === "Backspace" && inputValue.trim() === "" && chips.length > 0) {
+      e.preventDefault();
+      const updatedChips = [...chips];
+      updatedChips.pop();
+      setChips(updatedChips);
+      return;
+    }
+    if (e.key === "ArrowLeft" && inputValue.trim() === "" && chips.length > 0) {
     }
     const isKeyAllowed = (key) => {
       return keysToTriggerChipConversion.includes(
@@ -40,12 +78,14 @@ var InputChips = ({
     if (isKeyAllowed(e.code) && (!validate || validate())) {
       let chip = inputValue.trim();
       if (keysToTriggerChipConversion.some((key) => key.length === 1)) {
-        const regex = new RegExp(
-          `[${keysToTriggerChipConversion.filter((key) => key.length === 1).map(
-            (key) => key.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")
-          ).join("")}]`,
-          "g"
-        );
+        const regex = React.useMemo(() => {
+          return new RegExp(
+            `[${keysToTriggerChipConversion.filter((key) => key.length === 1).map(
+              (key) => key.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")
+            ).join("")}]`,
+            "g"
+          );
+        }, [keysToTriggerChipConversion]);
         chip = chip.replace(regex, "");
       }
       if (chip) {
@@ -66,14 +106,15 @@ var InputChips = ({
     /* @__PURE__ */ jsxs(
       "section",
       {
-        className: errorMsg?.length ? "chip-input-wrapper chip-input-wrapper-error" : "chip-input-wrapper",
+        className: `${errorMsg?.length ? "ric-chip-input-wrapper ric-chip-input-wrapper-error" : "ric-chip-input-wrapper"} ${isFocused ? "ric-chip-input-wrapper-focus" : ""} ${containerClassName || ""}`,
         style: containerStyles ?? {},
+        onClick: () => inputRef.current?.focus(),
         children: [
           chips.map((chip, index) => /* @__PURE__ */ jsxs(
             "div",
             {
               "data-testid": `input-value-chip-${index}`,
-              className: "chip",
+              className: `ric-chip ${chipClassName || ""}`,
               style: chipStyles ?? {},
               children: [
                 chip,
@@ -81,9 +122,11 @@ var InputChips = ({
                   "button",
                   {
                     type: "button",
-                    className: "closeBtn",
+                    className: `ric-closeBtn ${closeBtnClassName || ""}`,
+                    style: closeBtnStyle ?? {},
                     "data-testid": `remove-chip-btn-${index}`,
                     onClick: (e) => removeChip(e, chip + index),
+                    "aria-label": `Remove chip ${chip}`,
                     children: removeBtnSvg || /* @__PURE__ */ jsxs(
                       "svg",
                       {
@@ -107,19 +150,23 @@ var InputChips = ({
           /* @__PURE__ */ jsx(
             "input",
             {
-              className: "chip-input",
+              ref: inputRef,
+              className: `ric-chip-input ${inputClassName || ""}`,
+              style: inputStyle ?? {},
               type: "text",
               placeholder: disabled ? "" : chips.length ? nextPlaceholder : placeholder,
               value: inputValue,
               onChange: handleInputChange,
               onKeyDown: handleInputKeyDown,
-              disabled
+              disabled,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false)
             }
           )
         ]
       }
     ),
-    errorMsg?.length && /* @__PURE__ */ jsx("p", { className: "error-msg-wrapper", children: errorMsg })
+    errorMsg?.length && /* @__PURE__ */ jsx("p", { className: "ric-error-msg-wrapper", children: errorMsg })
   ] });
 };
 var InputChip_default = InputChips;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InputChip.tsx"],"sourcesContent":["import React from 'react';\nimport './styles.css';\nimport {TInputChips, AllowedKeys} from '../types';\n\nconst InputChips = ({\n    chips,\n    setChips,\n    inputValue,\n    setInputValue,\n    keysToTriggerChipConversion = ['Enter', 'Comma'],\n    validate,\n    disabled = false,\n    placeholder,\n    nextPlaceholder,\n    removeBtnSvg,\n    chipStyles,\n    containerStyles,\n    backspaceToRemoveChip = false,\n    errorMsg,\n}: TInputChips) => {\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value;\n\n        if (keysToTriggerChipConversion.includes('Space')) {\n            setInputValue(value.trim());\n        } else {\n            setInputValue(value);\n        }\n    };\n\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (\n            backspaceToRemoveChip &&\n            e.key === 'Backspace' &&\n            inputValue.trim() === ''\n        ) {\n            setChips((prevState) => {\n                const updatedChips = [...prevState];\n                updatedChips.pop();\n                return updatedChips;\n            });\n        }\n\n        const isKeyAllowed = (key: string): key is AllowedKeys => {\n            return (keysToTriggerChipConversion as AllowedKeys[]).includes(\n                key as AllowedKeys\n            );\n        };\n\n        if (isKeyAllowed(e.code) && (!validate || validate())) {\n            let chip = inputValue.trim();\n\n            if (keysToTriggerChipConversion.some((key) => key.length === 1)) {\n                const regex = new RegExp(\n                    `[${keysToTriggerChipConversion\n                        .filter((key) => key.length === 1)\n                        .map((key) =>\n                            key.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&')\n                        )\n                        .join('')}]`,\n                    'g'\n                );\n                chip = chip.replace(regex, '');\n            }\n\n            if (chip) {\n                setChips([...chips, chip]);\n                setInputValue('');\n            }\n\n            e.preventDefault();\n        }\n    };\n\n    const removeChip = (\n        e: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n        chipToRemove: string\n    ) => {\n        e.preventDefault();\n        const filteredChips = chips.filter(\n            (chip, index) => chip + index !== chipToRemove\n        );\n        setChips(filteredChips);\n    };\n\n    return (\n        <>\n            <section\n                className={\n                    errorMsg?.length\n                        ? 'chip-input-wrapper chip-input-wrapper-error'\n                        : 'chip-input-wrapper'\n                }\n                style={containerStyles ?? {}}\n            >\n                {chips.map((chip, index) => (\n                    <div\n                        key={chip + index}\n                        data-testid={`input-value-chip-${index}`}\n                        className=\"chip\"\n                        style={chipStyles ?? {}}\n                    >\n                        {chip}\n                        <button\n                            type=\"button\"\n                            className=\"closeBtn\"\n                            data-testid={`remove-chip-btn-${index}`}\n                            onClick={(e) => removeChip(e, chip + index)}\n                        >\n                            {removeBtnSvg || (\n                                <svg\n                                    stroke=\"currentColor\"\n                                    fill=\"currentColor\"\n                                    strokeWidth=\"0\"\n                                    viewBox=\"0 0 24 24\"\n                                    height={15}\n                                >\n                                    <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n                                    <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n                                </svg>\n                            )}\n                        </button>\n                    </div>\n                ))}\n                <input\n                    className=\"chip-input\"\n                    type=\"text\"\n                    placeholder={\n                        disabled\n                            ? ''\n                            : chips.length\n                            ? nextPlaceholder\n                            : placeholder\n                    }\n                    value={inputValue}\n                    onChange={handleInputChange}\n                    onKeyDown={handleInputKeyDown}\n                    disabled={disabled}\n                />\n            </section>\n            {errorMsg?.length && (\n                <p className=\"error-msg-wrapper\">{errorMsg}</p>\n            )}\n        </>\n    );\n};\n\nexport default InputChips;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/components/InputChip.tsx","#style-inject:#style-inject","../src/components/styles.css"],"sourcesContent":["import React from 'react';\nimport './styles.css';\nimport { TInputChips, AllowedKeys } from '../types';\n\nconst InputChips = ({\n    chips,\n    setChips,\n    inputValue,\n    setInputValue,\n    keysToTriggerChipConversion = ['Enter', 'Comma'],\n    validate,\n    disabled = false,\n    placeholder,\n    nextPlaceholder,\n    removeBtnSvg,\n    chipStyles,\n    chipClassName,\n    containerStyles,\n    containerClassName,\n    inputStyle,\n    inputClassName,\n    closeBtnStyle,\n    closeBtnClassName,\n    backspaceToRemoveChip = false,\n    errorMsg,\n}: TInputChips) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const [isFocused, setIsFocused] = React.useState(false);\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value;\n\n        if (keysToTriggerChipConversion.includes('Space')) {\n            setInputValue(value.trim());\n        } else {\n            setInputValue(value);\n        }\n    };\n\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (\n            backspaceToRemoveChip &&\n            e.key === 'Backspace' &&\n            inputValue.trim() === '' &&\n            chips.length > 0\n        ) {\n            e.preventDefault();\n            const updatedChips = [...chips];\n            updatedChips.pop();\n            setChips(updatedChips);\n            return;\n        }\n\n        if (e.key === 'ArrowLeft' && inputValue.trim() === '' && chips.length > 0) {\n            // Logic to select last chip could be added here, but for now we are just cleaning up\n        }\n\n        const isKeyAllowed = (key: string): key is AllowedKeys => {\n            return (keysToTriggerChipConversion as AllowedKeys[]).includes(\n                key as AllowedKeys\n            );\n        };\n\n        if (isKeyAllowed(e.code) && (!validate || validate())) {\n            let chip = inputValue.trim();\n\n            if (keysToTriggerChipConversion.some((key) => key.length === 1)) {\n                const regex = React.useMemo(() => {\n                    return new RegExp(\n                        `[${keysToTriggerChipConversion\n                            .filter((key) => key.length === 1)\n                            .map((key) =>\n                                key.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&')\n                            )\n                            .join('')}]`,\n                        'g'\n                    );\n                }, [keysToTriggerChipConversion]);\n\n                chip = chip.replace(regex, '');\n            }\n\n            if (chip) {\n                setChips([...chips, chip]);\n                setInputValue('');\n            }\n\n            e.preventDefault();\n        }\n    };\n\n    const removeChip = (\n        e: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n        chipToRemove: string\n    ) => {\n        e.preventDefault();\n        const filteredChips = chips.filter(\n            (chip, index) => chip + index !== chipToRemove\n        );\n        setChips(filteredChips);\n    };\n\n    return (\n        <>\n            <section\n                className={`${errorMsg?.length\n                        ? 'ric-chip-input-wrapper ric-chip-input-wrapper-error'\n                        : 'ric-chip-input-wrapper'\n                    } ${isFocused ? 'ric-chip-input-wrapper-focus' : ''} ${containerClassName || ''}`}\n                style={containerStyles ?? {}}\n                onClick={() => inputRef.current?.focus()}\n            >\n                {chips.map((chip, index) => (\n                    <div\n                        key={chip + index}\n                        data-testid={`input-value-chip-${index}`}\n                        className={`ric-chip ${chipClassName || ''}`}\n                        style={chipStyles ?? {}}\n                    >\n                        {chip}\n                        <button\n                            type=\"button\"\n                            className={`ric-closeBtn ${closeBtnClassName || ''}`}\n                            style={closeBtnStyle ?? {}}\n                            data-testid={`remove-chip-btn-${index}`}\n                            onClick={(e) => removeChip(e, chip + index)}\n                            aria-label={`Remove chip ${chip}`}\n                        >\n                            {removeBtnSvg || (\n                                <svg\n                                    stroke=\"currentColor\"\n                                    fill=\"currentColor\"\n                                    strokeWidth=\"0\"\n                                    viewBox=\"0 0 24 24\"\n                                    height={15}\n                                >\n                                    <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n                                    <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n                                </svg>\n                            )}\n                        </button>\n                    </div>\n                ))}\n                <input\n                    ref={inputRef}\n                    className={`ric-chip-input ${inputClassName || ''}`}\n                    style={inputStyle ?? {}}\n                    type=\"text\"\n                    placeholder={\n                        disabled\n                            ? ''\n                            : chips.length\n                                ? nextPlaceholder\n                                : placeholder\n                    }\n                    value={inputValue}\n                    onChange={handleInputChange}\n                    onKeyDown={handleInputKeyDown}\n                    disabled={disabled}\n                    onFocus={() => setIsFocused(true)}\n                    onBlur={() => setIsFocused(false)}\n                />\n            </section>\n            {errorMsg?.length && (\n                <p className=\"ric-error-msg-wrapper\">{errorMsg}</p>\n            )}\n        </>\n    );\n};\n\nexport default InputChips;\n","\n          export default function styleInject(css, { insertAt } = {}) {\n            if (!css || typeof document === 'undefined') return\n          \n            const head = document.head || document.getElementsByTagName('head')[0]\n            const style = document.createElement('style')\n            style.type = 'text/css'\n          \n            if (insertAt === 'top') {\n              if (head.firstChild) {\n                head.insertBefore(style, head.firstChild)\n              } else {\n                head.appendChild(style)\n              }\n            } else {\n              head.appendChild(style)\n            }\n          \n            if (style.styleSheet) {\n              style.styleSheet.cssText = css\n            } else {\n              style.appendChild(document.createTextNode(css))\n            }\n          }\n          ","import styleInject from '#style-inject';styleInject(\".ric-chip-input-wrapper {\\n  gap: 4px;\\n  flex: 2;\\n  padding: 5px;\\n  overflow: auto;\\n  display: flex;\\n  flex-wrap: wrap;\\n  align-items: center;\\n  border: 1px solid #BBBBBB;\\n  border-radius: 4px;\\n  max-width: 650px;\\n  min-width: 300px;\\n  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\\n  &.ric-chip-input-wrapper-focus {\\n    border-color: #4a90e2;\\n    box-shadow: 0 0 0 1px #4a90e2;\\n  }\\n  .ric-chip {\\n    background: #e5e5e5;\\n    border-radius: 4px;\\n    color: #333333;\\n    display: flex;\\n    gap: 0.5rem;\\n    align-items: center;\\n    justify-content: space-between;\\n    max-width: max-content;\\n    padding: 6px;\\n  }\\n  .ric-chip-input {\\n    border: none;\\n    outline: none;\\n    flex: 1;\\n    padding: 0 8px;\\n    height: 30px;\\n  }\\n  .ric-closeBtn {\\n    outline: none;\\n    border: none;\\n    background: none;\\n    height: 18px;\\n    width: 18px;\\n    object-fit: cover;\\n    cursor: pointer;\\n    display: grid;\\n    place-items: center;\\n  }\\n}\\n.ric-chip-input-wrapper-error {\\n  border: 2px solid red;\\n}\\n.ric-error-msg-wrapper {\\n  margin: 0;\\n  font-size: 12px;\\n  color: red;\\n}\\n\")"],"mappings":"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","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-input-chips",
     "private": false,
-    "version": "0.3.4",
+    "version": "1.0.0",
     "main": "./dist/index.js",
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
@@ -47,7 +47,8 @@
         "build": "tsup",
         "lint": "eslint .",
         "preview": "vite preview",
-        "bundle": "tsup src/index.ts"
+        "bundle": "tsup src/index.ts",
+        "test": "vitest"
     },
     "dependencies": {
         "react": "^18.3.1",
@@ -55,6 +56,10 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.13.0",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react-swc": "^3.5.0",
@@ -62,9 +67,11 @@
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-react-refresh": "^0.4.14",
         "globals": "^15.11.0",
+        "jsdom": "^28.0.0",
         "tsup": "^8.3.5",
         "typescript": "~5.6.2",
         "typescript-eslint": "^8.11.0",
-        "vite": "^5.4.10"
+        "vite": "^5.4.10",
+        "vitest": "^4.0.18"
     }
-}
+}

package/src/components/InputChip.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useState } from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import InputChips from './InputChip';
+
+// Wrapper component to manage state for testing
+const TestWrapper = (props: any) => {
+    const [chips, setChips] = useState<string[]>(props.initialChips || []);
+    const [inputValue, setInputValue] = useState('');
+
+    return (
+        <InputChips
+            chips={chips}
+            setChips={setChips}
+            inputValue={inputValue}
+            setInputValue={setInputValue}
+            {...props}
+        />
+    );
+};
+
+describe('InputChips', () => {
+    it('renders correctly', () => {
+        render(<TestWrapper />);
+        const input = screen.getByRole('textbox');
+        expect(input).toBeInTheDocument();
+    });
+
+    it('adds a chip when Enter is pressed', () => {
+        render(<TestWrapper />);
+        const input = screen.getByRole('textbox');
+        fireEvent.change(input, { target: { value: 'test-chip' } });
+        fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+        expect(screen.getByText('test-chip')).toBeInTheDocument();
+    });
+
+    it('removes a chip when delete button is clicked', () => {
+        render(<TestWrapper initialChips={['chip1']} />);
+        const deleteBtn = screen.getByTestId('remove-chip-btn-0');
+        fireEvent.click(deleteBtn);
+        expect(screen.queryByText('chip1')).not.toBeInTheDocument();
+    });
+
+    it('removes the last chip on Backspace when input is empty', () => {
+        render(<TestWrapper initialChips={['chip1']} backspaceToRemoveChip={true} />);
+        const input = screen.getByRole('textbox');
+        fireEvent.keyDown(input, { key: 'Backspace', code: 'Backspace' });
+        expect(screen.queryByText('chip1')).not.toBeInTheDocument();
+    });
+
+    it('validates input before adding chip', () => {
+        const validate = vi.fn().mockReturnValue(false);
+        render(<TestWrapper validate={validate} />);
+        const input = screen.getByRole('textbox');
+        fireEvent.change(input, { target: { value: 'invalid' } });
+        fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+        expect(screen.queryByText('invalid')).not.toBeInTheDocument();
+        expect(validate).toHaveBeenCalled();
+    });
+});

package/src/components/InputChip.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import './styles.css';
-import {TInputChips, AllowedKeys} from '../types';
+import { TInputChips, AllowedKeys } from '../types';
 
 const InputChips = ({
     chips,
@@ -14,10 +14,19 @@ const InputChips = ({
     nextPlaceholder,
     removeBtnSvg,
     chipStyles,
+    chipClassName,
     containerStyles,
+    containerClassName,
+    inputStyle,
+    inputClassName,
+    closeBtnStyle,
+    closeBtnClassName,
     backspaceToRemoveChip = false,
     errorMsg,
 }: TInputChips) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const [isFocused, setIsFocused] = React.useState(false);
+
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const value = e.target.value;
 
@@ -32,13 +41,18 @@ const InputChips = ({
         if (
             backspaceToRemoveChip &&
             e.key === 'Backspace' &&
-            inputValue.trim() === ''
+            inputValue.trim() === '' &&
+            chips.length > 0
         ) {
-            setChips((prevState) => {
-                const updatedChips = [...prevState];
-                updatedChips.pop();
-                return updatedChips;
-            });
+            e.preventDefault();
+            const updatedChips = [...chips];
+            updatedChips.pop();
+            setChips(updatedChips);
+            return;
+        }
+
+        if (e.key === 'ArrowLeft' && inputValue.trim() === '' && chips.length > 0) {
+            // Logic to select last chip could be added here, but for now we are just cleaning up
         }
 
         const isKeyAllowed = (key: string): key is AllowedKeys => {
@@ -51,15 +65,18 @@ const InputChips = ({
             let chip = inputValue.trim();
 
             if (keysToTriggerChipConversion.some((key) => key.length === 1)) {
-                const regex = new RegExp(
-                    `[${keysToTriggerChipConversion
-                        .filter((key) => key.length === 1)
-                        .map((key) =>
-                            key.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
-                        )
-                        .join('')}]`,
-                    'g'
-                );
+                const regex = React.useMemo(() => {
+                    return new RegExp(
+                        `[${keysToTriggerChipConversion
+                            .filter((key) => key.length === 1)
+                            .map((key) =>
+                                key.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
+                            )
+                            .join('')}]`,
+                        'g'
+                    );
+                }, [keysToTriggerChipConversion]);
+
                 chip = chip.replace(regex, '');
             }
 
@@ -86,26 +103,28 @@ const InputChips = ({
     return (
         <>
             <section
-                className={
-                    errorMsg?.length
-                        ? 'chip-input-wrapper chip-input-wrapper-error'
-                        : 'chip-input-wrapper'
-                }
+                className={`${errorMsg?.length
+                        ? 'ric-chip-input-wrapper ric-chip-input-wrapper-error'
+                        : 'ric-chip-input-wrapper'
+                    } ${isFocused ? 'ric-chip-input-wrapper-focus' : ''} ${containerClassName || ''}`}
                 style={containerStyles ?? {}}
+                onClick={() => inputRef.current?.focus()}
             >
                 {chips.map((chip, index) => (
                     <div
                         key={chip + index}
                         data-testid={`input-value-chip-${index}`}
-                        className="chip"
+                        className={`ric-chip ${chipClassName || ''}`}
                         style={chipStyles ?? {}}
                     >
                         {chip}
                         <button
                             type="button"
-                            className="closeBtn"
+                            className={`ric-closeBtn ${closeBtnClassName || ''}`}
+                            style={closeBtnStyle ?? {}}
                             data-testid={`remove-chip-btn-${index}`}
                             onClick={(e) => removeChip(e, chip + index)}
+                            aria-label={`Remove chip ${chip}`}
                         >
                             {removeBtnSvg || (
                                 <svg
@@ -123,23 +142,27 @@ const InputChips = ({
                     </div>
                 ))}
                 <input
-                    className="chip-input"
+                    ref={inputRef}
+                    className={`ric-chip-input ${inputClassName || ''}`}
+                    style={inputStyle ?? {}}
                     type="text"
                     placeholder={
                         disabled
                             ? ''
                             : chips.length
-                            ? nextPlaceholder
-                            : placeholder
+                                ? nextPlaceholder
+                                : placeholder
                     }
                     value={inputValue}
                     onChange={handleInputChange}
                     onKeyDown={handleInputKeyDown}
                     disabled={disabled}
+                    onFocus={() => setIsFocused(true)}
+                    onBlur={() => setIsFocused(false)}
                 />
             </section>
             {errorMsg?.length && (
-                <p className="error-msg-wrapper">{errorMsg}</p>
+                <p className="ric-error-msg-wrapper">{errorMsg}</p>
             )}
         </>
     );

package/src/components/styles.css

@@ -1,4 +1,4 @@
-.chip-input-wrapper {
+.ric-chip-input-wrapper {
    gap: 4px;
    flex: 2;
    padding: 5px;
@@ -10,8 +10,14 @@
    border-radius: 4px;
    max-width: 650px;
    min-width: 300px;
+   transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 
-   .chip {
+   &.ric-chip-input-wrapper-focus {
+      border-color: #4a90e2;
+      box-shadow: 0 0 0 1px #4a90e2;
+   }
+
+   .ric-chip {
       background: #e5e5e5;
       border-radius: 4px;
       color: #333333;
@@ -23,7 +29,7 @@
       padding: 6px;
    }
 
-   .chip-input {
+   .ric-chip-input {
       border: none;
       outline: none;
       flex: 1;
@@ -31,7 +37,7 @@
       height: 30px;
    }
 
-   .closeBtn {
+   .ric-closeBtn {
       outline: none;
       border: none;
       background: none;
@@ -44,11 +50,11 @@
    }
 }
 
-.chip-input-wrapper-error {
+.ric-chip-input-wrapper-error {
    border: 2px solid red
 }
 
-.error-msg-wrapper {
+.ric-error-msg-wrapper {
    margin: 0;
    font-size: 12px;
    color: red

package/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/src/types/index.ts

@@ -33,4 +33,10 @@ export interface TInputChips {
     containerStyles?: React.CSSProperties;
     backspaceToRemoveChip?: boolean;
     errorMsg?: string;
+    chipClassName?: string;
+    inputStyle?: React.CSSProperties;
+    inputClassName?: string;
+    closeBtnStyle?: React.CSSProperties;
+    closeBtnClassName?: string;
+    containerClassName?: string;
 }

package/dist/index.css

@@ -1,52 +0,0 @@
-/* src/components/styles.css */
-.chip-input-wrapper {
-  gap: 4px;
-  flex: 2;
-  padding: 5px;
-  overflow: auto;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  border: 1px solid #BBBBBB;
-  border-radius: 4px;
-  max-width: 650px;
-  min-width: 300px;
-  .chip {
-    background: #e5e5e5;
-    border-radius: 4px;
-    color: #333333;
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    justify-content: space-between;
-    max-width: max-content;
-    padding: 6px;
-  }
-  .chip-input {
-    border: none;
-    outline: none;
-    flex: 1;
-    padding: 0 8px;
-    height: 30px;
-  }
-  .closeBtn {
-    outline: none;
-    border: none;
-    background: none;
-    height: 18px;
-    width: 18px;
-    object-fit: cover;
-    cursor: pointer;
-    display: grid;
-    place-items: center;
-  }
-}
-.chip-input-wrapper-error {
-  border: 2px solid red;
-}
-.error-msg-wrapper {
-  margin: 0;
-  font-size: 12px;
-  color: red;
-}
-/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/styles.css"],"sourcesContent":[".chip-input-wrapper {\n   gap: 4px;\n   flex: 2;\n   padding: 5px;\n   overflow: auto;\n   display: flex;\n   flex-wrap: wrap;\n   align-items: center;\n   border: 1px solid #BBBBBB;\n   border-radius: 4px;\n   max-width: 650px;\n   min-width: 300px;\n\n   .chip {\n      background: #e5e5e5;\n      border-radius: 4px;\n      color: #333333;\n      display: flex;\n      gap: 0.5rem;\n      align-items: center;\n      justify-content: space-between;\n      max-width: max-content;\n      padding: 6px;\n   }\n\n   .chip-input {\n      border: none;\n      outline: none;\n      flex: 1;\n      padding: 0 8px;\n      height: 30px;\n   }\n\n   .closeBtn {\n      outline: none;\n      border: none;\n      background: none;\n      height: 18px;\n      width: 18px;\n      object-fit: cover;\n      cursor: pointer;\n      display: grid;\n      place-items: center;\n   }\n}\n\n.chip-input-wrapper-error {\n   border: 2px solid red\n}\n\n.error-msg-wrapper {\n   margin: 0;\n   font-size: 12px;\n   color: red\n}"],"mappings":";AAAA,CAAC;AACE,OAAK;AACL,QAAM;AACN,WAAS;AACT,YAAU;AACV,WAAS;AACT,aAAW;AACX,eAAa;AACb,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,aAAW;AACX,aAAW;AAEX,GAAC;AACE,gBAAY;AACZ,mBAAe;AACf,WAAO;AACP,aAAS;AACT,SAAK;AACL,iBAAa;AACb,qBAAiB;AACjB,eAAW;AACX,aAAS;AACZ;AAEA,GAAC;AACE,YAAQ;AACR,aAAS;AACT,UAAM;AACN,aAAS,EAAE;AACX,YAAQ;AACX;AAEA,GAAC;AACE,aAAS;AACT,YAAQ;AACR,gBAAY;AACZ,YAAQ;AACR,WAAO;AACP,gBAAY;AACZ,YAAQ;AACR,aAAS;AACT,iBAAa;AAChB;AACH;AAEA,CAAC;AACE,UAAQ,IAAI,MAAM;AACrB;AAEA,CAAC;AACE,UAAQ;AACR,aAAW;AACX,SAAO;AACV;","names":[]}