feat: support pivots menu (#1755)

packages/component/src/ui/input/Input.tsx

@@ -1,12 +1,12 @@
 import type {
+  CSSProperties,
   FocusEventHandler,
   ForwardedRef,
   HTMLAttributes,
   InputHTMLAttributes,
   KeyboardEventHandler,
 } from 'react';
-import { forwardRef } from 'react';
-import { useEffect, useState } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 
 import { StyledInput } from './style';
 
@@ -14,13 +14,14 @@ type inputProps = {
   value?: string;
   placeholder?: string;
   disabled?: boolean;
-  width?: number;
-  height?: number;
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
   maxLength?: number;
   minLength?: number;
   onChange?: (value: string) => void;
   onBlur?: FocusEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  noBorder?: boolean;
 } & Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
 
 export const Input = forwardRef<HTMLInputElement, inputProps>(function Input(
@@ -31,10 +32,11 @@ export const Input = forwardRef<HTMLInputElement, inputProps>(function Input(
     maxLength,
     minLength,
     height,
-    width = 260,
+    width,
     onChange,
     onBlur,
     onKeyDown,
+    noBorder = false,
     ...otherProps
   }: inputProps,
   ref: ForwardedRef<HTMLInputElement>
@@ -69,7 +71,8 @@ export const Input = forwardRef<HTMLInputElement, inputProps>(function Input(
       onBlur={handleBlur}
       onKeyDown={handleKeyDown}
       height={height}
+      noBorder={noBorder}
       {...otherProps}
-    ></StyledInput>
+    />
   );
 });

packages/component/src/ui/input/style.ts

@@ -1,28 +1,25 @@
+import type { CSSProperties } from 'react';
+
 import { styled } from '../../styles';
 
 export const StyledInput = styled('input')<{
   disabled?: boolean;
   value?: string;
-  width: number;
-  height?: number;
-}>(({ theme, width, disabled, height }) => {
-  const fontWeight = 400;
-  const fontSize = '16px';
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+  noBorder?: boolean;
+}>(({ theme, width, disabled, height, noBorder }) => {
   return {
-    width: `${width}px`,
+    width: width || '100%',
+    height,
     lineHeight: '22px',
     padding: '8px 12px',
-    fontWeight,
-    fontSize,
-    height: height ? `${height}px` : 'auto',
     color: disabled ? theme.colors.disableColor : theme.colors.textColor,
-    border: `1px solid`,
+    border: noBorder ? 'unset' : `1px solid`,
     borderColor: theme.colors.borderColor, // TODO: check out disableColor,
     backgroundColor: theme.colors.popoverBackground,
     borderRadius: '10px',
     '&::placeholder': {
-      fontWeight,
-      fontSize,
       color: theme.colors.placeHolderColor,
     },
     '&:focus': {