Merge branch 'main' into feat/pull-a-variable

web/app/components/base/loading/index.tsx

@@ -1,21 +1,25 @@
 'use client'
 
-import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-
+import { cn } from '@/utils/classnames'
 import './style.css'
 
 type ILoadingProps = {
   type?: 'area' | 'app'
+  className?: string
 }
-const Loading = (
-  { type = 'area' }: ILoadingProps = { type: 'area' },
-) => {
+
+const Loading = (props?: ILoadingProps) => {
+  const { type = 'area', className } = props || {}
   const { t } = useTranslation()
 
   return (
     <div
-      className={`flex w-full items-center justify-center ${type === 'app' ? 'h-full' : ''}`}
+      className={cn(
+        'flex w-full items-center justify-center',
+        type === 'app' && 'h-full',
+        className,
+      )}
       role="status"
       aria-live="polite"
       aria-label={t('loading', { ns: 'appApi' })}
@@ -37,4 +41,5 @@ const Loading = (
     </div>
   )
 }
+
 export default Loading

web/app/components/base/search-input/index.tsx

@@ -20,6 +20,7 @@ const SearchInput: FC<SearchInputProps> = ({
   white,
 }) => {
   const { t } = useTranslation()
+  const inputRef = useRef<HTMLInputElement>(null)
   const [focus, setFocus] = useState<boolean>(false)
   const isComposing = useRef<boolean>(false)
   const [compositionValue, setCompositionValue] = useState<string>('')
@@ -36,6 +37,7 @@ const SearchInput: FC<SearchInputProps> = ({
         <RiSearchLine className="h-4 w-4 text-components-input-text-placeholder" aria-hidden="true" />
       </div>
       <input
+        ref={inputRef}
         type="text"
         name="query"
         className={cn(
@@ -65,14 +67,17 @@ const SearchInput: FC<SearchInputProps> = ({
         autoComplete="off"
       />
       {value && (
-        <div
-          className="group/clear flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center"
+        <button
+          type="button"
+          aria-label={t('operation.clear', { ns: 'common' })}
+          className="group/clear flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0"
           onClick={() => {
             onChange('')
+            inputRef.current?.focus()
           }}
         >
           <RiCloseCircleFill className="h-4 w-4 text-text-quaternary group-hover/clear:text-text-tertiary" />
-        </div>
+        </button>
       )}
     </div>
   )