@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

package/src/components/IconFont/Icon.module.scss

@@ -0,0 +1,42 @@
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+
+.icon-font {
+  font-family: iconfont, Arial, sans-serif !important;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: middle;
+  display: inline-block;
+  user-select: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-button {
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: none;
+  // inline-flex: keeps button width snug while aligning icon & text
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+
+  @include theme() {
+    color: get(text-color-link);
+    background-color: get(dropdown-color-default);
+
+    &:hover {
+      background-color: get(dropdown-color-hover);
+    }
+
+    &:active {
+      background-color: get(dropdown-color-active);
+    }
+  }
+}

package/src/components/IconFont/Icon.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Button } from '@mui/base/Button';
+import cs from 'classnames';
+import classes from './Icon.module.scss';
+
+interface IBaseIconProps {
+  name: string;
+  size?: number | undefined;
+  className?: string | undefined;
+  style?: React.CSSProperties | undefined;
+}
+
+interface IPureIconProps extends IBaseIconProps {
+  variant?: 'icon' | undefined;
+  hotSize?: never;
+  onClick?: never;
+}
+
+interface IButtonIconProps extends IBaseIconProps {
+  variant: 'button';
+  hotSize: number;
+  borderRadius?: number | undefined;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | undefined;
+}
+
+type IconProps = IPureIconProps | IButtonIconProps;
+
+const Icon = React.forwardRef((props: IconProps, ref: React.Ref<HTMLButtonElement>) => {
+  const {
+    name,
+    size = 20,
+    variant = 'icon',
+    hotSize = 0,
+    onClick,
+    className,
+    style,
+  } = props;
+
+  if (variant === 'button') {
+    const { borderRadius } = props as IButtonIconProps;
+    return (
+      <Button
+        ref={ref}
+        className={cs(classes['icon-button'], className)}
+        style={{
+          padding: hotSize,
+          borderRadius,
+          ...style,
+        }}
+        onClick={onClick}
+      >
+        <i
+          className={cs(classes['icon-font'])}
+          style={{ fontSize: size, width: size, height: size }}
+          dangerouslySetInnerHTML={{ __html: name }}
+        />
+      </Button>
+    );
+  }
+
+  const BasicIcon = <i ref={ref} className={cs(classes['icon-font'], className)} style={{ fontSize: size, width: size, height: size, ...style }} dangerouslySetInnerHTML={{ __html: name }} />;
+
+  return BasicIcon;
+});
+
+Icon.displayName = 'Icon';
+
+export default Icon;

package/src/components/IconFont/index.ts

@@ -0,0 +1,3 @@
+import Icon from './Icon';
+
+export default Icon;

package/src/components/Input/Input.tsx

@@ -1,25 +1,26 @@
 /* eslint-disable react/display-name */
+import type { InputHTMLAttributes } from 'react';
 import React, {
-  useRef, useState, useImperativeHandle, InputHTMLAttributes,
+  useRef, useState, useImperativeHandle,
 } from 'react';
-import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
+import './index.scss';
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
-  className?: string;
-  inputClassName?: string;
-  placeholder?: string;
-  clearable?: boolean;
-  prefix?: React.ReactNode;
-  suffix?: React.ReactNode;
-  value?: InputHTMLAttributes<HTMLInputElement>['value'];
-  border?: '' | 'bottom';
-  disabled?: boolean;
-  maxLength?: number;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  className?: string | undefined;
+  inputClassName?: string | undefined;
+  placeholder?: string | undefined;
+  clearable?: boolean | undefined;
+  prefix?: React.ReactNode | undefined;
+  suffix?: React.ReactNode | undefined;
+  value?: InputHTMLAttributes<HTMLInputElement>['value'] | undefined;
+  border?: '' | 'bottom' | undefined;
+  disabled?: boolean | undefined;
+  maxLength?: number | undefined;
+  onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+  onBlur?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+  onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+  onKeyDown?: ((event: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
 }
 export interface InputRef {
   focus: (options?: object) => void;
@@ -63,6 +64,13 @@ export const Input = React.forwardRef<InputRef, InputProps>(
         onKeyDown(e);
       }
     };
+    const focus = () => {
+      if (inputRef.current) {
+        inputRef.current.focus({
+          preventScroll: true,
+        });
+      }
+    };
     const clearInput = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
       setValue('');
       focus();
@@ -82,13 +90,6 @@ export const Input = React.forwardRef<InputRef, InputProps>(
         onChange?.(e);
       }
     };
-    const focus = () => {
-      if (inputRef.current) {
-        inputRef.current.focus({
-          preventScroll: true,
-        });
-      }
-    };
     useImperativeHandle(ref, () => ({
       focus,
       blur: () => {
@@ -115,7 +116,16 @@ export const Input = React.forwardRef<InputRef, InputProps>(
           />
           {suffix}
           {(clearable && value)
-          && <Icon type={IconTypes.CLEAR} height={13} width={13} onClick={(e: any) => { clearInput(e); }} />}
+          && (
+            <Icon
+              type={IconTypes.CLEAR}
+              height={13}
+              width={13}
+              onClick={(e: any) => {
+                clearInput(e);
+              }}
+            />
+          )}
         </div>
       </div>
     );

package/src/components/Input/index.scss

@@ -0,0 +1,64 @@
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+
+.tui-kit-input-box {
+  //width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  padding: 0 8px;
+  height: 38px;
+  box-sizing: border-box;
+
+  @include theme() {
+    background-color: get(bg-color-input);
+  }
+
+  &.tui-kit-input-box--focus {
+    @include theme() {
+      outline: 1px solid get(text-color-link);
+    }
+  }
+
+  &.tui-kit-input-border--bottom {
+    outline: none;
+    border-radius: 0;
+
+    @include theme() {
+      border-bottom: 1px solid get(stroke-color-primary);
+      background-color: get(bg-color-operate);
+    }
+  }
+
+  .tui-kit-input {
+    margin-left: 6px;
+    margin-right: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: transparent;
+    border-radius: 10px;
+    border: none;
+    box-sizing: border-box;
+    font-size: 14px;
+    min-width: 0;
+    height: 100%;
+
+    @include theme() {
+      color: get(text-color-primary);
+    }
+
+    &:focus {
+      border: none;
+      outline: none;
+    }
+
+    &::placeholder {
+      padding: 2px 0;
+
+      @include theme() {
+        color: get(text-color-disabled);
+      }
+    }
+  }
+}

package/src/components/Modal/Modal.module.scss

@@ -0,0 +1,55 @@
+$modal-bezier: ease-in-out;
+
+.root {
+  position: fixed;
+  z-index: 1300;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Backdrop styles
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 50%);
+  z-index: -1;
+  opacity: 0;
+  transition: opacity 200ms $modal-bezier;
+}
+
+.backdropEnterActive {
+  opacity: 1;
+}
+
+.modal-content-enter {
+  opacity: 0;
+  transform: scale(0.96) translateY(-10px);
+}
+
+.modal-content-enter-active {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  transition:
+    opacity 200ms $modal-bezier,
+    transform 200ms $modal-bezier;
+}
+
+.modal-content-enter-done {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.modal-content-exit {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.modal-content-exit-active {
+  opacity: 0;
+  transform: scale(0.96) translateY(-10px);
+  transition:
+    opacity 200ms $modal-bezier,
+    transform 200ms $modal-bezier;
+}

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,110 @@
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Modal as BaseModal } from '@mui/base/Modal';
+import cs from 'classnames';
+import { CSSTransition } from 'react-transition-group';
+import classes from './Modal.module.scss';
+import type { ModalProps } from '@mui/base/Modal';
+
+interface IBackdropProps {
+  open?: boolean;
+  className?: string | undefined;
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+const Backdrop = forwardRef<HTMLDivElement, IBackdropProps>((props, _ref) => {
+  const { className, open, onClick } = props;
+
+  const [visible, setVisible] = useState(false);
+
+  const backdropRef = useRef(null);
+
+  useEffect(() => {
+    setVisible(open || false);
+  }, [open]);
+
+  return (
+    <div
+      ref={backdropRef}
+      className={cs(classes.backdrop, {
+        [classes.backdropEnterActive]: visible,
+      }, className)}
+      onClick={(e) => {
+        setVisible(false);
+        onClick?.(e);
+      }}
+    />
+  );
+});
+
+Backdrop.displayName = 'Backdrop';
+
+interface IModalProps extends Omit<ModalProps, 'slots' | 'slotProps'> {
+  className?: string | undefined;
+  style?: React.CSSProperties | undefined;
+}
+
+function Modal(props: IModalProps) {
+  const {
+    open = false,
+    onClose,
+    style,
+    className,
+    children,
+  } = props;
+
+  const modalContentRef = useRef(null);
+
+  const [transitionIn, setTransitionIn] = useState(true);
+
+  return (
+    <BaseModal
+      open={open}
+      closeAfterTransition
+      slots={{
+        backdrop: Backdrop,
+      }}
+      slotProps={{
+        root: {
+          className: cs(classes.root, className),
+          style: { ...style },
+        },
+        backdrop: {
+          onClick: () => setTransitionIn(false),
+        },
+      }}
+    >
+      <>
+        <CSSTransition
+          in={transitionIn}
+          nodeRef={modalContentRef}
+          timeout={200}
+          appear
+          unmountOnExit
+          classNames={{
+            appear: classes['modal-content-enter'],
+            appearActive: classes['modal-content-enter-active'],
+            enter: classes['modal-content-enter'],
+            enterActive: classes['modal-content-enter-active'],
+            enterDone: classes['modal-content-enter-done'],
+            exit: classes['modal-content-exit'],
+            exitActive: classes['modal-content-exit-active'],
+          }}
+          onEnter={() => {
+            setTransitionIn(true);
+          }}
+          onExited={() => {
+            // @ts-expect-error resolve the onClose
+            onClose?.();
+            setTransitionIn(true);
+          }}
+        >
+          <div ref={modalContentRef}>
+            {children}
+          </div>
+        </CSSTransition>
+      </>
+    </BaseModal>
+  );
+}
+
+export default Modal;

package/src/components/Modal/index.ts

@@ -0,0 +1 @@
+export { default } from './Modal';

package/src/components/Model/styles/index.scss

@@ -1,2 +1,2 @@
-@import "./layout.scss";
-@import "./color.scss";
+@forward "./layout";
+@forward "./color";

package/src/components/Plugins/hooks/usePluginsElement.tsx

@@ -1,16 +1,17 @@
-import React, { PropsWithChildren, useMemo } from 'react';
+import type { PropsWithChildren } from 'react';
+import { useMemo } from 'react';
 
 interface PluginsElementProps {
-  plugins?: Array<any>,
-  showNumber?: number,
+  plugins?: any[] | undefined;
+  showNumber?: number | undefined;
 }
 
-export function usePluginsElement <T extends PluginsElementProps>(
+export function usePluginsElement<T extends PluginsElementProps>(
   props: PropsWithChildren<T>,
 ) {
   const { plugins, showNumber } = props;
   return useMemo(() => ({
     showPicker: plugins?.slice(0, showNumber),
     elements: plugins?.slice(showNumber),
-  }), [plugins]);
+  }), [plugins, showNumber]);
 }

package/src/components/Plugins/index.tsx

@@ -1,6 +1,8 @@
-import React, {
-  forwardRef,
-  PropsWithChildren, useImperativeHandle, useLayoutEffect, useRef, useState,
+import type {
+  PropsWithChildren } from 'react';
+import type React from 'react';
+import {
+  forwardRef, useImperativeHandle, useRef, useState,
 } from 'react';
 import { Icon, IconTypes } from '../Icon';
 import { Popup } from '../Popup';
@@ -12,7 +14,7 @@ export interface PluginsProps {
   plugins?: any[];
   showNumber?: number;
   MoreIcon?: any;
-  className?: string;
+  className?: string | undefined;
   customClass?: string;
   style?: any;
   root?: any;
@@ -41,17 +43,17 @@ function PluginsWithContext<T extends PluginsProps>(
     handleVisible,
   } = props;
 
-  useImperativeHandle(ref, () => ({
-    closeMore: (newVal: boolean) => {
-      setShow(false);
-    },
-  }));
-
   const { showPicker, elements } = usePluginsElement({ plugins, showNumber });
   const pluginRef = useRef<HTMLDivElement>(null);
 
   const [show, setShow] = useState(false);
 
+  useImperativeHandle(ref, () => ({
+    closeMore: () => {
+      setShow(false);
+    },
+  }));
+
   const handleShow = (e: any) => {
     e.stopPropagation();
     setShow(!show);

package/src/components/Plugins/styles/color.scss

@@ -1,8 +1,8 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .plugin-popup {
   &-box {
-    border-radius: 16px;
+    border-radius: 8px;
     overflow: hidden;
 
     @include theme() {

package/src/components/Plugins/styles/index.scss

@@ -1,2 +1,2 @@
-@import "./layout.scss";
-@import "./color.scss";
+@forward "./layout";
+@forward "./color";

package/src/components/Plugins/styles/layout.scss

@@ -11,9 +11,10 @@
   display: flex;
   align-items: center;
   position: relative;
+
   &-box {
     position: absolute;
-    z-index: 2;
+    z-index: 5;
     bottom: 100%;
   }
 }

package/src/components/Popup/styles/index.scss

@@ -1,2 +1,2 @@
-@import "./layout.scss";
-@import "./color.scss";
+@forward "./layout";
+@forward "./color";

package/src/components/PopupNew/Popup.tsx

@@ -0,0 +1,47 @@
+import { Unstable_Popup as PopupBase } from '@mui/base/Unstable_Popup';
+import type { PopupProps } from '@mui/base/Unstable_Popup';
+// import classes from './Popup.module.scss';
+
+interface IPopupProps {
+  children: React.ReactNode;
+  open: boolean;
+  anchor: PopupProps['anchor'];
+  slotProps?: PopupProps['slotProps'];
+  disablePortal?: PopupProps['disablePortal'];
+  strategy?: PopupProps['strategy'];
+  placement?: PopupProps['placement'];
+  offset?: number;
+}
+
+function Popup(props: IPopupProps) {
+  const {
+    anchor,
+    children,
+    open = false,
+    placement = 'top',
+    disablePortal = false,
+    strategy = 'absolute',
+    offset = 10,
+    slotProps = {},
+  } = props;
+
+  if (!anchor) {
+    return null;
+  }
+
+  return (
+    <PopupBase
+      open={open}
+      anchor={anchor}
+      placement={placement}
+      disablePortal={disablePortal}
+      strategy={strategy}
+      slotProps={slotProps}
+      offset={offset}
+    >
+      {children}
+    </PopupBase>
+  );
+}
+
+export default Popup;

package/src/components/PopupNew/index.ts

@@ -0,0 +1,3 @@
+import Popup from './Popup';
+
+export default Popup;