@rainbow-oh/yee-c 0.4.3 → 0.4.5

package/src/Cascader/utils/index.ts

@@ -16,70 +16,104 @@ export function hasChild(
 }
 
 /**
- * Get the next queue element for navigation
+ * Separator used to build a node's `uid` from its value path. A control
+ * character is used on purpose so it can never appear inside a user value —
+ * this prevents collisions like value `"a-1"` vs path `["a", "1"]` that a plain
+ * `'-'` separator would produce.
+ */
+export const UID_SEP = '
';
+
+/**
+ * Build the canonical uid for a value path. Use this everywhere a path needs
+ * to be turned into a key (nodeMap lookups, selected keys, comparisons) so the
+ * format stays consistent with the `uid`/`pid` produced by `flattenOptions`.
+ * @param path - The value path
+ */
+export const pathToUid = (path: Array<string | number>): string =>
+  path.map(String).join(UID_SEP);
+
+/**
+ * Get the direct flattened children of the node identified by `uid`.
+ *
+ * Flattened nodes intentionally do not carry a `children` reference (it used to
+ * point at the raw, un-flattened subtree and caused type lies). Derive children
+ * from the flat list via `pid` instead — single source of truth.
+ * @param data - The flattened options data
+ * @param uid - The parent node's uid
+ */
+export const getChildren = (
+  data: Array<FlattenOption>,
+  uid: string,
+): FlattenOption[] => data.filter((item) => item.pid === uid);
+
+/**
+ * Find the node in `data` whose parent is `pid` and whose value is `value`.
  * @internal
  */
-const getNextQueueElement = (
+const findInColumn = (
   data: Array<FlattenOption>,
+  pid: string,
   value: string | number,
-): [FlattenOption[], { id: string | number; text: string }] | [] => {
-  if (!Array.isArray(data)) {
-    return [];
-  }
-
-  for (let i = 0; i < data.length; i++) {
-    const item = data[i];
-    if (item.uid === value) {
-      const nexts = hasChild(item)
-        ? (item.children as Array<FlattenOption>).filter((c) => c.pid === value)
-        : [];
-      return [
-        nexts,
-        { id: item.value as string | number, text: item.label as string },
-      ];
-    }
-  }
-  return [];
-};
+): FlattenOption | undefined =>
+  data.find((item) => item.pid === pid && item.value === value);
 
 /**
- * Populate data into input fields and dropdown lists from a value array
- * @param arr - The value array representing the selected path
+ * Reconstruct cascade columns and the highlight path from a value path.
+ *
+ * Walks the flattened options level by level, matching each value segment
+ * against the correct parent column via `pid` + `value`. Returns:
+ *  - `queue`: the columns to render (column 0 = root, then each matched
+ *    node's children column).
+ *  - `path`: the highlight breadcrumb shaped as `{ key: uid, label }`, so it
+ *    aligns with `expandedPath[level].key === uid` in the node view.
+ *
+ * Stops safely at the last valid segment if the value path does not exist in
+ * the data source.
+ *
+ * @param arr - The selected path. In `multiple` mode the value is an array of
+ *   paths; the first path is used to drive which columns get expanded.
  * @param data - The flattened options data
  * @param options - Optional configuration
- * @returns A tuple of [queue, path] where queue is the column data and path is the selected path info
+ * @returns A tuple of `[queue, path]`
  */
 export const changeToView = (
-  arr: Array<string | number>,
+  arr: Array<string | number> | Array<Array<string | number>>,
   data: Array<FlattenOption>,
   options?: {
-    needNext?: boolean;
     multiple?: boolean;
   },
-) => {
-  const { needNext, multiple } = options || {};
-  const _queue: FlattenOption[][] = [];
-  const _path: Array<{ id: string | number; text: string }> = [];
+): [FlattenOption[][], Array<{ key: string; label: string }>] => {
+  const { multiple } = options || {};
+  const queue: FlattenOption[][] = [];
+  const path: Array<{ key: string; label: string }> = [];
+
+  // Column 0 (root level) is always present so the popup can open even with
+  // no selection.
+  queue.push(data.filter((item) => item.level === 0));
+
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return [queue, path];
+  }
+
+  // In multiple mode the value is an array of paths; use the first one to
+  // drive column expansion.
+  const segments: Array<string | number> =
+    multiple && Array.isArray(arr[0])
+      ? (arr[0] as Array<string | number>)
+      : (arr as Array<string | number>);
 
-  if (Array.isArray(arr)) {
-    let i = 0;
-    let _arr = arr;
-    if (multiple) {
-      _arr = Array.isArray(arr[0]) ? arr[0] : arr;
+  let currentPid = '';
+  for (let i = 0; i < segments.length; i++) {
+    const matched = findInColumn(data, currentPid, segments[i]);
+    if (!matched) break; // value path doesn't exist in the data source
+    path.push({ key: matched.uid, label: matched.label as string });
+    if (!matched.isLeaf) {
+      queue.push(getChildren(data, matched.uid));
     }
-    let _data = data.filter((item) => item.level === 0);
-    do {
-      _queue.push(_data);
-      const result = getNextQueueElement(_data, _arr[i]);
-      if (result.length) {
-        const [_dataNext, _pathItem] = result;
-        _data = _dataNext;
-        _path.push(_pathItem);
-      }
-      i++;
-    } while (needNext ? i <= _arr.length : i < _arr.length);
+    currentPid = matched.uid;
   }
-  return [_queue, _path];
+
+  return [queue, path];
 };
 
 // Assemble Tags Options
@@ -302,11 +336,11 @@ export const changeToView = (
 // }
 
 /**
- * Format a path array into a key string
+ * Format a value path into a key string. Alias of `pathToUid` so all path→key
+ * conversions share one collision-safe format.
  * @param val - The path array
- * @returns A string key joined by '-'
  */
-export const formatKey = (val: Array<string | number>) => val.join('-');
+export const formatKey = (val: Array<string | number>): string => pathToUid(val);
 
 /**
  * Check if a path has the same prefix as another path
@@ -330,14 +364,16 @@ export const isSamePrefixPath = (
  * Determine if a node is fully selected or half selected (indeterminate)
  * @param value - The selected value paths
  * @param item - The flatten option node to check
+ * @param children - The node's direct flattened children (derive via `getChildren`)
  * @returns A tuple [checkedAll, indeterminate]
  */
 export function isHalfChecked(
   value: Array<Array<string | number>>,
   item: FlattenOption,
+  children: FlattenOption[],
 ) {
-  if (!hasChild(item)) return [false, false];
-  const total = item.children!.length;
+  if (!children.length) return [false, false];
+  const total = children.length;
   const prefixPath = item.path;
 
   const filtered = value.filter((path) => isSamePrefixPath(prefixPath, path));
@@ -348,14 +384,29 @@ export function isHalfChecked(
 }
 
 /**
- * Flatten a tree structure into an array for easier searching and traversal
+ * Default maximum tree depth accepted by `flattenOptions`. Guards against
+ * stack overflow on pathological/deeply-nested input.
+ */
+const DEFAULT_MAX_DEPTH = 100;
+
+/**
+ * Flatten a tree structure into an array for easier searching and traversal.
+ *
+ * The flattened nodes intentionally do NOT carry a `children` field — use
+ * `getChildren(data, uid)` to read a node's children. `uid`/`pid` are built
+ * via `pathToUid` (collision-safe). Includes a depth cap and a cycle guard so
+ * malformed input (very deep or self-referencing trees) cannot overflow the
+ * stack.
+ *
  * @param tree - The tree data to flatten
  * @param fieldNames - Custom field names for label, value, and children
+ * @param maxDepth - Maximum nesting depth (default 100)
  * @returns An array of flattened options with additional metadata
  */
 export const flattenOptions = (
   tree: Array<Record<string, unknown>>,
-  fieldNames: FieldNames,
+  fieldNames?: FieldNames,
+  maxDepth: number = DEFAULT_MAX_DEPTH,
 ): FlattenOption[] => {
   const res: FlattenOption[] = [];
   const {
@@ -363,29 +414,40 @@ export const flattenOptions = (
     value = 'value',
     children = 'children',
   } = fieldNames || {};
+  // Object-identity set of nodes on the current DFS path, for cycle detection.
+  const seen = new Set<Record<string, unknown>>();
   const dfs = (
     nodes: Array<Record<string, unknown>>,
     parents: Array<string | number> = [],
+    labelParents: string[] = [],
   ) => {
     nodes.forEach((node: Record<string, unknown>) => {
-      const wrappered = {
-        $source: node,
-        label: node[label],
-        value: node[value],
-        children: node[children],
-      } as Option;
-      const path = [...parents, wrappered['value']] as Array<string | number>;
-      const uid = path.join('-');
-      const pid = parents.join('-');
+      if (parents.length >= maxDepth) return; // depth guard
+      if (seen.has(node)) return; // cycle guard (back-edge to an ancestor)
+      const nodeLabel = node[label] as string;
+      const path = [...parents, node[value]] as Array<string | number>;
+      const labelPath = [...labelParents, nodeLabel];
+      const uid = pathToUid(path);
       res.push({
-        ...wrappered,
-        pid,
+        $source: node as Option,
+        label: nodeLabel,
+        value: node[value] as string | number,
+        pid: pathToUid(parents),
         uid,
         path,
+        labelPath,
         level: parents.length,
-        isLeaf: !hasChild(wrappered),
-      } as FlattenOption);
-      if (wrappered['children']) dfs(wrappered['children'] as Option[], path);
+        isLeaf: !hasChild(node, children),
+      });
+      if (hasChild(node, children)) {
+        seen.add(node);
+        dfs(
+          node[children] as Array<Record<string, unknown>>,
+          path,
+          labelPath,
+        );
+        seen.delete(node);
+      }
     });
   };
   dfs(tree);

package/src/Drawer/style/index.less

@@ -37,6 +37,10 @@
     padding: var(--yee-drawer-header-padding);
   }
 
+  &-title {
+    font-weight: var(--yee-drawer-title-font-weight);
+  }
+
   &-body {
     flex: 1;
     padding: var(--yee-drawer-body-padding);

package/src/Dropdown/dropdown.tsx

@@ -56,7 +56,7 @@ const Dropdown: FC<DropdownProps> = (baseprops) => {
     <Trigger
       {...rest}
       arrow={arrow}
-      popup={renderPopup() as any}
+      popup={renderPopup() as React.ReactElement}
       placement={placement}
       popupClassName={`${prefixCls}-popup`}
       open={mergedOpen}

package/src/FloatButton/float-button.tsx

@@ -8,8 +8,8 @@ import { FloatButtonGroupCtx } from './float-button-group';
 import type { FloatButtonProps } from './interface';
 import './style/index.less';
 
-const FloatButton = React.forwardRef(
-  (baseprops: FloatButtonProps, ref: any) => {
+const FloatButton = React.forwardRef<HTMLButtonElement, FloatButtonProps>(
+  (baseprops, ref) => {
     const { floatbutton } = useContext(GlobalContext);
     const props = mergeContextToProps(baseprops, floatbutton);
     const {
@@ -26,7 +26,9 @@ const FloatButton = React.forwardRef(
       ...rest
     } = props;
 
-    const componentRef = ref || React.createRef();
+    const componentRef =
+      (ref as React.RefObject<HTMLButtonElement | null>) ||
+      React.createRef<HTMLButtonElement>();
 
     const onMove = (pos: { x: number; y: number }) => {
       // Check if element exists before operating

package/src/Form/demo/basic.tsx

@@ -64,7 +64,7 @@ export default () => {
           </Form.Field>
         </Grid.Item>
         <Grid.Item>
-          <Form.Field name="gender" label="Gender" initialValue="male">
+          <Form.Field name="gender" label="Gender" initialValue="male" required>
             <Select
               options={[
                 { label: 'male', value: 'male' },
@@ -76,7 +76,7 @@ export default () => {
         </Grid.Item>
 
         <Grid.Item>
-          <Form.Field name="birthday" label="Birthday">
+          <Form.Field name="birthday" label="Birthday" required>
             <DatePicker />
           </Form.Field>
         </Grid.Item>

package/src/Form/style/index.less

@@ -56,5 +56,20 @@
         color: var(--yee-error-color);
       }
     }
+
+    // 表单校验态：在此重定义控件读取的 border / box-shadow 变量，
+    // 后代里的 Input / Selector / InputNumber / TextArea 等通过 CSS 变量继承自动变色，
+    // 无需在每个组件里重复 .yee-form-item-error 块，也不存在 specificity / !important 问题。
+    &&-error {
+      --yee-input-border-color: var(--yee-error-color);
+      --yee-input-hover-border-color: var(--yee-error-color-hover);
+      --yee-input-focus-bs-color: var(--yee-error-color-border);
+    }
+
+    &&-warning {
+      --yee-input-border-color: var(--yee-warning-color);
+      --yee-input-hover-border-color: var(--yee-warning-color-hover);
+      --yee-input-focus-bs-color: var(--yee-warning-color-border);
+    }
   }
 }

package/src/Input/style/index.less

@@ -69,6 +69,25 @@
     }
   }
 
+  // size
+  &-small {
+    height: var(--yee-input-small-height, 24px);
+    padding: var(--yee-input-small-padding, 0 6px);
+    font-size: var(--yee-input-small-font-size);
+    line-height: var(--yee-input-small-line-height);
+
+    &::placeholder {
+      font-size: var(--yee-input-small-font-size);
+    }
+  }
+
+  &-large {
+    height: var(--yee-input-large-height, 40px);
+    padding: var(--yee-input-large-padding, 4px 12px);
+    font-size: var(--yee-input-large-font-size);
+    line-height: var(--yee-input-large-line-height);
+  }
+
   &-password {
     flex: 1;
     outline: none;
@@ -91,20 +110,3 @@ input[type='number']::-webkit-outer-spin-button {
 input::placeholder {
   color: var(--yee-placeholder-color);
 }
-
-// form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
-
-    &:hover {
-      border-color: var(--yee-error-color-hover);
-    }
-  }
-}
-
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
-  }
-}

package/src/InputNumber/style/index.less

@@ -185,32 +185,3 @@
     padding-right: 0;
   }
 }
-
-// Form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
-
-    &:not(@{pls}-disabled):hover {
-      border-color: var(--yee-error-color);
-    }
-
-    &-focused {
-      box-shadow: 0 0 0 2px var(--yee-input-content-error-focus-bs-color);
-    }
-  }
-}
-
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
-
-    &:not(@{pls}-disabled):hover {
-      border-color: var(--yee-warning-color);
-    }
-
-    &-focused {
-      box-shadow: 0 0 0 2px var(--yee-input-content-warning-focus-bs-color);
-    }
-  }
-}

package/src/PickerPanel/interface.ts

@@ -1,4 +1,5 @@
 import { Dayjs } from 'dayjs';
+import type { usePanelConfigs } from './configs/locale-adapter';
 export type PickerType =
   | 'date'
   | 'week'
@@ -18,6 +19,9 @@ export type SemanticType =
 
 export type UnitType = 'day' | 'hour' | 'minute' | 'second';
 
+/** Hour/minute/second granularity used by the time sub-panels. */
+export type TimeUnit = 'hour' | 'minute' | 'second';
+
 interface HeaderProps {
   showPrevIcon?: boolean;
   showNextIcon?: boolean;
@@ -115,13 +119,50 @@ export interface PickerPanelProps extends HeaderProps {
   /**
    * Hover range dates [start date, end date]
    */
-  hoverRange?: Array<Dayjs | null>;
+  hoverRange?: Array<Dayjs | null | undefined>;
   /**
    * Selected range dates [start date, end date]
    */
-  selectedRange?: Array<Dayjs | null>;
+  selectedRange?: Array<Dayjs | null | undefined>;
   /**
    * Disabled date function
    */
   disabledDate?: (current: Dayjs) => boolean;
 }
+
+/**
+ * Locale/config bag produced by `usePanelConfigs`, shared by every panel.
+ */
+export type PanelConfigs = ReturnType<typeof usePanelConfigs>;
+
+/**
+ * The `panelProps` bag shared by all date-picking panels, headers and bodies.
+ *
+ * Standalone (does not extend `PickerPanelProps`) so each panel only declares
+ * the fields it actually reads while still receiving the full bag via
+ * `{...props}` spreads (JSX spreads do not trigger excess-property checks).
+ */
+export interface PanelSharedProps {
+  prefixCls?: string;
+  picker?: PickerType;
+  offset?: { year?: number; month?: number; day?: number };
+  viewDate: Dayjs;
+  selectedDate?: Dayjs;
+  panelConfigs: PanelConfigs;
+  handleMouseChange?: (date: Dayjs | '') => void;
+  onViewDateChange: (date: Dayjs) => void;
+  onPanelChange: (view: PickerType) => void;
+  onSelect?: (date: Dayjs) => void;
+  offsetYear?: number;
+  /** Never set in `panelProps`, so always `undefined` at runtime. */
+  nowDate?: Dayjs;
+  weekStart?: number;
+  showHeader?: boolean;
+  cellRender?: (date: Dayjs, panel: PickerType) => React.ReactNode;
+  prefixColumn?: (currentDate: Dayjs) => React.ReactNode;
+  getRowClassName?: (currentDate: Dayjs) => string;
+  hoverRange?: Array<Dayjs | null | undefined>;
+  selectedRange?: Array<Dayjs | null | undefined>;
+  maxDate?: Dayjs;
+  minDate?: Dayjs;
+}

package/src/PickerPanel/panels/DatePanel/DateBody.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { Dayjs } from 'dayjs';
 import React from 'react';
 import useEvent from '../../../hooks/useEvent';
+import type { PanelSharedProps } from '../../interface';
 import panelConfig from '../../configs';
 import pickerUtils from '../../utils/pickerUtils';
 import PanelBody from '../PanelBody';
@@ -10,7 +11,7 @@ const DATEPANEL_WEEK_DAY_COUNT = 7;
 
 const weekTitle = panelConfig.shortWeekList;
 
-function DateBody(props: any) {
+function DateBody(props: PanelSharedProps) {
   const {
     prefixCls,
     viewDate,

package/src/PickerPanel/panels/DatePanel/DateHeader.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import Button from '../../../Button';
 import useEvent from '../../../hooks/useEvent';
 import { useLocale } from '../../../locale';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import Header from '../Header';
 
-export default function DateHeader(props: any) {
+export default function DateHeader(props: PanelSharedProps) {
   const { locale, lang } = useLocale();
   const { datepicker } = locale;
 
@@ -15,7 +16,7 @@ export default function DateHeader(props: any) {
   const month = pickerUtils.getMonth(viewDate);
 
   if (offset?.year) {
-    year = year + parseInt(offset.year);
+    year = year + offset.year;
   }
 
   const onSuperPrevClick = useEvent(() => {

package/src/PickerPanel/panels/DatePanel/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { PanelSharedProps } from '../../interface';
 import DateBody from './DateBody';
 import DateHeader from './DateHeader';
 
-export default function DatePanel(props: any) {
+export default function DatePanel(props: PanelSharedProps) {
   const { prefixCls, showHeader = true } = props;
 
   return (

package/src/PickerPanel/panels/DateTimePanel/index.tsx

@@ -1,24 +1,31 @@
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
+import type { PickerType, PanelSharedProps } from '../../interface';
 import DatePanel from '../DatePanel';
 import TimePanel from '../TimePanel';
 
-function DateTimePanel(props: any) {
-  const { prefixCls = 'yee-picker', onSelect, showTime } = props;
+interface DateTimePanelProps extends Omit<PanelSharedProps, 'onSelect'> {
+  onSelect?: (panel: PickerType, date: Dayjs) => void;
+  showTime?: boolean;
+}
+
+function DateTimePanel(props: DateTimePanelProps) {
+  const { onSelect, showTime, ...rest } = props;
+  const prefixCls = rest.prefixCls ?? 'yee-picker';
 
   const handleSelect = (type: string, date: Dayjs) => {
-    onSelect(type, date);
+    onSelect?.(type as PickerType, date);
   };
 
   return (
     <div className={`${prefixCls}-datetime-panel`}>
       <DatePanel
-        {...props}
+        {...rest}
         onSelect={(date: Dayjs) => handleSelect('date', date)}
       />
       {showTime ? (
         <TimePanel
-          {...props}
+          {...rest}
           onSelect={(date: Dayjs) => handleSelect('datetimetime', date)}
           showHeader
         />

package/src/PickerPanel/panels/DecadePanel/DecadeBody.tsx

@@ -2,11 +2,12 @@ import clsx from 'clsx';
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
 import useEvent from '../../../hooks/useEvent';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import PanelBody from '../PanelBody';
 
-function DecadeBody(props: any) {
-  const { prefixCls, viewDate, offsetYear } = props;
+function DecadeBody(props: PanelSharedProps) {
+  const { prefixCls, viewDate, offsetYear = 0 } = props;
 
   const baseDate = pickerUtils.getBaseDate('decade', viewDate);
 

package/src/PickerPanel/panels/DecadePanel/DecadeHeader.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import useEvent from '../../../hooks/useEvent';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import Header from '../Header';
 
-export default function DecadeHeader(props: any) {
-  const { viewDate, offsetYear, onViewDateChange } = props;
+export default function DecadeHeader(props: PanelSharedProps) {
+  const { viewDate, offsetYear = 0, onViewDateChange } = props;
   const onSuperPrevClick = useEvent(() => {
     onViewDateChange(pickerUtils.addYear(viewDate, -100));
   });

package/src/PickerPanel/panels/DecadePanel/index.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
+import type { PanelSharedProps } from '../../interface';
 
 import DecadeBody from './DecadeBody';
 import DecadeHeader from './DecadeHeader';
 
-export default function DecadePanel(props: any) {
+export default function DecadePanel(props: PanelSharedProps) {
   const { prefixCls, offset } = props;
 
   let offsetYear = 0;
   if (offset?.year) {
-    offsetYear = parseInt(offset.year);
+    offsetYear = offset.year;
   }
 
   return (

package/src/PickerPanel/panels/Header.tsx

@@ -7,7 +7,20 @@ import {
 import React from 'react';
 import Button from '../../Button';
 
-export default function Header(props: any) {
+export interface PanelHeaderProps {
+  prefixCls?: string;
+  onPrevClick?: () => void;
+  onSuperPrevClick?: () => void;
+  onNextClick?: () => void;
+  onSuperNextClick?: () => void;
+  showPrevIcon?: boolean;
+  showNextIcon?: boolean;
+  showSuperPrevIcon?: boolean;
+  showSuperNextIcon?: boolean;
+  children?: React.ReactNode;
+}
+
+export default function Header(props: PanelHeaderProps) {
   const {
     prefixCls,
     onPrevClick,