Fix input

.changeset/breezy-bees-help.md

@@ -0,0 +1,5 @@
+---
+'@devup-ui/components': patch
+---
+
+Fix input to controlled

packages/components/src/components/Input/__tests__/index.browser.test.tsx

@@ -11,6 +11,22 @@ describe('Input', () => {
     expect(container).toMatchSnapshot()
   })
 
+  it('shoue have class name when className prop is provided', () => {
+    const { container } = render(
+      <Input
+        className="test"
+        classNames={{
+          input: 'test',
+          container: 'test',
+          icon: 'test',
+          errorMessage: 'test',
+        }}
+      />,
+    )
+    expect(container).toMatchSnapshot()
+    expect(container.querySelector('[aria-label="input"]')).toHaveClass('test')
+  })
+
   it('should render with disabled prop', () => {
     const { container } = render(<Input disabled />)
     expect(container).toMatchSnapshot()

packages/components/src/components/Input/index.tsx

@@ -38,7 +38,7 @@ interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
 }
 
 export function Input({
-  defaultValue,
+  defaultValue = '',
   value: valueProp,
   onChange: onChangeProp,
   typography,
@@ -48,22 +48,26 @@ export function Input({
   icon,
   colors,
   disabled,
-  className,
-  classNames,
+  className = '',
+  classNames = {},
   ref,
   onClear,
   ...props
 }: InputProps) {
-  const [value, setValue] = useState(defaultValue || '')
+  const [value, setValue] = useState(defaultValue)
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value)
     onChangeProp?.(e)
   }
+
   const handleClear = () => {
     setValue('')
     onClear?.()
   }
-  const clearButtonVisible = value && !disabled && allowClear
+
+  const finalValue = valueProp ?? value
+
+  const clearButtonVisible = finalValue && !disabled && allowClear
 
   return (
     <Box
@@ -122,7 +126,7 @@ export function Input({
         borderRadius="8px"
         borderStyle="solid"
         borderWidth="1px"
-        className={`${className || ''} ${classNames?.input || ''}`.trim()}
+        className={`${className} ${classNames.input}`.trim()}
         disabled={disabled}
         onChange={handleChange}
         pl={icon ? '36px' : '12px'}
@@ -142,7 +146,7 @@ export function Input({
         }}
         transition="all 0.1s ease-in-out"
         typography={typography}
-        value={valueProp ?? value}
+        value={finalValue}
         {...props}
       />
       {clearButtonVisible && <ClearButton onClick={handleClear} />}

packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap

@@ -41,11 +41,12 @@ exports[`Stepper > should render 1`] = `
     >
       <input
         aria-label="Stepper value"
-        class="width-0-60px--2 text-align-0-center--2 border-radius-0-6px--2 display-0-none-1599573265477977541-2 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-8380715471663921674-1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-12px--1 "
+        class="width-0-60px--2 text-align-0-center--2 border-radius-0-6px--2 display-0-none-1599573265477977541-2 undefined color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-8380715471663921674-1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-12px--1 "
         data-value="0"
         type="number"
         value="0"
       />
+      0
     </div>
     <button
       aria-disabled="false"

packages/eslint-plugin/src/configs/__tests__/__snapshots__/recommended.test.ts.snap

@@ -20,7 +20,6 @@ exports[`recommended > export recommended config 1`] = `
               "schema": [],
               "type": "problem",
             },
-            "name": "css-utils-literal-only",
           },
           "no-duplicate-value": {
             "create": [Function],
@@ -37,7 +36,6 @@ exports[`recommended > export recommended config 1`] = `
               "schema": [],
               "type": "problem",
             },
-            "name": "no-duplicate-value",
           },
           "no-useless-responsive": {
             "create": [Function],
@@ -54,7 +52,6 @@ exports[`recommended > export recommended config 1`] = `
               "schema": [],
               "type": "problem",
             },
-            "name": "no-useless-responsive",
           },
           "no-useless-tailing-nulls": {
             "create": [Function],
@@ -71,7 +68,6 @@ exports[`recommended > export recommended config 1`] = `
               "schema": [],
               "type": "problem",
             },
-            "name": "no-useless-tailing-nulls",
           },
           "style-order-range": {
             "create": [Function],
@@ -87,7 +83,6 @@ exports[`recommended > export recommended config 1`] = `
               "schema": [],
               "type": "problem",
             },
-            "name": "style-order-range",
           },
         },
       },