@rainbow-oh/yee-c 0.8.19 → 0.8.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.8.19",
+  "version": "0.8.20",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Anchor/anchor.tsx

@@ -78,9 +78,9 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
   const navigationTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
     null,
   );
-  const navigationSettleTimeoutRef = useRef<
-    ReturnType<typeof setTimeout> | null
-  >(null);
+  const navigationSettleTimeoutRef = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
 
   useEffect(() => {
     activeKeyRef.current = mergedActiveKey;
@@ -361,7 +361,10 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
         'pointerdown',
         onUserInterrupt as EventListener,
       );
-      container.removeEventListener('keydown', onUserInterrupt as EventListener);
+      container.removeEventListener(
+        'keydown',
+        onUserInterrupt as EventListener,
+      );
       if (rafId !== null) {
         cancelAnimationFrame(rafId);
       }
@@ -419,7 +422,8 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
 
       // Handles instant scrolling and targets that are already in position.
       handleScroll();
-    }, [
+    },
+    [
       startNavigationLock,
       commitActiveKey,
       scrollToAnchor,

package/src/Checkbox/checkbox.tsx

@@ -81,6 +81,7 @@ const Checkbox = (baseprops: CheckboxProps) => {
         <span
           className={clsx(`${prefixCls}-label`, classNames?.label)}
           style={styles?.label}
+          title={typeof children === 'string' ? children : undefined}
         >
           {children}
         </span>

package/src/Checkbox/style/index.less

@@ -93,6 +93,9 @@
   &-label {
     padding: var(--yee-checkbox-label-padding);
     user-select: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
   &-indeterminate {

package/src/Progress/circle.tsx

@@ -111,7 +111,11 @@ const Circle = React.forwardRef<HTMLDivElement, CircleProps>((props, ref) => {
       style={{ width, height: width }}
       ref={ref}
     >
-      <svg className={`${prefixCls}-circle`} viewBox="0 0 120 120" aria-hidden="true">
+      <svg
+        className={`${prefixCls}-circle`}
+        viewBox="0 0 120 120"
+        aria-hidden="true"
+      >
         <circle
           className={`${prefixCls}-circle-trail`}
           cx="60"

package/src/Progress/line.tsx

@@ -36,7 +36,11 @@ const Line = React.forwardRef<HTMLDivElement, LineProps>((props, ref) => {
 
   return (
     <div className={`${prefixCls}-outer`} ref={ref}>
-      <div className={`${prefixCls}-inner`} style={{ height: strokeWidth }} aria-hidden="true">
+      <div
+        className={`${prefixCls}-inner`}
+        style={{ height: strokeWidth }}
+        aria-hidden="true"
+      >
         <div
           className={`${prefixCls}-bg`}
           style={{ width: percent + '%', ...progressColor }}

package/src/Progress/progress.tsx

@@ -107,7 +107,11 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
         aria-valuemin={0}
         aria-valuemax={100}
         aria-valuetext={`${percent}%`}
-        aria-label={status === 'error' ? `Progress: ${percent}%, error` : `Progress: ${percent}%`}
+        aria-label={
+          status === 'error'
+            ? `Progress: ${percent}%, error`
+            : `Progress: ${percent}%`
+        }
         ref={ref}
         {...dataAttrs}
       >

package/src/Search/demo/basic.tsx

@@ -1,14 +1,50 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import Search from '../index';
-
+import type { SearchOption } from '../interface';
+const people: SearchOption[] = [
+  { key: 'ada', value: 'ada', label: 'Ada Lovelace' },
+  { key: 'grace', value: 'grace', label: 'Grace Hopper' },
+  { key: 'alan', value: 'alan', label: 'Alan Turing' },
+  { key: 'margaret', value: 'margaret', label: 'Margaret Hamilton' },
+];
 export default () => {
-  const onSearch = (value: string) => {
-    console.log('search value:', value);
+  const [keyword, setKeyword] = useState('');
+  const [selected, setSelected] = useState<SearchOption | null>(null);
+  const results = useMemo(() => {
+    const normalizedKeyword = keyword.trim().toLowerCase();
+    const matched = people.filter((person) =>
+      String(person.label).toLowerCase().includes(normalizedKeyword),
+    );
+    return matched.length > 0
+      ? matched
+      : [
+          {
+            key: 'empty',
+            value: 'empty',
+            label: 'No results found',
+            disabled: true,
+          },
+        ];
+  }, [keyword]);
+  const handleSelect = (option: SearchOption | null) => {
+    setSelected(option);
+    if (option) {
+      setKeyword(String(option.label));
+    }
   };
-
   return (
-    <div style={{ width: 300 }}>
-      <Search placeholder="input search text" onSearch={onSearch} />
+    <div style={{ width: 320 }}>
+      <Search
+        allowClear
+        value={keyword}
+        options={results}
+        placeholder="Search people"
+        onSearch={setKeyword}
+        onChange={handleSelect}
+      />
+      <div style={{ marginTop: 12 }}>
+        Selected: {selected ? String(selected.label) : 'None'}
+      </div>
     </div>
   );
 };

package/src/Search/index.en-US.md

@@ -14,7 +14,7 @@ A search input component for querying data.
 
 ## Code Demo
 
-<code src="./demo/basic.tsx" title="Basic" description="Basic usage of Search"></code>
+<code src="./demo/basic.tsx" title="Basic" description="Filter results as you type and select from the dropdown"></code>
 <code src="./demo/size.tsx" title="Size" description="Different sizes of Search"></code>
 <code src="./demo/allowClear.tsx" title="Allow Clear" description="Search with clear icon"></code>
 <code src="./demo/borderless.tsx" title="Borderless" description="Search without border"></code>

package/src/Search/index.zh-CN.md

@@ -14,7 +14,7 @@ toc: 'content'
 
 ## 代码演示
 
-<code src="./demo/basic.tsx" title="基础用法" description="搜索框的基础用法"></code>
+<code src="./demo/basic.tsx" title="基础用法" description="输入关键词筛选结果，并从下拉列表中选择"></code>
 <code src="./demo/size.tsx" title="尺寸" description="不同尺寸的搜索框"></code>
 <code src="./demo/allowClear.tsx" title="可清空" description="带清空图标的搜索框"></code>
 <code src="./demo/borderless.tsx" title="无边框" description="无边框的搜索框"></code>

package/src/Search/interface.ts

@@ -68,7 +68,7 @@ export interface SearchProps
   /**
    * @description Suffix content
    */
-  suffix?: React.ReactNode;
+  suffix?: React.ReactNode | false;
 
   /**
    * @description Whether disabled
@@ -96,7 +96,7 @@ export interface SearchProps
    * @description trigger search event
    * @default 'typing'
    */
-  searchOnAction?: 'typing' | 'enter';
+  searchOnAction?: 'typing' | 'enter' | 'button';
 
   /**
    * @description suggest data

package/src/Search/search.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { X } from 'lucide-react';
+import { Search as SearchIcon, X } from 'lucide-react';
 import React, {
   startTransition,
   useContext,
@@ -86,25 +86,12 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
       }
     }, [open]);
 
-    const handleSearch = (
-      e?:
-        | React.ChangeEvent<HTMLInputElement>
-        | React.MouseEvent<HTMLSpanElement>
-        | React.KeyboardEvent<HTMLInputElement>,
-    ) => {
-      if (disabled) return;
-      onSearch?.(searchValue);
-      if (e?.type === 'click') {
-        (e.target as HTMLElement).blur?.();
-      }
-    };
-
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const newValue = e.target.value;
       setSearchValue(newValue);
       startTransition(() => {
         if (searchOnAction === 'typing') {
-          handleSearch(e);
+          onSearch?.(newValue);
         }
       });
     };
@@ -116,10 +103,28 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
       onSearch?.('');
     };
 
+    const handleSearchClick = (e: React.MouseEvent<HTMLSpanElement>) => {
+      e.stopPropagation();
+      if (searchOnAction === 'button') {
+        onSearch?.(searchValue);
+      }
+    };
+
+    const renderSearchIcon = () => {
+      if (suffix === false) return null;
+      return (
+        <span
+          className={`${prefixCls}-search-icon`}
+          onClick={handleSearchClick}
+        >
+          {suffix || <SearchIcon size={14} />}
+        </span>
+      );
+    };
+
     const renderSuffix = () => {
-      const hasValue = !!searchValue;
-      const showClearIcon = allowClear && hasValue && !disabled;
-      const showSuffix = suffix || showClearIcon;
+      const showClearIcon = allowClear && !disabled && !rest.readOnly;
+      const showSuffix = suffix !== false || suffix !== null || showClearIcon;
 
       if (!showSuffix) {
         return null;
@@ -138,14 +143,16 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
               onKeyDown={(e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                   e.preventDefault();
-                  handleClear(e as unknown as React.MouseEvent<HTMLSpanElement>);
+                  handleClear(
+                    e as unknown as React.MouseEvent<HTMLSpanElement>,
+                  );
                 }
               }}
             >
               <X size={14} aria-hidden="true" />
             </span>
           )}
-          {suffix}
+          {renderSearchIcon()}
         </div>
       );
     };
@@ -177,6 +184,7 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
         prefixCls,
         {
           [`${prefixCls}-disabled`]: disabled,
+          [`${prefixCls}-with-clear`]: allowClear && searchValue,
           [`${prefixCls}-borderless`]: !bordered,
           [`${prefixCls}-small`]: size === 'small',
           [`${prefixCls}-large`]: size === 'large',
@@ -188,7 +196,12 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
     const hasPopup = Array.isArray(options) || Array.isArray(suggestions);
 
     const popup = (
-      <div className={`${prefixCls}-popup`} tabIndex={0} id={listboxId} role="listbox">
+      <div
+        className={`${prefixCls}-popup`}
+        tabIndex={0}
+        id={listboxId}
+        role="listbox"
+      >
         {Array.isArray(options) ? (
           <List
             focusedKey={focusedKey}
@@ -208,7 +221,7 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
     );
 
     return (
-      <Trigger popup={popup} open={open} onOpenChange={setOpen}>
+      <Trigger popup={popup} open={open} stretch="width" onOpenChange={setOpen}>
         <div
           className={getRootClassName()}
           style={style}
@@ -238,7 +251,11 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
                 : undefined
             }
           />
-          {loading ? <Spin variant="ring" size="small" aria-label="Loading" /> : renderSuffix()}
+          {loading ? (
+            <Spin variant="ring" size="small" aria-label="Loading" />
+          ) : (
+            renderSuffix()
+          )}
         </div>
       </Trigger>
     );

package/src/Search/style/index.less

@@ -1,8 +1,8 @@
 // @import '../../style/index.less';
 
-@search-prefix-cls: ~'yee-search';
+@cls: ~'yee-search';
 
-.@{search-prefix-cls} {
+.@{cls} {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -69,9 +69,10 @@
     border: none;
     outline: none;
     transition: all 0.2s;
+    line-height: var(--yee-input-line-height);
 
     &::placeholder {
-      color: var(--yee-text-color-placeholder);
+      color: var(--yee-placeholder-color);
     }
 
     &-disabled {
@@ -99,7 +100,17 @@
     color: var(--yee-input-fix-icon-color);
   }
 
+  &-search-icon {
+    display: inline-flex;
+  }
+
   &-clear-icon {
+    display: inline-flex;
+    padding: var(--yee-input-clear-padding);
+    color: var(--yee-input-clear-color);
+    background-color: var(--yee-input-clear-bg-color);
+    border-radius: 50%;
+    visibility: hidden;
     cursor: pointer;
     transition: color 0.2s;
 
@@ -108,6 +119,12 @@
     }
   }
 
+  &&-with-clear:not(.@{cls}-disabled):hover {
+    .@{cls}-clear-icon {
+      visibility: visible;
+    }
+  }
+
   &-button {
     display: flex;
     align-items: center;

package/src/Spin/indicator.tsx

@@ -60,7 +60,7 @@ const SpokesSpinner: React.FC<SpinProps> = (props) => {
     styles,
     width,
     height,
-    color
+    color,
   } = props;
 
   const containerSize = sizeMap[size];

package/src/Table/style/index.less

@@ -97,7 +97,8 @@
           width: 15px;
           right: -15px;
           top: 0;
-          box-shadow: inset 4px 0 8px -4px var(--yee-table-fixed-left-after-bs-color);
+          box-shadow: inset 4px 0 8px -4px
+            var(--yee-table-fixed-left-after-bs-color);
         }
       }
 
@@ -111,7 +112,8 @@
           width: 15px;
           left: -15px;
           top: 0;
-          box-shadow: inset -4px 0 8px -4px var(--yee-table-fixed-right-after-bs-color);
+          box-shadow: inset -4px 0 8px -4px
+            var(--yee-table-fixed-right-after-bs-color);
         }
       }
     }

package/src/Table/tbody/cell.tsx

@@ -66,13 +66,13 @@ const TableCell: React.FC<BodyCellProps> = (props) => {
       className,
     );
 
-    const styles = { ...style, width, maxWidth: width, textAlign: align };
+    const _style = { ...style, width, maxWidth: width, textAlign: align };
     const _title = typeof title === 'string' ? title : undefined;
 
     return {
       ...cellProperty,
       className: cls,
-      style: styles,
+      style: _style,
       title: _title,
     };
   };

package/src/Transfer/interface.ts

@@ -124,7 +124,6 @@ export interface TransferListProps {
   oneWay?: boolean;
   pagination?: Omit<PaginationProps, 'total'> & { total?: number };
   draggable?: boolean;
-  targetMinCountLimit?: number;
   onDrop?: (dropObj: Record<string, any>, dataSource: DataSource[]) => void;
   onDelete?: (key: string | number) => void;
   onItemSelect: (keys: Array<string | number>) => void;

package/src/Transfer/style/index.less

@@ -66,6 +66,10 @@
       line-height: var(--yee-transfer-list-item-height, 32px);
       padding: var(--yee-transfer-list-item-padding, 0 11px);
 
+      &-checkbox {
+        width: 100%;
+      }
+
       &:hover:not(.yee-one-way):not(.disabled) {
         color: var(--yee-transfer-list-content-item-hover-color);
         background-color: var(--yee-transfer-list-content-item-hover-bg-color);

package/src/Transfer/transfer-list.tsx

@@ -199,6 +199,7 @@ const TransferList: React.FC<TransferListProps> = (props) => {
         {checkboxOptions.map((option, index) => (
           <li className={`${prefixCls}-list-item`} key={option.value || index}>
             <Checkbox
+              className={`${prefixCls}-list-item-checkbox`}
               value={option.value}
               disabled={option.disabled || disabled}
               checked={checkedKeys.includes(option.value)}

package/src/Tree/interface.ts

@@ -180,7 +180,12 @@ export interface TreeProps<T> extends DataAttributeProps {
   /**
    * Customize node key, title, children field names
    */
-  fieldNames?: { key?: keyof T; label?: keyof T; children?: keyof T; extra?: keyof T };
+  fieldNames?: {
+    key?: keyof T;
+    label?: keyof T;
+    children?: keyof T;
+    extra?: keyof T;
+  };
   /**
    * Asynchronous data loading
    */

package/src/Tree/tree-node.tsx

@@ -111,9 +111,12 @@ const Node = <T extends Record<string, unknown> = any>(
     const content = labelRender ? labelRender(node) : label;
 
     // extra: appended after the label content (only when labelRender is NOT used)
-    const _extra = !labelRender && extra
-      ? (typeof extra === 'function' ? extra(original) : extra)
-      : null;
+    const _extra =
+      !labelRender && extra
+        ? typeof extra === 'function'
+          ? extra(original)
+          : extra
+        : null;
 
     return (
       <Button
@@ -127,9 +130,7 @@ const Node = <T extends Record<string, unknown> = any>(
         onClick={disabled ? undefined : () => onSelect(uid)}
       >
         {content}
-        {_extra && (
-          <span className={`${prefixCls}-node-extra`}>{_extra}</span>
-        )}
+        {_extra && <span className={`${prefixCls}-node-extra`}>{_extra}</span>}
       </Button>
     );
   };

package/src/Tree/utils/tree-tools.ts

@@ -229,7 +229,10 @@ export function tree2array<T extends Record<string, unknown>>(
       key: rawKey,
       label: _label as string,
       title: node.title as string | undefined,
-      extra: _extra as React.ReactNode | ((node: T) => React.ReactNode) | undefined,
+      extra: _extra as
+        | React.ReactNode
+        | ((node: T) => React.ReactNode)
+        | undefined,
       path,
       pUid,
       depth,

package/src/Trigger/interface.ts

@@ -32,7 +32,8 @@ export type Point =
   | 'cl'
   | 'cr';
 
-export interface TriggerProps extends Omit<RcTriggerProps, 'children'>, DataAttributeProps {
+export interface TriggerProps
+  extends Omit<RcTriggerProps, 'children'>, DataAttributeProps {
   /**
    * Custom class name prefix
    */

package/src/message/demo/base.tsx

@@ -6,7 +6,7 @@ const BaseDemo = () => {
   const showMessage = (type: string) => {
     switch (type) {
       case 'info':
-        messageApi.open({content: 'This is an info message', duration: 0});
+        messageApi.open({ content: 'This is an info message', duration: 0 });
         break;
       case 'success':
         message.success('This is a success message');

package/src/message/interface.ts

@@ -1,9 +1,5 @@
 export type MessageConfig = {
-  [dataAttribute: `data-${string}`]:
-    | string
-    | number
-    | boolean
-    | undefined;
+  [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
   /**
    * Custom prefix class name
    */

package/src/message/message.test.tsx

@@ -1,6 +1,12 @@
 // @vitest-environment jsdom
 
-import { act, cleanup, render, renderHook, screen } from '@testing-library/react';
+import {
+  act,
+  cleanup,
+  render,
+  renderHook,
+  screen,
+} from '@testing-library/react';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 import { afterEach, describe, expect, it, vi } from 'vitest';
@@ -227,7 +233,11 @@ describe('message', () => {
 
     act(() => {
       currentApi.info({ content: 'first', duration: 0, onClose: firstOnClose });
-      currentApi.info({ content: 'second', duration: 0, onClose: secondOnClose });
+      currentApi.info({
+        content: 'second',
+        duration: 0,
+        onClose: secondOnClose,
+      });
       currentApi.clear();
     });
 
@@ -276,8 +286,8 @@ describe('message', () => {
     expect(element?.getAttribute('role')).toBe('alert');
     expect(element?.getAttribute('aria-live')).toBe('assertive');
     expect(element?.querySelector('.yee-message-content')?.tagName).toBe('DIV');
-    expect(element?.querySelector('.yee-message-icon')?.getAttribute('aria-hidden')).toBe(
-      'true',
-    );
+    expect(
+      element?.querySelector('.yee-message-icon')?.getAttribute('aria-hidden'),
+    ).toBe('true');
   });
 });

package/src/message/message.tsx

@@ -5,10 +5,16 @@ import Spin from '../Spin';
 import type { MessageProps } from './interface';
 
 const icons = {
-  info: <Info size={22} fill='currentColor' stroke="#FFF" strokeWidth={2} />,
-  success: <CircleCheck size={22} fill='currentColor' stroke="#FFF" strokeWidth={2} />,
-  warning: <CircleAlert size={22} fill='currentColor' stroke="#FFF" strokeWidth={2} />,
-  error: <CircleX size={22} fill='currentColor' stroke="#FFF" strokeWidth={2} />,
+  info: <Info size={22} fill="currentColor" stroke="#FFF" strokeWidth={2} />,
+  success: (
+    <CircleCheck size={22} fill="currentColor" stroke="#FFF" strokeWidth={2} />
+  ),
+  warning: (
+    <CircleAlert size={22} fill="currentColor" stroke="#FFF" strokeWidth={2} />
+  ),
+  error: (
+    <CircleX size={22} fill="currentColor" stroke="#FFF" strokeWidth={2} />
+  ),
   loading: <Spin className="loading" type="spin" size="small" height="auto" />,
 };
 

package/src/message/use-message.tsx

@@ -6,11 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
-import {
-  MessageApi,
-  MessageType,
-  WrapperedMessageConfig,
-} from './interface';
+import { MessageApi, MessageType, WrapperedMessageConfig } from './interface';
 import Message from './message';
 
 const useMessage = () => {
@@ -78,9 +74,7 @@ const useMessage = () => {
       updateMessages((current) => {
         const exists = current.some((item) => item.key === key);
         if (exists) {
-          return current.map((item) =>
-            item.key === key ? nextMessage : item,
-          );
+          return current.map((item) => (item.key === key ? nextMessage : item));
         }
         return [...current, nextMessage];
       });

package/src/message/wrapper.tsx

@@ -93,8 +93,7 @@ class MessageWrapper {
     }
 
     const key = params.key ?? this.uuid();
-    const keyGeneration =
-      this.generationByKey.get(key) ?? this.generation++;
+    const keyGeneration = this.generationByKey.get(key) ?? this.generation++;
     this.generationByKey.set(key, keyGeneration);
     const nextMessage = {
       ...params,

package/src/notice/interface.ts

@@ -7,11 +7,7 @@ export type PlacementType =
   | 'bottom';
 
 export type NoticeConfig = {
-  [dataAttribute: `data-${string}`]:
-    | string
-    | number
-    | boolean
-    | undefined;
+  [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
   /**
    * Custom prefix class name
    */