@rainbow-oh/yee-c 0.8.19 → 0.9.0

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
    */

package/src/notice/notice.test.tsx

@@ -90,7 +90,11 @@ describe('notice', () => {
     render(<NoticeHarness />);
 
     act(() => {
-      currentApi.info({ content: 'first', duration: 300, onClose: firstOnClose });
+      currentApi.info({
+        content: 'first',
+        duration: 300,
+        onClose: firstOnClose,
+      });
     });
     act(() => vi.advanceTimersByTime(200));
     act(() => {
@@ -295,7 +299,9 @@ describe('notice', () => {
     expect(screen.queryByText('still paused')).not.toBeNull();
     expect(onClose).not.toHaveBeenCalled();
 
-    fireEvent.mouseLeave(screen.getByText('still paused').closest('.yee-notice')!);
+    fireEvent.mouseLeave(
+      screen.getByText('still paused').closest('.yee-notice')!,
+    );
     act(() => vi.advanceTimersByTime(300));
     expect(onClose).toHaveBeenCalledTimes(1);
   });
@@ -365,7 +371,9 @@ describe('notice', () => {
     expect(screen.queryByText('pause enabled')).not.toBeNull();
     expect(onClose).not.toHaveBeenCalled();
 
-    fireEvent.mouseLeave(screen.getByText('pause enabled').closest('.yee-notice')!);
+    fireEvent.mouseLeave(
+      screen.getByText('pause enabled').closest('.yee-notice')!,
+    );
     act(() => vi.advanceTimersByTime(300));
     expect(onClose).toHaveBeenCalledTimes(1);
   });
@@ -439,9 +447,9 @@ describe('notice', () => {
     expect(element.getAttribute('role')).toBe('button');
     expect(element.getAttribute('aria-live')).toBe('assertive');
     expect(element.getAttribute('tabindex')).toBe('0');
-    expect(element.querySelector('.yee-notice-icon')?.getAttribute('aria-hidden')).toBe(
-      'true',
-    );
+    expect(
+      element.querySelector('.yee-notice-icon')?.getAttribute('aria-hidden'),
+    ).toBe('true');
 
     fireEvent.keyDown(element, { key: 'Enter' });
     fireEvent.keyDown(element, { key: ' ' });

package/src/notice/notice.tsx

@@ -1,16 +1,22 @@
 import clsx from 'clsx';
 import { CircleAlert, CircleCheck, CircleX, Info, X } from 'lucide-react';
 import React from 'react';
+import Button from '../Button';
 import Progress from '../Progress';
 import useCountdown from '../hooks/useCountdown';
 import { NoticeProps } from './interface';
-import Button from '../Button';
 
 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} />
+  ),
 };
 
 const Notice: React.FC<NoticeProps & { id: string | number }> = (props) => {
@@ -102,7 +108,7 @@ const Notice: React.FC<NoticeProps & { id: string | number }> = (props) => {
 
     return (
       <Button
-        variant='text'
+        variant="text"
         size="small"
         className={`${prefixCls}-close`}
         onClick={handleClose}

package/src/notice/wrapper.tsx

@@ -146,8 +146,7 @@ class NoticeWrapper {
 
     const placement = params.placement ?? 'topRight';
     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 affectedPlacements = new Set<PlacementType>([placement]);

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.8.19";
+export const version = "0.9.0";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;

package/dist/cjs/Search/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/dist/cjs/Search/style/index.js

@@ -1,2 +0,0 @@
-// src/Search/style/index.ts
-var import_index = require("./index.less");

package/dist/esm/Search/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/dist/esm/Search/style/index.js

@@ -1 +0,0 @@
-import "./index.less";

package/src/Search/style/index.ts

@@ -1 +0,0 @@
-import './index.less';