feat(ui): add auto-complete component

Author: xiejay97

packages/site/src/app/styles/_app.scss

@@ -226,7 +226,8 @@ h3 {
         'Input': 'input',
         'Switch': 'switch',
         'Time-picker': 'time-picker',
-        'Date-picker': 'date-picker'
+        'Date-picker': 'date-picker',
+        'Auto-complete': 'input'
       )
   {
     section[id^='#{$id}'] {

packages/ui/src/components/_alert-dialog/AlertDialog.tsx

@@ -10,7 +10,7 @@ export interface DAlertDialogProps extends React.HTMLAttributes<HTMLDivElement>
   onClose?: () => void;
 }
 
-export function DAlertDialog(props: DAlertDialogProps) {
+export function DAlertDialog(props: DAlertDialogProps): JSX.Element | null {
   const {
     children,
     dDuration,

packages/ui/src/components/_base-design/BaseDesign.tsx

@@ -14,7 +14,7 @@ export interface DBaseDesignProps {
   dFormControl?: DFormControl;
 }
 
-export function DBaseDesign(props: DBaseDesignProps) {
+export function DBaseDesign(props: DBaseDesignProps): JSX.Element | null {
   const { children, dCompose, dFormControl } = props;
 
   const composeContext = useContext(DComposeContext);

packages/ui/src/components/_base-input/BaseInput.tsx

@@ -12,7 +12,7 @@ export interface DBaseInputProps extends React.InputHTMLAttributes<any> {
   dFor?: boolean;
 }
 
-function BaseInput(props: DBaseInputProps, ref: React.ForwardedRef<any>) {
+function BaseInput(props: DBaseInputProps, ref: React.ForwardedRef<any>): JSX.Element | null {
   const { dFormControl, dTag = 'input', dFor = true, ...restProps } = props;
 
   //#region Context

packages/ui/src/components/_date-input/DateInput.tsx

@@ -3,7 +3,6 @@ import type { DFormControl } from '../form';
 
 import React, { useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { filter } from 'rxjs';
 
 import {
   usePrefixConfig,
@@ -43,14 +42,15 @@ export interface DDateInputProps extends Omit<React.HTMLAttributes<HTMLDivElemen
   dSize?: DSize;
   dRange?: boolean;
   dClearable?: boolean;
+  dEscClosable?: boolean;
   dDisabled?: boolean;
   dInputProps?: [React.InputHTMLAttributes<HTMLInputElement>?, React.InputHTMLAttributes<HTMLInputElement>?];
   dInputRef?: [React.Ref<HTMLInputElement>?, React.Ref<HTMLInputElement>?];
   onVisibleChange?: (visible: boolean) => void;
   onClear?: () => void;
 }
 
-function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef>) {
+function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef>): JSX.Element | null {
   const {
     children,
     dFormControl,
@@ -60,6 +60,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
     dSize,
     dRange,
     dClearable,
+    dEscClosable = true,
     dDisabled,
     dInputProps,
     dInputRef,
@@ -169,25 +170,6 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
     }
   }, [asyncCapture, dVisible, uniqueId, updatePosition]);
 
-  useEffect(() => {
-    if (dVisible) {
-      const [asyncGroup, asyncId] = asyncCapture.createGroup();
-
-      asyncGroup
-        .fromEvent<KeyboardEvent>(window, 'keydown')
-        .pipe(filter((e) => e.code === 'Escape'))
-        .subscribe({
-          next: () => {
-            onVisibleChange?.(false);
-          },
-        });
-
-      return () => {
-        asyncCapture.deleteGroup(asyncId);
-      };
-    }
-  }, [asyncCapture, onVisibleChange, dVisible]);
-
   const preventBlur: React.MouseEventHandler = (e) => {
     if (e.target !== inputRefLeft.current && e.target !== inputRefRight.current && e.button === 0) {
       e.preventDefault();
@@ -236,7 +218,11 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
         onKeyDown={(e) => {
           inputProps?.onKeyDown?.(e);
 
-          if (!dVisible) {
+          if (dVisible) {
+            if (dEscClosable && e.code === 'Escape') {
+              onVisibleChange?.(false);
+            }
+          } else {
             if (e.code === 'Space' || e.code === 'Enter') {
               e.preventDefault();
 

packages/ui/src/components/_focus-visible/FocusVisible.tsx

@@ -1,14 +1,23 @@
-import React, { useEffect, useRef } from 'react';
+import type React from 'react';
+
+import { useEffect, useRef } from 'react';
 
 import { useAsync } from '../../hooks';
 
 const FOCUS_KEY = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Enter', 'Space'];
 
+export interface DFocusVisibleRenderProps {
+  fvOnFocus: React.FocusEventHandler;
+  fvOnBlur: React.FocusEventHandler;
+  fvOnKeyDown: React.KeyboardEventHandler;
+}
+
 export interface DFocusVisibleProps {
-  children: React.ReactElement;
+  children: (props: DFocusVisibleRenderProps) => JSX.Element | null;
   onFocusVisibleChange?: (visible: boolean) => void;
 }
-export function DFocusVisible(props: DFocusVisibleProps) {
+
+export function DFocusVisible(props: DFocusVisibleProps): JSX.Element | null {
   const { children, onFocusVisibleChange } = props;
 
   const dataRef = useRef({
@@ -35,25 +44,18 @@ export function DFocusVisible(props: DFocusVisibleProps) {
     };
   }, [asyncCapture]);
 
-  return React.cloneElement<React.HTMLAttributes<HTMLElement>>(children, {
-    ...children.props,
-    onFocus: (e) => {
-      children.props.onFocus?.(e);
-
+  return children({
+    fvOnFocus: () => {
       if (dataRef.current.focusByKeydown) {
         onFocusVisibleChange?.(true);
         dataRef.current.focusVisible = true;
       }
     },
-    onBlur: (e) => {
-      children.props.onBlur?.(e);
-
+    fvOnBlur: () => {
       onFocusVisibleChange?.(false);
       dataRef.current.focusVisible = false;
     },
-    onKeyDown: (e) => {
-      children.props.onKeyDown?.(e);
-
+    fvOnKeyDown: (e) => {
       if (!dataRef.current.focusVisible && FOCUS_KEY.includes(e.code)) {
         onFocusVisibleChange?.(true);
       }

packages/ui/src/components/_footer/Footer.tsx

@@ -16,7 +16,7 @@ export interface DFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   onClose?: () => void;
 }
 
-export function DFooter(props: DFooterProps) {
+export function DFooter(props: DFooterProps): JSX.Element | null {
   const {
     dAlign = 'right',
     dActions = ['cancel', 'ok'],

packages/ui/src/components/_header/Header.tsx

@@ -10,7 +10,7 @@ export interface DHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   onClose?: () => void;
 }
 
-export function DHeader(props: DHeaderProps) {
+export function DHeader(props: DHeaderProps): JSX.Element | null {
   const {
     children,
     dActions = ['close'],

packages/ui/src/components/_mask/Mask.tsx

@@ -11,7 +11,7 @@ export interface DMaskProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
   afterVisibleChange?: (visible: boolean) => void;
 }
 
-export function DMask(props: DMaskProps) {
+export function DMask(props: DMaskProps): JSX.Element | null {
   const {
     dVisible,
     onClose,

packages/ui/src/components/_popup/Popup.tsx

@@ -35,7 +35,7 @@ export interface DPopupProps {
   onUpdatePosition?: () => void;
 }
 
-export function DPopup(props: DPopupProps) {
+export function DPopup(props: DPopupProps): JSX.Element | null {
   const {
     children,
     dVisible,