fix merging classes into components

Author: mythz

src/components/Alert.tsx

@@ -1,6 +1,7 @@
 import type { AlertProps } from '@/components/types'
+import React from 'react'
 
-export default function Alert({ type = "warn", hideIcon, className, children }: AlertProps) {
+export default function Alert({ type = "warn", hideIcon, className, children, ...attrs }: AlertProps & React.HTMLAttributes<HTMLDivElement>) {
   const backgroundColor = type === "info"
     ? "bg-blue-50 dark:bg-blue-200"
     : type === "error"
@@ -53,7 +54,7 @@ export default function Alert({ type = "warn", hideIcon, className, children }:
           </div>
         )}
         <div>
-          <div className={`${textColor} text-sm`}>
+          <div className={`${textColor} text-sm`} {...attrs}>
             {children}
           </div>
         </div>

src/components/AutoFormFields.tsx

@@ -32,7 +32,11 @@ const AutoFormFields = forwardRef<AutoFormFieldsRef, AutoFormFieldsProps>(({
 
   const { metadataApi, apiOf, typeOf, typeOfRef, createFormLayout, Crud } = useMetadata()
 
-  const typeName = useMemo(() => getTypeName(typeProp || modelValue), [typeProp, modelValue])
+  const typeName = useMemo(() => {
+    // If formLayout is provided, we don't need a type
+    if (formLayout && !typeProp) return null
+    return getTypeName(typeProp || modelValue)
+  }, [typeProp, modelValue, formLayout])
 
   const type = useMemo(() => metaType ?? typeOf(typeName), [metaType, typeName, typeOf])
 

src/components/Autocomplete.tsx

@@ -34,6 +34,7 @@ const Autocomplete = forwardRef<AutocompleteRef, AutocompleteProps & Omit<React.
   status,
   onChange,
   children,
+  className,
   ...attrs
 }, ref) => {
   const [expanded, setExpanded] = useState(false)
@@ -42,6 +43,7 @@ const Autocomplete = forwardRef<AutocompleteRef, AutocompleteProps & Omit<React.
   const [take, setTake] = useState(viewCount)
   const [filteredValues, setFilteredValues] = useState<any[]>([])
   const txtInputRef = useRef<HTMLInputElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
 
   const apiState = useApiState()
   const useLabel = label ?? humanize(toPascalCase(id))
@@ -57,10 +59,20 @@ const Autocomplete = forwardRef<AutocompleteRef, AutocompleteProps & Omit<React.
     [responseStatus, id]
   )
 
-  const cls = useMemo(() => [
-    input.base,
-    errorField ? input.invalid : input.valid
-  ].join(' '), [errorField])
+  const cls = useMemo(() => {
+    if (multiple) {
+      return [
+        'w-full cursor-text flex flex-wrap sm:text-sm rounded-md dark:text-white dark:bg-gray-900 border focus-within:border-transparent focus-within:ring-1 focus-within:outline-none',
+        errorField
+          ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus-within:outline-none focus-within:ring-red-500 focus-within:border-red-500'
+          : 'shadow-sm border-gray-300 dark:border-gray-600 focus-within:ring-indigo-500 focus-within:border-indigo-500'
+      ].join(' ')
+    }
+    return [
+      input.base,
+      errorField ? input.invalid : input.valid
+    ].join(' ')
+  }, [errorField, multiple])
 
   const filteredOptions = useMemo(() => {
     let ret = !inputValue
@@ -234,24 +246,53 @@ const Autocomplete = forwardRef<AutocompleteRef, AutocompleteProps & Omit<React.
     refresh()
   }, [])
 
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setExpanded(false)
+      }
+    }
+
+    if (expanded) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside)
+      }
+    }
+  }, [expanded])
+
   const hasOption = useCallback((option: any) => {
-    return Array.isArray(value) && value.indexOf(option) >= 0
+    if (!Array.isArray(value)) return false
+
+    // For objects, compare by key property if it exists
+    if (option && typeof option === 'object' && 'key' in option) {
+      return value.some(v => v && typeof v === 'object' && 'key' in v && v.key === option.key)
+    }
+
+    // For primitives, use indexOf
+    return value.indexOf(option) >= 0
   }, [value])
 
   const select = useCallback((option: any) => {
-    setInputValue('')
-    setExpanded(false)
-
     if (multiple) {
       let newValues = Array.from(value || [])
       if (hasOption(option)) {
-        newValues = newValues.filter(x => x !== option)
+        // Remove the option - use proper comparison for objects
+        if (option && typeof option === 'object' && 'key' in option) {
+          newValues = newValues.filter(x => !(x && typeof x === 'object' && 'key' in x && x.key === option.key))
+        } else {
+          newValues = newValues.filter(x => x !== option)
+        }
       } else {
         newValues.push(option)
       }
       setActive(null)
       onChange?.(newValues)
+      // Don't clear input or close dropdown in multiple mode - keep it open for more selections
     } else {
+      setInputValue('')
+      setExpanded(false)
       let val = option
       onChange?.(val)
     }
@@ -274,35 +315,86 @@ const Autocomplete = forwardRef<AutocompleteRef, AutocompleteProps & Omit<React.
   }, [children])
 
   return (
-    <div id={`${id}-autocomplete`}>
+    <div id={`${id}-autocomplete`} className={className} ref={containerRef}>
       {useLabel && (
         <label htmlFor={`${id}-text`} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
           {useLabel}
         </label>
       )}
 
       <div className="relative mt-1">
-        <input
-          ref={txtInputRef}
-          id={`${id}-text`}
-          type="text"
-          role="combobox"
-          aria-controls="options"
-          aria-expanded="false"
-          autoComplete="off"
-          spellCheck="false"
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          className={cls}
-          placeholder={multiple || !value ? placeholder : ''}
-          readOnly={!multiple && !!value && !expanded}
-          onKeyDown={keyDown}
-          onKeyUp={keyUp}
-          onClick={onInputClick}
-          onPaste={onPaste}
-          required={false}
-          {...attrs}
-        />
+        {multiple ? (
+          <div className={cls} onClick={onInputClick} tabIndex={-1}>
+            <div className="flex flex-wrap pb-1.5">
+              {Array.isArray(value) && value.map((option, idx) => (
+                <div key={idx} className="pt-1.5 pl-1">
+                  <span className="inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-indigo-100 dark:bg-indigo-800 text-indigo-700 dark:text-indigo-300">
+                    {renderItem(option)}
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        if (Array.isArray(value)) {
+                          onChange?.(value.filter(v => v !== option))
+                        }
+                      }}
+                      className="flex-shrink-0 ml-1 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 dark:text-indigo-500 hover:bg-indigo-200 dark:hover:bg-indigo-800 hover:text-indigo-500 dark:hover:text-indigo-400 focus:outline-none focus:bg-indigo-500 focus:text-white dark:focus:text-black"
+                    >
+                      <svg className="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                        <path strokeLinecap="round" strokeWidth="1.5" d="M1 1l6 6m0-6L1 7" />
+                      </svg>
+                    </button>
+                  </span>
+                </div>
+              ))}
+              <div className="pt-1.5 pl-1 shrink">
+                <input
+                  ref={txtInputRef}
+                  id={`${id}-text`}
+                  type="text"
+                  role="combobox"
+                  aria-controls="options"
+                  aria-expanded="false"
+                  autoComplete="off"
+                  spellCheck="false"
+                  className="p-0 dark:bg-transparent rounded-md border-none focus:!border-none focus:!outline-none"
+                  style={{ boxShadow: 'none !important', width: `${inputValue.length + 1}ch` }}
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  placeholder={!value || (Array.isArray(value) && value.length === 0) ? placeholder : ''}
+                  onKeyDown={keyDown}
+                  onKeyUp={keyUp}
+                  onClick={onInputClick}
+                  onPaste={onPaste}
+                  required={false}
+                  {...attrs}
+                />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <input
+            ref={txtInputRef}
+            id={`${id}-text`}
+            type="text"
+            role="combobox"
+            aria-controls="options"
+            aria-expanded="false"
+            autoComplete="off"
+            spellCheck="false"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            className={cls}
+            placeholder={multiple || !value ? placeholder : ''}
+            readOnly={!multiple && !!value && !expanded}
+            onKeyDown={keyDown}
+            onKeyUp={keyUp}
+            onClick={onInputClick}
+            onPaste={onPaste}
+            required={false}
+            {...attrs}
+          />
+        )}
 
         <button
           type="button"

src/components/Combobox.tsx

@@ -18,6 +18,10 @@ const Combobox = forwardRef<ComboboxRef, ComboboxProps & Omit<React.HTMLAttribut
   values,
   entries,
   onChange,
+  label,
+  help,
+  placeholder,
+  className,
   children,
   ...attrs
 }, ref) => {
@@ -44,7 +48,14 @@ const Combobox = forwardRef<ComboboxRef, ComboboxProps & Omit<React.HTMLAttribut
   )
 
   const updateModelValue = useCallback((newModel: any[] | any) => {
-    onChange?.(newModel)
+    // Convert Pair objects back to keys for the parent component
+    if (Array.isArray(newModel)) {
+      onChange?.(newModel.map(x => x.key))
+    } else if (newModel && typeof newModel === 'object' && 'key' in newModel) {
+      onChange?.(newModel.key)
+    } else {
+      onChange?.(newModel)
+    }
   }, [onChange])
 
   const update = useCallback(() => {
@@ -88,14 +99,18 @@ const Combobox = forwardRef<ComboboxRef, ComboboxProps & Omit<React.HTMLAttribut
         ref={inputRef}
         id={id}
         status={status}
+        label={label}
+        help={help}
+        placeholder={placeholder}
+        className={className}
         options={kvpValues}
         match={match}
         multiple={multiple}
         value={model}
         onChange={updateModelValue}
         {...attrs}
       >
-        {({ key, value }: { key: string, value: string }) => (
+        {({ value }: { key: string, value: string }) => (
           <span className="block truncate">{value}</span>
         )}
       </Autocomplete>

src/components/FileInput.tsx

@@ -30,6 +30,7 @@ const FileInput: React.FC<FileInputProps & Omit<React.InputHTMLAttributes<HTMLIn
   files,
   status,
   onChange,
+  className,
   ...attrs
 }) => {
   const apiState = useApiState()
@@ -134,7 +135,7 @@ const FileInput: React.FC<FileInputProps & Omit<React.InputHTMLAttributes<HTMLIn
   }, [])
 
   return (
-    <div className={`flex ${!multiple ? 'justify-between' : 'flex-col'}`}>
+    <div className={`flex ${!multiple ? 'justify-between' : 'flex-col'} ${className || ''}`}>
       <div className="relative flex-grow mr-2 sm:mr-4">
         {useLabel && (
           <label htmlFor={id} className={`block text-sm font-medium text-gray-700 dark:text-gray-300 ${labelClass ?? ''}`}>

src/components/OutlineButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import type { OutlineButtonProps } from '@/components/types'
 
@@ -7,9 +7,13 @@ const OutlineButton: React.FC<OutlineButtonProps> = ({
   href,
   onClick,
   children,
+  className,
   ...attrs
 }) => {
-  const cls = "inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 disabled:text-gray-400 bg-white dark:bg-black hover:bg-gray-50 hover:dark:bg-gray-900 disabled:hover:bg-white dark:disabled:hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black"
+  const cls = useMemo(() => {
+    const baseClasses = "inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 disabled:text-gray-400 bg-white dark:bg-black hover:bg-gray-50 hover:dark:bg-gray-900 disabled:hover:bg-white dark:disabled:hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black"
+    return className ? `${baseClasses} ${className}` : baseClasses
+  }, [className])
 
   if (href) {
     return (

src/components/SecondaryButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import type { SecondaryButtonProps } from '@/components/types'
 
@@ -7,9 +7,13 @@ const SecondaryButton: React.FC<SecondaryButtonProps> = ({
   href,
   onClick,
   children,
+  className,
   ...attrs
 }) => {
-  const cls = "inline-flex justify-center rounded-md border border-gray-300 py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-black"
+  const cls = useMemo(() => {
+    const baseClasses = "inline-flex justify-center rounded-md border border-gray-300 py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-black"
+    return className ? `${baseClasses} ${className}` : baseClasses
+  }, [className])
 
   if (href) {
     return (

src/components/SignIn.tsx

@@ -102,7 +102,7 @@ const SignIn: React.FC<SignInProps> = ({
     ((authProvider as any)?.formLayout || []).map((input: InputInfo) =>
       Object.assign({}, input, {
         type: input.type?.toLowerCase(),
-        autocomplete: input.autocomplete || (input.type?.toLowerCase() === 'password' ? 'current-password' : undefined)
+        autoComplete: input.autocomplete || (input.type?.toLowerCase() === 'password' ? 'current-password' : undefined)
           || (input.id.toLowerCase() === 'username' ? 'username' : undefined),
         css: Object.assign({ field: 'col-span-12' }, input.css)
       })),

src/components/types.ts

@@ -226,6 +226,7 @@ export interface AutocompleteProps {
   match:(item:any,value:string) => boolean
   viewCount?: number
   pageSize?: number
+  className?: string
   onChange?: (value:any[]|any) => void
   children?: ((item:any) => ReactNode) | ReactNode
 }
@@ -238,6 +239,10 @@ export interface ComboboxProps {
     options?: any
     values?: string[]
     entries?: { key:string, value:string }[],
+    label?: string
+    help?: string
+    placeholder?: string
+    className?: string
     onChange?: (value:any[]|any) => void
     children?: ((item:any) => ReactNode) | ReactNode
 }