Merge pull request #24 from miksrv/develop

Fixed MultiSelect, Dropdown and Input Components

CHANGELOG.md

@@ -1,5 +1,14 @@
 # simple-react-ui-kit
 
+## 1.3.1
+
+### Patch Changes
+
+-   Added additional UI tests for Dropdown, Input and MultiSelect
+-   Added className props for Input UI component
+-   Fixed SVG arrow icon color for MultiSelect and Dropdown
+-   Fixed Multiselect and Dropdown backspace keyboard event
+
 ## 1.3.0
 
 ### Minor Changes

package.json

@@ -1,6 +1,6 @@
 {
     "name": "simple-react-ui-kit",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "description": "A lightweight and flexible UI framework for building responsive React applications with customizable components.",
     "repository": "https://github.com/miksrv/simple-react-ui-kit.git",
     "scripts": {

src/components/dropdown/Dropdown.test.tsx

@@ -169,6 +169,17 @@ describe('Dropdown Component', () => {
         })
     })
 
+    it('applies additional class names', () => {
+        const { container } = render(
+            <Dropdown<number>
+                options={options}
+                className='custom-dropdown-class'
+            />
+        )
+        const containerElement = container.querySelector('div')
+        expect(containerElement).toHaveClass('custom-dropdown-class')
+    })
+
     it('does not open dropdown if search is empty while searchable', async () => {
         const placeholder = 'Select an option'
 

src/components/dropdown/Dropdown.tsx

@@ -115,6 +115,10 @@ const Dropdown = <T,>({
         }
 
         if ((event.key === 'Backspace' || event.key === 'Delete') && selectedOption?.key) {
+            if (search !== '') {
+                return
+            }
+
             setSearch(selectedOption?.value)
             setSelectedOption(undefined)
             onSelect?.(undefined)

src/components/dropdown/styles.module.sass

@@ -180,9 +180,10 @@ $iconSize: 18px
                 svg
                     width: $iconSize
                     height: $iconSize
+                    fill: var(--text-color-secondary)
 
                     &:hover
-                        fill: var(--text-color-secondary-hover)
+                        opacity: .7
 
 
         &.error

src/components/input/Input.test.tsx

@@ -36,6 +36,17 @@ describe('Input Component', () => {
         expect(errorElement).toBeInTheDocument()
     })
 
+    it('applies additional class names', () => {
+        const { container } = render(
+            <Input
+                {...defaultProps}
+                className='custom-input-class'
+            />
+        )
+        const containerElement = container.querySelector('div')
+        expect(containerElement).toHaveClass('custom-input-class')
+    })
+
     it('applies the correct className based on required and disabled props', () => {
         render(
             <Input

src/components/input/Input.tsx

@@ -8,15 +8,18 @@ import styles from './styles.module.sass'
  * InputProps interface, representing the properties for the Input component.
  */
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Additional class names for custom styling */
+    className?: string
     /** Label text displayed above the input field */
     label?: string
     /** Error message displayed below the input field when an error occurs */
     error?: string
 }
 
-const Input: React.FC<InputProps> = ({ label, error, ...props }) => (
+const Input: React.FC<InputProps> = ({ className, label, error, ...props }) => (
     <div
         className={cn(
+            className,
             styles.inputContainer,
             error && styles.error,
             props.required && styles.required,

src/components/multiselect/MultiSelect.test.tsx

@@ -105,6 +105,17 @@ describe('MultiSelect Component', () => {
         expect(screen.queryByText(/Option 1/i)).not.toBeInTheDocument()
     })
 
+    it('applies additional class names', () => {
+        const { container } = render(
+            <MultiSelect<string>
+                {...defaultProps}
+                className='custom-multiselect-class'
+            />
+        )
+        const containerElement = container.querySelector('div')
+        expect(containerElement).toHaveClass('custom-multiselect-class')
+    })
+
     it('displays error message when error prop is provided', () => {
         render(
             <MultiSelect<string>

src/components/multiselect/MultiSelect.tsx

@@ -96,6 +96,10 @@ const MultiSelect = <T,>({
         }
 
         if (event.key === 'Backspace' || event.key === 'Delete') {
+            if (search !== '') {
+                return
+            }
+
             const selected = [...(selectedOption || [])]
 
             selected.pop()

src/components/multiselect/styles.module.sass

@@ -93,9 +93,10 @@ $iconSize: 18px
                 svg
                     width: $iconSize
                     height: $iconSize
+                    fill: var(--text-color-secondary)
 
                     &:hover
-                        fill: var(--text-color-secondary-hover)
+                        opacity: .7
 
         &.error
             .searchContainer