feat: add tab-index in select

libs/components/ui/src/input/Input.tsx

@@ -1,57 +1,62 @@
-import { forwardRef, type ForwardedRef } from 'react';
-/* eslint-disable no-restricted-imports */
-import InputUnstyled, {
-    inputUnstyledClasses,
-    type InputUnstyledProps,
-} from '@mui/base/InputUnstyled';
+import React, {
+    forwardRef,
+    type ForwardedRef,
+    type InputHTMLAttributes,
+    type CSSProperties,
+} from 'react';
 import { styled } from '../styled';
 
-/**
- *  Input is extend by mui InputUnstyled
- *
- * InputUnstyled Demos:
- *
- * - [Input](https://mui.com/base/react-input/)
- *
- * InputUnstyled API:
- *
- * - [InputUnstyled API](https://mui.com/base/api/input-unstyled/)
- *
- * **/
-export type InputProps = InputUnstyledProps;
+export type InputProps = {
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    style?: CSSProperties;
+    noBorder?: boolean;
+} & InputHTMLAttributes<HTMLInputElement>;
 
-export const Input = forwardRef(function CustomInput(
-    props: InputUnstyledProps,
-    ref: ForwardedRef<HTMLDivElement>
-) {
-    const { components, ...other } = props;
-    return (
-        <InputUnstyled
-            components={{
-                Root: StyledInputRoot,
-                Input: StyledInputElement,
-                ...components,
-            }}
-            {...other}
-            ref={ref}
-        />
-    );
-});
+export const Input = forwardRef(
+    (props: InputProps, ref: ForwardedRef<HTMLInputElement>) => {
+        // const { getRootProps, getInputProps } = useInput(props);
+        const {
+            style,
+            startAdornment = null,
+            endAdornment = null,
+            onClick,
+            noBorder = false,
+            ...inputProps
+        } = props;
 
-const StyledInputRoot = styled('div')(({ theme }) => ({
-    height: '32px',
-    display: 'flex',
-    border: `1px solid ${theme.affine.palette.borderColor}`,
-    borderRadius: '10px',
-    color: `${theme.affine.palette.secondaryText}`,
-    padding: '0 12px',
-    fontSize: '14px',
-    lineHeight: '1.5',
-    transition: 'border .1s',
-    [`&.${inputUnstyledClasses.focused}`]: {
-        borderColor: `${theme.affine.palette.primary}`,
-    },
-}));
+        return (
+            <StyledInputRoot
+                noBorder={noBorder}
+                style={style}
+                onClick={onClick}
+            >
+                {startAdornment}
+                <StyledInputElement ref={ref} {...inputProps} />
+                {endAdornment}
+            </StyledInputRoot>
+        );
+    }
+);
+
+const StyledInputRoot = styled('div')<{ noBorder: boolean }>(
+    ({ noBorder, theme }) => ({
+        height: '32px',
+        display: 'flex',
+        border: noBorder
+            ? 'none'
+            : `1px solid ${theme.affine.palette.borderColor}`,
+        borderRadius: '10px',
+        color: `${theme.affine.palette.secondaryText}`,
+        padding: '0 12px',
+        fontSize: '14px',
+        lineHeight: '1.5',
+        transition: 'border .1s',
+        '&:focus-within': {
+            borderColor: `${theme.affine.palette.primary}`,
+        },
+    })
+);
 
 const StyledInputElement = styled('input')(({ theme }) => ({
     fontSize: '14px',