@rainbow-oh/yee-c 0.6.2 → 0.6.4

package/package.json

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

package/src/Checkbox/style/index.less

@@ -63,7 +63,7 @@
       border-color: var(--yee-checkbox-border-color);
     }
 
-    &&-checked {
+    &@{pls}-checked {
       @{pls}-inner {
         --ye-checkbox-checked-border-color: var(
           --yee-checkbox-disabled-checked-border-color

package/src/Select/demo/orphan.tsx

@@ -0,0 +1,61 @@
+import { Select, Space } from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+const options = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Orange', value: 'orange' },
+  { label: 'Pineapple', value: 'pineapple' },
+];
+
+// Inline style applied to an orphan value (a value not present in options)
+const orphanStyle: React.CSSProperties = {
+  color: '#fa8c16',
+  fontStyle: 'italic',
+  textDecoration: 'underline dotted',
+};
+
+export default () => {
+  // 'mangox' is not in options → rendered as an orphan value
+  const [single, setSingle] = useState('mangox');
+  // 'durian' is not in options → rendered as an orphan tag alongside normal ones
+  const [multi, setMulti] = useState(['apple', 'durian', 'banana']);
+
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <div>
+        <div style={{ marginBottom: 8 }}>
+          Single — orphan value styled via <code>orphanStyle</code>
+        </div>
+        <Select
+          value={single}
+          onChange={(val) => setSingle(val as string)}
+          options={options}
+          orphanStyle={orphanStyle}
+          style={{ width: 300 }}
+          placeholder="Please select"
+        />
+      </div>
+      <div>
+        <div style={{ marginBottom: 8 }}>
+          Multiple — orphan tag styled via <code>orphanClassName</code>
+        </div>
+        <Select
+          mode="multiple"
+          value={multi}
+          onChange={(val) => setMulti(val as string[])}
+          options={options}
+          orphanClassName="demo-orphan-tag"
+          style={{ width: 300 }}
+          placeholder="Please select"
+        />
+      </div>
+      <style>{`
+        .demo-orphan-tag {
+          color: #fa541c;
+          font-style: italic;
+        }
+      `}</style>
+    </Space>
+  );
+};

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

@@ -21,6 +21,7 @@ Select component for choosing from a set of options.
 <code src="./demo/multiple.tsx" title="Multiple" description="Multiple selection mode"></code>
 <code src="./demo/search.tsx" title="Search" description="Searchable Select"></code>
 <code src="./demo/tags.tsx" title="Tags" description="Tags mode Select"></code>
+<code src="./demo/orphan.tsx" title="Orphan Value" description="Display and custom styling when the value is not in options"></code>
 <code src="./demo/virtual.tsx" title="Virtual Scroll" description="Virtual scrolling for large datasets (thousands of options)"></code>
 
 ## API
@@ -45,6 +46,8 @@ Select component for choosing from a set of options.
 | codeTableName | `string` | Code table name | - |
 | optionFilterProp | `string` | Property to filter by when searching | `label` |
 | optionLabelProp | `string \| (() => string)` | Property to display in the input box | - |
+| orphanClassName | `string` | Extra class name for the displayed value when it is not in `options` (orphan value). An orphan value is shown as the raw value itself by default | - |
+| orphanStyle | `React.CSSProperties` | Extra inline style for the displayed value when it is not in `options` (orphan value) | - |
 | onChange | `(value: string \| number \| Array<string \| number>, options?: Option \| undefined \| Option[]) => void` | Value change callback | - |
 | onFilter | `(value: string, options: Array<Option>) => Array<Option>` | Search callback | - |
 | virtual | `boolean` | Enable virtual scrolling. Only the options in the visible window are rendered, so the DOM node count stays constant regardless of the total. Recommended for hundreds or thousands of options | `false` |

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

@@ -21,6 +21,7 @@ toc: 'content'
 <code src="./demo/multiple.tsx" title="多选" description="多选模式"></code>
 <code src="./demo/search.tsx" title="可搜索" description="可搜索的Select"></code>
 <code src="./demo/tags.tsx" title="标签模式" description="标签模式的Select"></code>
+<code src="./demo/orphan.tsx" title="孤儿值" description="value 不在 options 中时的显示与自定义样式"></code>
 <code src="./demo/virtual.tsx" title="虚拟滚动" description="大数据量（几千条）下的虚拟滚动"></code>
 
 ## API
@@ -45,6 +46,8 @@ toc: 'content'
 | codeTableName | `string` | 代码表 | - |
 | optionFilterProp | `string` | 搜索时对比的属性 | `label` |
 | optionLabelProp | `string \| (() => string)` | 回填到选择框里的属性 | - |
+| orphanClassName | `string` | value 不在 options 中（孤儿值）时，给显示值追加的类名。孤儿值默认直接显示 value 本身 | - |
+| orphanStyle | `React.CSSProperties` | value 不在 options 中（孤儿值）时，给显示值追加的行内样式 | - |
 | onChange | `(value: string \| number \| Array<string \| number>, options?: Option \| undefined \| Option[]) => void` | 值改变时的回调函数 | - |
 | onFilter | `(value: string, options: Array<Option>) => Array<Option>` | 搜索时的回调函数 | - |
 | virtual | `boolean` | 是否开启虚拟滚动。开启后仅渲染可视区内的选项，DOM 节点数与数据总量无关，适合成百上千条数据 | `false` |

package/src/Select/interface.ts

@@ -95,6 +95,17 @@ export interface SelectProps
    * Property to backfill into the select box
    */
   optionLabelProp?: 'string' | (() => string);
+  /**
+   * Extra class name applied to the displayed value when it is not found
+   * in `options` (an "orphan" value). An orphan value is shown as the raw
+   * value itself; this lets you style it differently (e.g. to flag stale data).
+   */
+  orphanClassName?: string;
+  /**
+   * Extra inline style applied to the displayed value when it is not found
+   * in `options` (an "orphan" value).
+   */
+  orphanStyle?: React.CSSProperties;
   /**
    * Callback when value changes
    */

package/src/Select/select.tsx

@@ -32,6 +32,8 @@ const Select = (baseprops: SelectProps) => {
     virtual,
     itemHeight,
     listHeight,
+    orphanClassName,
+    orphanStyle,
     ...rest
   } = props;
 
@@ -68,7 +70,9 @@ const Select = (baseprops: SelectProps) => {
     virtualApiRef.current?.scrollToIndex(index);
   }, []);
 
-  const getOptions = (keys: string | number | Array<string | number>) => {
+  const getOptions = (
+    keys: string | number | Array<string | number>,
+  ) => {
     if (keys === '' || keys === null) {
       return undefined;
     }
@@ -76,10 +80,20 @@ const Select = (baseprops: SelectProps) => {
       if (keys.length === 0) {
         return [];
       }
-      return options.filter((opt) => keys.includes(opt.value));
+      // 按 keys 顺序回填，找不到的 key 构造 label=value 的兜底项（孤儿值），
+      // 与 Selector 的显示保持一致，避免 onChange 第二参数丢值。
+      return keys.map((key) => {
+        const opt = options.find((o) => o.value === key);
+        return opt ?? { value: key, label: String(key) };
+      });
     }
 
-    return options.find((opt) => opt.value === keys);
+    return (
+      options.find((opt) => opt.value === keys) ?? {
+        value: keys,
+        label: String(keys),
+      }
+    );
   };
 
   const handleSelect = (
@@ -193,6 +207,8 @@ const Select = (baseprops: SelectProps) => {
         onRemove={handleRemove as any}
         onSearch={handleSearch}
         onKeyDown={onKeyDown}
+        orphanClassName={orphanClassName}
+        orphanStyle={orphanStyle}
       />
     </Trigger>
   );

package/src/Selector/interface.ts

@@ -79,6 +79,17 @@ export interface PureSelectorProps {
    * Custom text displayed in the input
    */
   optionLabelProp?: string | ((option: TagType) => string);
+  /**
+   * Extra class name applied to the displayed value/tag when its key is not
+   * found in `options` (an "orphan" value). The orphan value is shown as the
+   * raw key itself; this lets you style it differently (e.g. to flag stale data).
+   */
+  orphanClassName?: string;
+  /**
+   * Extra inline style applied to the displayed value/tag when its key is not
+   * found in `options` (an "orphan" value).
+   */
+  orphanStyle?: React.CSSProperties;
 
   /**
    * Control the open state

package/src/Selector/selector.tsx

@@ -37,6 +37,8 @@ const Selector = React.forwardRef(
       disabled,
       options = [],
       selectedKeys,
+      orphanClassName,
+      orphanStyle,
       allowClear = true,
       placeholder,
       closable = true,
@@ -60,17 +62,29 @@ const Selector = React.forwardRef(
     });
 
     const tags = useMemo(() => {
-      return Array.isArray(options)
-        ? options
-            .filter((opt) => selectedKeys.includes(opt.value))
-            .map((opt) => ({
-              ...opt,
-              children:
-                typeof optionLabelProp === 'function'
-                  ? optionLabelProp(opt)
-                  : opt[optionLabelProp],
-            }))
-        : [];
+      if (!Array.isArray(options)) {
+        return [];
+      }
+      // 按 selectedKeys 顺序渲染；找不到的 key 作为孤儿值回退显示 value 本身
+      return selectedKeys.map((key) => {
+        const opt = options.find((o) => o.value === key);
+        if (opt) {
+          return {
+            ...opt,
+            children:
+              typeof optionLabelProp === 'function'
+                ? optionLabelProp(opt)
+                : opt[optionLabelProp],
+            _orphan: false,
+          };
+        }
+        return {
+          value: key,
+          label: String(key),
+          children: String(key),
+          _orphan: true,
+        };
+      });
     }, [options, selectedKeys, optionLabelProp]);
 
     const handleClick = () => {
@@ -148,37 +162,54 @@ const Selector = React.forwardRef(
 
     const renderContent = () => {
       if (multi) {
-        return tags.map((item: TagType & { children: any }, index) => {
-          const _closable =
-            typeof closable === 'function' ? closable(item) : closable;
-          return (
-            <Tag
-              {...item}
-              closable={_closable}
-              onClose={(e) => handleRemove(item, e)}
-              key={item.value || index}
-            />
-          );
-        });
+        return tags.map(
+          (item: TagType & { children: any; _orphan?: boolean }, index) => {
+            const { _orphan, ...tagRest } = item;
+            const _closable =
+              typeof closable === 'function' ? closable(item) : closable;
+            return (
+              <Tag
+                {...tagRest}
+                className={_orphan ? orphanClassName : undefined}
+                style={_orphan ? orphanStyle : undefined}
+                closable={_closable}
+                onClose={(e) => handleRemove(item, e)}
+                key={item.value || index}
+              />
+            );
+          },
+        );
       }
 
       const key = selectedKeys.length ? selectedKeys[0] : '';
       const opt = Array.isArray(options)
         ? options.find((opt) => opt.value === key)
         : null;
+      // 孤儿值：key 非空但在 options 中找不到时，回退显示 value 本身
+      const isOrphan = !opt && key !== '';
       const label = (
         opt
           ? typeof optionLabelProp === 'function'
             ? optionLabelProp(opt)
             : opt[optionLabelProp]
-          : null
+          : isOrphan
+            ? String(key)
+            : null
       ) as React.ReactNode;
 
       return (
         <>
           {renderSearch()}
           {label && (
-            <div className={`${prefixCls}-selection-item`}>{label}</div>
+            <div
+              className={clsx(
+                `${prefixCls}-selection-item`,
+                isOrphan && orphanClassName,
+              )}
+              style={isOrphan ? orphanStyle : undefined}
+            >
+              {label}
+            </div>
           )}
         </>
       );

package/src/Table/style/index.less

@@ -38,7 +38,7 @@
       position: relative;
       background-color: var(--yee-table-thead-bg-color);
 
-      &:not(:last-child):not(@{pls}-expand-col) {
+      &:not(:empty):not(:last-child):not(@{pls}-expand-col) {
         &::before {
           position: absolute;
           content: '';

package/src/Table/tbody/index.tsx

@@ -6,7 +6,7 @@ import LazyRow from './lazy-row';
 import TableRow from './row';
 
 const TableBody: React.FC<TableBodyProps> = (props) => {
-  const { columns, pageData, lazyLoad, ...rest } = props;
+  const { columns, pageData, lazyLoad, noData, ...rest } = props;
 
   const { prefixCls, components, rowKey } = React.useContext(TableCtx);
   const { locale } = useLocale();
@@ -15,7 +15,7 @@ const TableBody: React.FC<TableBodyProps> = (props) => {
   const empty = (
     <tbody className={`${prefixCls}-tbody`}>
       <tr className={`${prefixCls}-no-record`}>
-        <td colSpan={999}>{tableLocale.emptyText}</td>
+        <td colSpan={999}>{noData ?? tableLocale.emptyText}</td>
       </tr>
     </tbody>
   );
@@ -60,7 +60,9 @@ const TableBody: React.FC<TableBodyProps> = (props) => {
   };
 
   const tbody = (
-    <BodyWrapper className={`${prefixCls}-tbody`}>{getRenderRows()}</BodyWrapper>
+    <BodyWrapper className={`${prefixCls}-tbody`}>
+      {getRenderRows()}
+    </BodyWrapper>
   );
 
   return tbody;

package/src/Tag/style/index.less

@@ -149,15 +149,6 @@
     line-height: var(--yee-tag-large-height);
   }
 
-  &-close {
-    display: inline-flex;
-    padding: 0;
-    width: 16px;
-    height: 16px;
-    margin-left: var(--yee-tag-close-margin-left);
-    cursor: pointer;
-  }
-
   &-checkable {
     margin: var(--yee-tag-checkable-margin);
     color: var(--yee-tag-item-not-check-color);
@@ -177,4 +168,13 @@
     background-color: var(--yee-tag-item-check-active-bg-color);
     border-color: var(--yee-tag-item-check-active-border-color);
   }
+
+  & &-close {
+    display: inline-flex;
+    padding: 0;
+    width: 16px;
+    height: 16px;
+    margin-left: var(--yee-tag-close-margin-left);
+    cursor: pointer;
+  }
 }

package/src/utils/isEqual.ts

@@ -1,4 +1,8 @@
-export default function isEqual(a: unknown, b: unknown) {
+export default function isEqual(
+  a: unknown,
+  b: unknown,
+  seen?: Map<object, Set<object>>,
+): boolean {
   // Compare reference types
   if (a === b) return true;
 
@@ -18,17 +22,40 @@ export default function isEqual(a: unknown, b: unknown) {
     return a.source === b.source && a.flags === b.flags;
   }
 
-  // Compare arrays
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) {
-      if (!isEqual(a[i], b[i])) return false;
-    }
-    return true;
+  // Compare functions
+  if (typeof a === 'function' && typeof b === 'function') {
+    return a.toString() === b.toString();
   }
 
-  // Compare objects
+  // For objects and arrays, detect circular references
   if (typeof a === 'object' && typeof b === 'object') {
+    if (!seen) {
+      seen = new Map();
+    }
+
+    // If we've already started comparing this pair, assume equal to break the cycle
+    const seenForA = seen.get(a as object);
+    if (seenForA && seenForA.has(b as object)) {
+      return true;
+    }
+
+    // Mark this pair as being compared
+    if (!seenForA) {
+      seen.set(a as object, new Set([b as object]));
+    } else {
+      seenForA.add(b as object);
+    }
+
+    // Compare arrays
+    if (Array.isArray(a) && Array.isArray(b)) {
+      if (a.length !== b.length) return false;
+      for (let i = 0; i < a.length; i++) {
+        if (!isEqual(a[i], b[i], seen)) return false;
+      }
+      return true;
+    }
+
+    // Compare objects
     const keysA = Object.keys(a);
     const keysB = Object.keys(b);
     if (keysA.length !== keysB.length) return false;
@@ -38,6 +65,7 @@ export default function isEqual(a: unknown, b: unknown) {
         !isEqual(
           (a as Record<string, unknown>)[key],
           (b as Record<string, unknown>)[key],
+          seen,
         )
       )
         return false;
@@ -45,11 +73,6 @@ export default function isEqual(a: unknown, b: unknown) {
     return true;
   }
 
-  // Compare functions
-  if (typeof a === 'function' && typeof b === 'function') {
-    return a.toString() === b.toString();
-  }
-
   // Other cases
   return false;
 }

package/src/version.ts

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