@akinon/ui-tree-select 1.1.3 → 1.1.5

package/dist/cjs/index.d.ts

@@ -1,5 +1,5 @@
-import type { TreeSelectProps as AntTreeSelectProps } from 'antd';
 import * as React from 'react';
-export type TreeSelectProps = AntTreeSelectProps;
-export declare const TreeSelect: ({ ...restTreeSelectProps }: TreeSelectProps) => React.JSX.Element;
+import type { TreeSelectDataNode, TreeSelectProps } from './types';
+export declare const TreeSelect: <ValueType = unknown, OptionType extends TreeSelectDataNode = TreeSelectDataNode>(props: TreeSelectProps<ValueType, OptionType>) => React.JSX.Element;
+export type { TreeSelectDataNode, TreeSelectProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAEjD,eAAO,MAAM,UAAU,GAAI,4BAA4B,eAAe,sBAErE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAInE,eAAO,MAAM,UAAU,GACrB,SAAS,GAAG,OAAO,EACnB,UAAU,SAAS,kBAAkB,GAAG,kBAAkB,EAE1D,OAAO,eAAe,CAAC,SAAS,EAAE,UAAU,CAAC,sBA8I9C,CAAC;AAEF,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,CAAC"}

package/dist/cjs/index.js

@@ -1,21 +1,117 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeSelect = void 0;
+const icons_1 = require("@akinon/icons");
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
+const classnames_1 = require("classnames");
 const React = require("react");
-const TreeSelect = (_a) => {
-    var restTreeSelectProps = __rest(_a, []);
-    return React.createElement(antd_1.TreeSelect, Object.assign({}, restTreeSelectProps));
+const TREE_LINE = { showLeafIcon: false };
+const TreeSelect = (props) => {
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const treeSelectToken = token.TreeSelect;
+    const treeSelectPrefixCls = `${getPrefixCls()}-tree-select`;
+    const selectTreePrefixCls = `${getPrefixCls()}-select-tree`;
+    const dropdownPrefixCls = `${treeSelectPrefixCls}-dropdown`;
+    const dropdownPrefixClsWithHash = `:where(.${hashId}).${dropdownPrefixCls}`;
+    const switcherIconCls = `${treeSelectPrefixCls}-switcher-icon`;
+    const switcherIconExpandedCls = `${switcherIconCls}-expanded`;
+    const switcherIconCollapsedCls = `${switcherIconCls}-collapsed`;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['TreeSelect'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        return {
+            [dropdownPrefixClsWithHash]: {
+                [`.${selectTreePrefixCls}-title`]: {
+                    color: treeSelectToken.optionTitleColor
+                },
+                [`.${selectTreePrefixCls}-node-selected`]: {
+                    [`.${selectTreePrefixCls}-title`]: {
+                        color: treeSelectToken.optionActiveColor,
+                        fontWeight: treeSelectToken.optionActiveFontWeight
+                    }
+                },
+                [`.${selectTreePrefixCls}`]: {
+                    [`.${selectTreePrefixCls}-switcher`]: {
+                        color: treeSelectToken.optionSwitcherColor,
+                        [`&.${selectTreePrefixCls}-switcher_close`]: {
+                            height: treeSelectToken.titleHeight
+                        },
+                        [`&.${selectTreePrefixCls}-switcher_open`]: {
+                            height: treeSelectToken.titleHeight
+                        }
+                    },
+                    [`.${selectTreePrefixCls}-treenode-active`]: {
+                        [`.${selectTreePrefixCls}-node-content-wrapper`]: {
+                            backgroundColor: treeSelectToken.nodeContentWrapperActiveHoverBg
+                        }
+                    },
+                    [`.${selectTreePrefixCls}-treenode`]: {
+                        marginBottom: `${treeSelectToken.treeNodeMarginBottom} !important`,
+                        '&::before': {
+                            display: treeSelectToken.treeNodeBeforeDisplay
+                        }
+                    }
+                },
+                [`.${treeSelectPrefixCls}-switcher-icon-wrapper`]: {
+                    border: treeSelectToken.switcherIconWrapperBorder,
+                    borderRadius: treeSelectToken.optionSwitcherBorderRadius,
+                    height: treeSelectToken.switcherIconWrapperSize,
+                    width: treeSelectToken.switcherIconWrapperSize,
+                    marginTop: treeSelectToken.switcherIconWrapperMarginTop,
+                    backgroundColor: treeSelectToken.switcherIconWrapperBg
+                },
+                [`.${switcherIconCls}`]: {
+                    marginLeft: treeSelectToken.switcherIconMarginLeft,
+                    marginBottom: treeSelectToken.switcherIconMarginBottom
+                },
+                [`.${switcherIconExpandedCls}`]: {
+                    transform: treeSelectToken.switcherIconExpandedTransform
+                },
+                [`.${switcherIconCollapsedCls}`]: {
+                    transform: treeSelectToken.switcherIconCollapsedTransform
+                },
+                [`.${selectTreePrefixCls}-indent-unit::before`]: {
+                    borderInlineEnd: `${treeSelectToken.nodeBeforeLineBorder} !important`,
+                    insetInlineEnd: `${treeSelectToken.indentLineInsetEnd} !important`
+                },
+                [`.${selectTreePrefixCls}-indent-unit.${selectTreePrefixCls}-indent-unit-end::before`]: {
+                    display: 'block !important',
+                    borderInlineEnd: `${treeSelectToken.nodeBeforeLineBorder} !important`,
+                    insetInlineEnd: `${treeSelectToken.indentLineInsetEnd} !important`
+                },
+                [`.${selectTreePrefixCls}-switcher-leaf-line`]: {
+                    '&::before': {
+                        borderInlineEnd: `${treeSelectToken.nodeBeforeLineBorder} !important`,
+                        insetInlineStart: `${treeSelectToken.leafLineInsetStart} !important`
+                    },
+                    '&::after': {
+                        borderBottom: `${treeSelectToken.nodeBeforeLineBorder} !important`
+                    }
+                },
+                [`.${selectTreePrefixCls}-treenode`]: {
+                    '&:hover': {
+                        backgroundColor: treeSelectToken.nodeContentWrapperActiveBg
+                    },
+                    [`&.${selectTreePrefixCls}-treenode-selected`]: {
+                        backgroundColor: treeSelectToken.nodeContentWrapperActiveBg
+                    }
+                },
+                [`.${selectTreePrefixCls}-node-content-wrapper, .${selectTreePrefixCls}-node-content-wrapper-normal`]: {
+                    marginInlineStart: treeSelectToken.nodeContentWrapperMarginInlineStart
+                }
+            }
+        };
+    });
+    const renderSwitcherIcon = (nodeProps) => (React.createElement("span", { className: `${treeSelectPrefixCls}-switcher-icon-wrapper` },
+        React.createElement(icons_1.Icon, { icon: "triangle", size: 8, className: (0, classnames_1.default)(switcherIconCls, nodeProps.expanded
+                ? switcherIconExpandedCls
+                : switcherIconCollapsedCls) })));
+    return useStyle(React.createElement(antd_1.TreeSelect, Object.assign({ size: "large", popupMatchSelectWidth: true }, props, { treeLine: TREE_LINE, switcherIcon: renderSwitcherIcon })));
 };
 exports.TreeSelect = TreeSelect;

package/dist/cjs/types.d.ts

@@ -0,0 +1,424 @@
+import type { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import type * as React from 'react';
+
+type Key = string | number;
+
+type SafeKey = string | number;
+
+export interface TreeSelectDataNode extends Record<string, unknown> {
+  /** Unique key for the node */
+  key?: Key;
+  /** Value used for selection and filtering */
+  value?: SafeKey;
+  /** Node label */
+  title?: React.ReactNode;
+  children?: TreeSelectDataNode[];
+  /** Disable this node */
+  disabled?: boolean;
+  /** Whether the node can be selected */
+  selectable?: boolean;
+  /** Show checkbox for this node when tree is checkable */
+  checkable?: boolean;
+  /** Disable checkbox for this node */
+  disableCheckbox?: boolean;
+  /** Treat as leaf (no children) */
+  isLeaf?: boolean;
+}
+
+interface TreeNodeProps {
+  checkable?: boolean;
+  disableCheckbox?: boolean;
+  disabled?: boolean;
+  isLeaf?: boolean;
+  key?: Key;
+  selectable?: boolean;
+  title?: React.ReactNode;
+  value?: SafeKey;
+}
+
+interface FieldNames {
+  /** Field name for value */
+  value?: string;
+  /** Field name for label */
+  label?: string;
+  /** Field name for children */
+  children?: string;
+  _title?: string[];
+}
+
+interface SimpleModeConfig {
+  id?: SafeKey;
+  pId?: SafeKey;
+  rootPId?: SafeKey;
+}
+
+interface LabeledValueType {
+  key?: Key;
+  value?: SafeKey;
+  label?: React.ReactNode;
+  /** Option is partially checked (e.g. parent with some children selected) */
+  halfChecked?: boolean;
+}
+
+interface ChangeEventExtra {
+  preValue: LabeledValueType[];
+  triggerValue: SafeKey;
+  selected?: boolean;
+  checked?: boolean;
+  triggerNode: React.ReactElement;
+  allCheckedNodes: unknown[];
+}
+
+interface LegacyDataNode extends TreeSelectDataNode {
+  props: unknown;
+}
+
+type CheckedStrategy = 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD';
+
+type TreeExpandAction = false | 'click' | 'doubleclick';
+
+type SizeType = 'small' | 'middle' | 'large' | undefined;
+
+type SelectCommonPlacement =
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'topLeft'
+  | 'topRight';
+
+type InputStatus = 'warning' | 'error' | '';
+
+type Variant = 'outlined' | 'borderless' | 'filled' | 'underlined';
+
+type TreeShowLine = boolean | { showLeafIcon?: boolean | React.ReactNode };
+
+interface TreeNodePropsForSwitcher {
+  expanded?: boolean;
+  isLeaf?: boolean;
+  [key: string]: unknown;
+}
+
+type SwitcherIcon =
+  | React.ReactNode
+  | ((props: TreeNodePropsForSwitcher) => React.ReactNode);
+
+type TreeIconType =
+  | React.ReactNode
+  | ((props: TreeNodePropsForSwitcher) => React.ReactNode);
+
+type SemanticDOM = 'root';
+
+type PopupSemanticDOM = 'root';
+
+interface ClassNamesStylesInfo<
+  V = unknown,
+  O extends TreeSelectDataNode = TreeSelectDataNode
+> {
+  props: TreeSelectProps<V, O>;
+}
+
+type SemanticName = 'root';
+type PopupSemantic = 'root';
+
+interface ShowSearchObject {
+  /** Clear search when selection changes (multiple mode) */
+  autoClearSearchValue?: boolean;
+  /** Filter nodes by search; use treeNodeFilterProp field or custom function */
+  filterTreeNode?:
+    | boolean
+    | ((inputValue: string, treeNode: TreeSelectDataNode) => boolean);
+  /** Controlled search value; use with onSearch */
+  searchValue?: string;
+  /** Property name used for filtering */
+  treeNodeFilterProp?: string;
+  /** Called when search input changes */
+  onSearch?: (value: string) => void;
+}
+
+interface LabeledValue {
+  key?: string;
+  value: string | number;
+  label: React.ReactNode;
+}
+
+type SelectValue =
+  | (string | number)
+  | (string | number)[]
+  | LabeledValue
+  | LabeledValue[];
+
+interface TagRenderProps {
+  label: React.ReactNode;
+  value: SafeKey | LabeledValueType;
+  disabled?: boolean;
+  onClose: () => void;
+  closable: boolean;
+}
+
+interface TreeSelectRef {
+  blur: () => void;
+  focus: () => void;
+}
+
+export interface TreeSelectProps<
+  ValueType = unknown,
+  OptionType extends TreeSelectDataNode = TreeSelectDataNode
+> extends React.AriaAttributes {
+  /** Whether to show a clear button to remove the selection. */
+  allowClear?: boolean | { clearIcon?: React.ReactNode };
+
+  /** CSS class names for component parts (object or function) */
+  classNames?:
+    | (Partial<Record<SemanticName, string>> & {
+        popup?: Partial<Record<PopupSemantic, string>>;
+      })
+    | ((
+        info: ClassNamesStylesInfo<ValueType, OptionType>
+      ) => Partial<Record<SemanticDOM, string>>);
+
+  /** Dropdown open by default */
+  defaultOpen?: boolean;
+
+  /** Initial selected value(s) */
+  defaultValue?: ValueType;
+
+  /** Whether the tree select is disabled */
+  disabled?: boolean;
+
+  /** Match dropdown width to input; false disables virtual scroll */
+  popupMatchSelectWidth?: boolean | number;
+
+  /** Customize dropdown content wrapper */
+  popupRender?: (
+    originNode: React.ReactNode,
+    props: { menu: React.ReactNode }
+  ) => React.ReactNode;
+
+  /** Map data fields to label, value, children */
+  fieldNames?: FieldNames;
+
+  /** Container element for dropdown */
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+
+  /** Value shape: { value, label, halfChecked } instead of raw value */
+  labelInValue?: boolean;
+
+  /** Dropdown list height (px) */
+  listHeight?: number;
+
+  /** Load children asynchronously for a node */
+  loadData?: (node: LegacyDataNode) => Promise<unknown>;
+
+  /** Max number of tags shown in multiple mode; 'responsive' adapts to width */
+  maxTagCount?: number | 'responsive';
+
+  /** Max selected items when multiple (and not using parent-only strategy) */
+  maxCount?: number;
+
+  /** Placeholder when tags are collapsed (e.g. "+ N more") */
+  maxTagPlaceholder?:
+    | React.ReactNode
+    | ((omittedValues: unknown[]) => React.ReactNode);
+
+  /** Max length of tag text before truncation */
+  maxTagTextLength?: number;
+
+  /** Allow multiple selection */
+  multiple?: boolean;
+
+  /** Content when no options match */
+  notFoundContent?: React.ReactNode;
+
+  /** Controlled dropdown open state */
+  open?: boolean;
+
+  /** Placeholder for the input */
+  placeholder?: React.ReactNode;
+
+  /** Dropdown position */
+  placement?: SelectCommonPlacement;
+
+  /** Prefix content */
+  prefix?: React.ReactNode;
+
+  /** Which checked nodes to show in multiple: all, parent only, or child only */
+  showCheckedStrategy?: CheckedStrategy;
+
+  /** Enable search; use object for options (filter, onSearch, etc.) */
+  showSearch?: boolean | ShowSearchObject;
+
+  size?: SizeType;
+
+  /** Validation state */
+  status?: InputStatus;
+
+  /** Suffix content */
+  suffixIcon?: React.ReactNode;
+
+  /** Custom expand/collapse icon */
+  switcherIcon?: SwitcherIcon;
+
+  styles?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+
+  /** Custom tag render in multiple mode */
+  tagRender?: (props: TagRenderProps) => React.ReactNode;
+
+  /** Show checkboxes on nodes */
+  treeCheckable?: boolean;
+
+  /** Parent/child checkboxes independent; enables labelInValue */
+  treeCheckStrictly?: boolean;
+
+  /** Tree data (array of nodes); each value should be unique */
+  treeData?: OptionType[];
+
+  /** Use flat data with id/pId; optional config for custom id/pId keys */
+  treeDataSimpleMode?: boolean | SimpleModeConfig;
+
+  /** Custom render for node title */
+  treeTitleRender?: (nodeData: OptionType) => React.ReactNode;
+
+  /** Expand all nodes initially */
+  treeDefaultExpandAll?: boolean;
+
+  /** Initially expanded node keys */
+  treeDefaultExpandedKeys?: SafeKey[];
+
+  /** Expand on click, double-click, or disable */
+  treeExpandAction?: TreeExpandAction;
+
+  /** Controlled expanded keys */
+  treeExpandedKeys?: SafeKey[];
+
+  /** Icon before node title */
+  treeIcon?: TreeIconType;
+
+  /** Loaded node keys (with loadData); controlled */
+  treeLoadedKeys?: SafeKey[];
+
+  /** Show connection lines between nodes */
+  treeLine?: TreeShowLine;
+
+  /** Data property to use as node label in select */
+  treeNodeLabelProp?: string;
+
+  /** Controlled selected value(s) */
+  value?: ValueType;
+
+  /** Variant of the tree select */
+  variant?: Variant;
+
+  /** Use virtual scroll in dropdown */
+  virtual?: boolean;
+
+  /** Called when selection or input value changes */
+  onChange?: (
+    value: ValueType,
+    labelList: React.ReactNode[],
+    extra: ChangeEventExtra
+  ) => void;
+
+  /** Called when a node is selected */
+  onSelect?: (
+    value: ValueType,
+    node: OptionType,
+    extra: ChangeEventExtra
+  ) => void;
+
+  /** Called when expanded keys change */
+  onTreeExpand?: (expandedKeys: SafeKey[]) => void;
+
+  /** Called when the popup scrolls */
+  onPopupScroll?: React.UIEventHandler<HTMLDivElement>;
+
+  /** Clear search when selection changes (when showSearch is true) */
+  autoClearSearchValue?: boolean;
+
+  /** Filter tree by search; boolean or custom filter function */
+  filterTreeNode?:
+    | boolean
+    | ((inputValue: string, treeNode: OptionType) => boolean);
+
+  /** Controlled search value */
+  searchValue?: string;
+
+  /** Data property used for search filtering */
+  treeNodeFilterProp?: string;
+
+  /** Called when search input changes */
+  onSearch?: (value: string) => void;
+
+  /** CSS class name */
+  className?: string;
+
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+
+  /** Tooltip text (title attribute) for the trigger element */
+  title?: string;
+  /** Text direction for the input and dropdown */
+  direction?: 'ltr' | 'rtl';
+  /** Maximum number of characters allowed in the input */
+  maxLength?: number;
+  /** Tab order index of the trigger element */
+  tabIndex?: number;
+  /** Auto focus the input on mount */
+  autoFocus?: boolean;
+  /** Called after the clear icon clears the current value */
+  onClear?: () => void;
+  /** Show loading state and spinner */
+  loading?: boolean;
+  /** Inline style object applied to the dropdown menu */
+  dropdownStyle?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+  /** Additional CSS class name for the dropdown menu */
+  dropdownClassName?: string;
+  /** Match dropdown width to select; number sets explicit pixel width */
+  dropdownMatchSelectWidth?: boolean | number;
+  /** Custom render function for the dropdown; lets you wrap or extend the default menu */
+  dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
+  /** Called when the trigger loses focus */
+  onBlur?: React.FocusEventHandler<HTMLElement>;
+  /** Called when the trigger receives focus */
+  onFocus?: React.FocusEventHandler<HTMLElement>;
+  /** Keyboard keyup event handler on the trigger wrapper */
+  onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
+  /** Keyboard keydown event handler on the trigger wrapper */
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  /** Mousedown event handler on the trigger wrapper */
+  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  /** Keyboard keydown handler for the internal input element */
+  onInputKeyDown?: React.KeyboardEventHandler<
+    HTMLInputElement | HTMLTextAreaElement
+  >;
+  /** Mouse enter event handler on the trigger wrapper */
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  /** Mouse leave event handler on the trigger wrapper */
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  /** Click event handler on the trigger wrapper */
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  /** HTML id attribute for the trigger element */
+  id?: string;
+  /** Option nodes rendered as children instead of using treeData */
+  children?: React.ReactNode;
+  /** Controlled input text value (typically used with search) */
+  inputValue?: string;
+  /** Called when a value is deselected (mainly in multiple mode) */
+  onDeselect?: (value: ValueType, option: OptionType) => void;
+  /** Virtual list item height in pixels */
+  listItemHeight?: number;
+  /** Virtual list scroll offset per item for performance tuning */
+  listItemScrollOffset?: number;
+  /** Whether to render switcher/leaf icons next to each tree node */
+  showTreeIcon?: boolean;
+  prefixCls?: string;
+  /** Additional CSS class name for the popup container */
+  popupClassName?: string;
+  /** Called when dropdown visibility changes */
+  onDropdownVisibleChange?: (visible: boolean) => void;
+  /** Called when the controlled open state of the dropdown changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Whether to show the input border */
+  bordered?: boolean;
+  /** Additional CSS class name for the outermost wrapper */
+  rootClassName?: string;
+  /** Whether to show the dropdown arrow icon */
+  showArrow?: boolean;
+}

package/dist/esm/index.d.ts

@@ -1,5 +1,5 @@
-import type { TreeSelectProps as AntTreeSelectProps } from 'antd';
 import * as React from 'react';
-export type TreeSelectProps = AntTreeSelectProps;
-export declare const TreeSelect: ({ ...restTreeSelectProps }: TreeSelectProps) => React.JSX.Element;
+import type { TreeSelectDataNode, TreeSelectProps } from './types';
+export declare const TreeSelect: <ValueType = unknown, OptionType extends TreeSelectDataNode = TreeSelectDataNode>(props: TreeSelectProps<ValueType, OptionType>) => React.JSX.Element;
+export type { TreeSelectDataNode, TreeSelectProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAEjD,eAAO,MAAM,UAAU,GAAI,4BAA4B,eAAe,sBAErE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAInE,eAAO,MAAM,UAAU,GACrB,SAAS,GAAG,OAAO,EACnB,UAAU,SAAS,kBAAkB,GAAG,kBAAkB,EAE1D,OAAO,eAAe,CAAC,SAAS,EAAE,UAAU,CAAC,sBA8I9C,CAAC;AAEF,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,CAAC"}

package/dist/esm/index.js

@@ -1,17 +1,113 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { TreeSelect as AntTreeSelect } from 'antd';
+import { Icon } from '@akinon/icons';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, TreeSelect as AntTreeSelect } from 'antd';
+import classNames from 'classnames';
 import * as React from 'react';
-export const TreeSelect = (_a) => {
-    var restTreeSelectProps = __rest(_a, []);
-    return React.createElement(AntTreeSelect, Object.assign({}, restTreeSelectProps));
+const TREE_LINE = { showLeafIcon: false };
+export const TreeSelect = (props) => {
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const treeSelectToken = token.TreeSelect;
+    const treeSelectPrefixCls = `${getPrefixCls()}-tree-select`;
+    const selectTreePrefixCls = `${getPrefixCls()}-select-tree`;
+    const dropdownPrefixCls = `${treeSelectPrefixCls}-dropdown`;
+    const dropdownPrefixClsWithHash = `:where(.${hashId}).${dropdownPrefixCls}`;
+    const switcherIconCls = `${treeSelectPrefixCls}-switcher-icon`;
+    const switcherIconExpandedCls = `${switcherIconCls}-expanded`;
+    const switcherIconCollapsedCls = `${switcherIconCls}-collapsed`;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['TreeSelect'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        return {
+            [dropdownPrefixClsWithHash]: {
+                [`.${selectTreePrefixCls}-title`]: {
+                    color: treeSelectToken.optionTitleColor
+                },
+                [`.${selectTreePrefixCls}-node-selected`]: {
+                    [`.${selectTreePrefixCls}-title`]: {
+                        color: treeSelectToken.optionActiveColor,
+                        fontWeight: treeSelectToken.optionActiveFontWeight
+                    }
+                },
+                [`.${selectTreePrefixCls}`]: {
+                    [`.${selectTreePrefixCls}-switcher`]: {
+                        color: treeSelectToken.optionSwitcherColor,
+                        [`&.${selectTreePrefixCls}-switcher_close`]: {
+                            height: treeSelectToken.titleHeight
+                        },
+                        [`&.${selectTreePrefixCls}-switcher_open`]: {
+                            height: treeSelectToken.titleHeight
+                        }
+                    },
+                    [`.${selectTreePrefixCls}-treenode-active`]: {
+                        [`.${selectTreePrefixCls}-node-content-wrapper`]: {
+                            backgroundColor: treeSelectToken.nodeContentWrapperActiveHoverBg
+                        }
+                    },
+                    [`.${selectTreePrefixCls}-treenode`]: {
+                        marginBottom: `${treeSelectToken.treeNodeMarginBottom} !important`,
+                        '&::before': {
+                            display: treeSelectToken.treeNodeBeforeDisplay
+                        }
+                    }
+                },
+                [`.${treeSelectPrefixCls}-switcher-icon-wrapper`]: {
+                    border: treeSelectToken.switcherIconWrapperBorder,
+                    borderRadius: treeSelectToken.optionSwitcherBorderRadius,
+                    height: treeSelectToken.switcherIconWrapperSize,
+                    width: treeSelectToken.switcherIconWrapperSize,
+                    marginTop: treeSelectToken.switcherIconWrapperMarginTop,
+                    backgroundColor: treeSelectToken.switcherIconWrapperBg
+                },
+                [`.${switcherIconCls}`]: {
+                    marginLeft: treeSelectToken.switcherIconMarginLeft,
+                    marginBottom: treeSelectToken.switcherIconMarginBottom
+                },
+                [`.${switcherIconExpandedCls}`]: {
+                    transform: treeSelectToken.switcherIconExpandedTransform
+                },
+                [`.${switcherIconCollapsedCls}`]: {
+                    transform: treeSelectToken.switcherIconCollapsedTransform
+                },
+                [`.${selectTreePrefixCls}-indent-unit::before`]: {
+                    borderInlineEnd: `${treeSelectToken.nodeBeforeLineBorder} !important`,
+                    insetInlineEnd: `${treeSelectToken.indentLineInsetEnd} !important`
+                },
+                [`.${selectTreePrefixCls}-indent-unit.${selectTreePrefixCls}-indent-unit-end::before`]: {
+                    display: 'block !important',
+                    borderInlineEnd: `${treeSelectToken.nodeBeforeLineBorder} !important`,
+                    insetInlineEnd: `${treeSelectToken.indentLineInsetEnd} !important`
+                },
+                [`.${selectTreePrefixCls}-switcher-leaf-line`]: {
+                    '&::before': {
+                        borderInlineEnd: `${treeSelectToken.nodeBeforeLineBorder} !important`,
+                        insetInlineStart: `${treeSelectToken.leafLineInsetStart} !important`
+                    },
+                    '&::after': {
+                        borderBottom: `${treeSelectToken.nodeBeforeLineBorder} !important`
+                    }
+                },
+                [`.${selectTreePrefixCls}-treenode`]: {
+                    '&:hover': {
+                        backgroundColor: treeSelectToken.nodeContentWrapperActiveBg
+                    },
+                    [`&.${selectTreePrefixCls}-treenode-selected`]: {
+                        backgroundColor: treeSelectToken.nodeContentWrapperActiveBg
+                    }
+                },
+                [`.${selectTreePrefixCls}-node-content-wrapper, .${selectTreePrefixCls}-node-content-wrapper-normal`]: {
+                    marginInlineStart: treeSelectToken.nodeContentWrapperMarginInlineStart
+                }
+            }
+        };
+    });
+    const renderSwitcherIcon = (nodeProps) => (React.createElement("span", { className: `${treeSelectPrefixCls}-switcher-icon-wrapper` },
+        React.createElement(Icon, { icon: "triangle", size: 8, className: classNames(switcherIconCls, nodeProps.expanded
+                ? switcherIconExpandedCls
+                : switcherIconCollapsedCls) })));
+    return useStyle(React.createElement(AntTreeSelect, Object.assign({ size: "large", popupMatchSelectWidth: true }, props, { treeLine: TREE_LINE, switcherIcon: renderSwitcherIcon })));
 };

package/dist/esm/types.d.ts

@@ -0,0 +1,424 @@
+import type { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import type * as React from 'react';
+
+type Key = string | number;
+
+type SafeKey = string | number;
+
+export interface TreeSelectDataNode extends Record<string, unknown> {
+  /** Unique key for the node */
+  key?: Key;
+  /** Value used for selection and filtering */
+  value?: SafeKey;
+  /** Node label */
+  title?: React.ReactNode;
+  children?: TreeSelectDataNode[];
+  /** Disable this node */
+  disabled?: boolean;
+  /** Whether the node can be selected */
+  selectable?: boolean;
+  /** Show checkbox for this node when tree is checkable */
+  checkable?: boolean;
+  /** Disable checkbox for this node */
+  disableCheckbox?: boolean;
+  /** Treat as leaf (no children) */
+  isLeaf?: boolean;
+}
+
+interface TreeNodeProps {
+  checkable?: boolean;
+  disableCheckbox?: boolean;
+  disabled?: boolean;
+  isLeaf?: boolean;
+  key?: Key;
+  selectable?: boolean;
+  title?: React.ReactNode;
+  value?: SafeKey;
+}
+
+interface FieldNames {
+  /** Field name for value */
+  value?: string;
+  /** Field name for label */
+  label?: string;
+  /** Field name for children */
+  children?: string;
+  _title?: string[];
+}
+
+interface SimpleModeConfig {
+  id?: SafeKey;
+  pId?: SafeKey;
+  rootPId?: SafeKey;
+}
+
+interface LabeledValueType {
+  key?: Key;
+  value?: SafeKey;
+  label?: React.ReactNode;
+  /** Option is partially checked (e.g. parent with some children selected) */
+  halfChecked?: boolean;
+}
+
+interface ChangeEventExtra {
+  preValue: LabeledValueType[];
+  triggerValue: SafeKey;
+  selected?: boolean;
+  checked?: boolean;
+  triggerNode: React.ReactElement;
+  allCheckedNodes: unknown[];
+}
+
+interface LegacyDataNode extends TreeSelectDataNode {
+  props: unknown;
+}
+
+type CheckedStrategy = 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD';
+
+type TreeExpandAction = false | 'click' | 'doubleclick';
+
+type SizeType = 'small' | 'middle' | 'large' | undefined;
+
+type SelectCommonPlacement =
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'topLeft'
+  | 'topRight';
+
+type InputStatus = 'warning' | 'error' | '';
+
+type Variant = 'outlined' | 'borderless' | 'filled' | 'underlined';
+
+type TreeShowLine = boolean | { showLeafIcon?: boolean | React.ReactNode };
+
+interface TreeNodePropsForSwitcher {
+  expanded?: boolean;
+  isLeaf?: boolean;
+  [key: string]: unknown;
+}
+
+type SwitcherIcon =
+  | React.ReactNode
+  | ((props: TreeNodePropsForSwitcher) => React.ReactNode);
+
+type TreeIconType =
+  | React.ReactNode
+  | ((props: TreeNodePropsForSwitcher) => React.ReactNode);
+
+type SemanticDOM = 'root';
+
+type PopupSemanticDOM = 'root';
+
+interface ClassNamesStylesInfo<
+  V = unknown,
+  O extends TreeSelectDataNode = TreeSelectDataNode
+> {
+  props: TreeSelectProps<V, O>;
+}
+
+type SemanticName = 'root';
+type PopupSemantic = 'root';
+
+interface ShowSearchObject {
+  /** Clear search when selection changes (multiple mode) */
+  autoClearSearchValue?: boolean;
+  /** Filter nodes by search; use treeNodeFilterProp field or custom function */
+  filterTreeNode?:
+    | boolean
+    | ((inputValue: string, treeNode: TreeSelectDataNode) => boolean);
+  /** Controlled search value; use with onSearch */
+  searchValue?: string;
+  /** Property name used for filtering */
+  treeNodeFilterProp?: string;
+  /** Called when search input changes */
+  onSearch?: (value: string) => void;
+}
+
+interface LabeledValue {
+  key?: string;
+  value: string | number;
+  label: React.ReactNode;
+}
+
+type SelectValue =
+  | (string | number)
+  | (string | number)[]
+  | LabeledValue
+  | LabeledValue[];
+
+interface TagRenderProps {
+  label: React.ReactNode;
+  value: SafeKey | LabeledValueType;
+  disabled?: boolean;
+  onClose: () => void;
+  closable: boolean;
+}
+
+interface TreeSelectRef {
+  blur: () => void;
+  focus: () => void;
+}
+
+export interface TreeSelectProps<
+  ValueType = unknown,
+  OptionType extends TreeSelectDataNode = TreeSelectDataNode
+> extends React.AriaAttributes {
+  /** Whether to show a clear button to remove the selection. */
+  allowClear?: boolean | { clearIcon?: React.ReactNode };
+
+  /** CSS class names for component parts (object or function) */
+  classNames?:
+    | (Partial<Record<SemanticName, string>> & {
+        popup?: Partial<Record<PopupSemantic, string>>;
+      })
+    | ((
+        info: ClassNamesStylesInfo<ValueType, OptionType>
+      ) => Partial<Record<SemanticDOM, string>>);
+
+  /** Dropdown open by default */
+  defaultOpen?: boolean;
+
+  /** Initial selected value(s) */
+  defaultValue?: ValueType;
+
+  /** Whether the tree select is disabled */
+  disabled?: boolean;
+
+  /** Match dropdown width to input; false disables virtual scroll */
+  popupMatchSelectWidth?: boolean | number;
+
+  /** Customize dropdown content wrapper */
+  popupRender?: (
+    originNode: React.ReactNode,
+    props: { menu: React.ReactNode }
+  ) => React.ReactNode;
+
+  /** Map data fields to label, value, children */
+  fieldNames?: FieldNames;
+
+  /** Container element for dropdown */
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+
+  /** Value shape: { value, label, halfChecked } instead of raw value */
+  labelInValue?: boolean;
+
+  /** Dropdown list height (px) */
+  listHeight?: number;
+
+  /** Load children asynchronously for a node */
+  loadData?: (node: LegacyDataNode) => Promise<unknown>;
+
+  /** Max number of tags shown in multiple mode; 'responsive' adapts to width */
+  maxTagCount?: number | 'responsive';
+
+  /** Max selected items when multiple (and not using parent-only strategy) */
+  maxCount?: number;
+
+  /** Placeholder when tags are collapsed (e.g. "+ N more") */
+  maxTagPlaceholder?:
+    | React.ReactNode
+    | ((omittedValues: unknown[]) => React.ReactNode);
+
+  /** Max length of tag text before truncation */
+  maxTagTextLength?: number;
+
+  /** Allow multiple selection */
+  multiple?: boolean;
+
+  /** Content when no options match */
+  notFoundContent?: React.ReactNode;
+
+  /** Controlled dropdown open state */
+  open?: boolean;
+
+  /** Placeholder for the input */
+  placeholder?: React.ReactNode;
+
+  /** Dropdown position */
+  placement?: SelectCommonPlacement;
+
+  /** Prefix content */
+  prefix?: React.ReactNode;
+
+  /** Which checked nodes to show in multiple: all, parent only, or child only */
+  showCheckedStrategy?: CheckedStrategy;
+
+  /** Enable search; use object for options (filter, onSearch, etc.) */
+  showSearch?: boolean | ShowSearchObject;
+
+  size?: SizeType;
+
+  /** Validation state */
+  status?: InputStatus;
+
+  /** Suffix content */
+  suffixIcon?: React.ReactNode;
+
+  /** Custom expand/collapse icon */
+  switcherIcon?: SwitcherIcon;
+
+  styles?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+
+  /** Custom tag render in multiple mode */
+  tagRender?: (props: TagRenderProps) => React.ReactNode;
+
+  /** Show checkboxes on nodes */
+  treeCheckable?: boolean;
+
+  /** Parent/child checkboxes independent; enables labelInValue */
+  treeCheckStrictly?: boolean;
+
+  /** Tree data (array of nodes); each value should be unique */
+  treeData?: OptionType[];
+
+  /** Use flat data with id/pId; optional config for custom id/pId keys */
+  treeDataSimpleMode?: boolean | SimpleModeConfig;
+
+  /** Custom render for node title */
+  treeTitleRender?: (nodeData: OptionType) => React.ReactNode;
+
+  /** Expand all nodes initially */
+  treeDefaultExpandAll?: boolean;
+
+  /** Initially expanded node keys */
+  treeDefaultExpandedKeys?: SafeKey[];
+
+  /** Expand on click, double-click, or disable */
+  treeExpandAction?: TreeExpandAction;
+
+  /** Controlled expanded keys */
+  treeExpandedKeys?: SafeKey[];
+
+  /** Icon before node title */
+  treeIcon?: TreeIconType;
+
+  /** Loaded node keys (with loadData); controlled */
+  treeLoadedKeys?: SafeKey[];
+
+  /** Show connection lines between nodes */
+  treeLine?: TreeShowLine;
+
+  /** Data property to use as node label in select */
+  treeNodeLabelProp?: string;
+
+  /** Controlled selected value(s) */
+  value?: ValueType;
+
+  /** Variant of the tree select */
+  variant?: Variant;
+
+  /** Use virtual scroll in dropdown */
+  virtual?: boolean;
+
+  /** Called when selection or input value changes */
+  onChange?: (
+    value: ValueType,
+    labelList: React.ReactNode[],
+    extra: ChangeEventExtra
+  ) => void;
+
+  /** Called when a node is selected */
+  onSelect?: (
+    value: ValueType,
+    node: OptionType,
+    extra: ChangeEventExtra
+  ) => void;
+
+  /** Called when expanded keys change */
+  onTreeExpand?: (expandedKeys: SafeKey[]) => void;
+
+  /** Called when the popup scrolls */
+  onPopupScroll?: React.UIEventHandler<HTMLDivElement>;
+
+  /** Clear search when selection changes (when showSearch is true) */
+  autoClearSearchValue?: boolean;
+
+  /** Filter tree by search; boolean or custom filter function */
+  filterTreeNode?:
+    | boolean
+    | ((inputValue: string, treeNode: OptionType) => boolean);
+
+  /** Controlled search value */
+  searchValue?: string;
+
+  /** Data property used for search filtering */
+  treeNodeFilterProp?: string;
+
+  /** Called when search input changes */
+  onSearch?: (value: string) => void;
+
+  /** CSS class name */
+  className?: string;
+
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+
+  /** Tooltip text (title attribute) for the trigger element */
+  title?: string;
+  /** Text direction for the input and dropdown */
+  direction?: 'ltr' | 'rtl';
+  /** Maximum number of characters allowed in the input */
+  maxLength?: number;
+  /** Tab order index of the trigger element */
+  tabIndex?: number;
+  /** Auto focus the input on mount */
+  autoFocus?: boolean;
+  /** Called after the clear icon clears the current value */
+  onClear?: () => void;
+  /** Show loading state and spinner */
+  loading?: boolean;
+  /** Inline style object applied to the dropdown menu */
+  dropdownStyle?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+  /** Additional CSS class name for the dropdown menu */
+  dropdownClassName?: string;
+  /** Match dropdown width to select; number sets explicit pixel width */
+  dropdownMatchSelectWidth?: boolean | number;
+  /** Custom render function for the dropdown; lets you wrap or extend the default menu */
+  dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
+  /** Called when the trigger loses focus */
+  onBlur?: React.FocusEventHandler<HTMLElement>;
+  /** Called when the trigger receives focus */
+  onFocus?: React.FocusEventHandler<HTMLElement>;
+  /** Keyboard keyup event handler on the trigger wrapper */
+  onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
+  /** Keyboard keydown event handler on the trigger wrapper */
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  /** Mousedown event handler on the trigger wrapper */
+  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  /** Keyboard keydown handler for the internal input element */
+  onInputKeyDown?: React.KeyboardEventHandler<
+    HTMLInputElement | HTMLTextAreaElement
+  >;
+  /** Mouse enter event handler on the trigger wrapper */
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  /** Mouse leave event handler on the trigger wrapper */
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  /** Click event handler on the trigger wrapper */
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  /** HTML id attribute for the trigger element */
+  id?: string;
+  /** Option nodes rendered as children instead of using treeData */
+  children?: React.ReactNode;
+  /** Controlled input text value (typically used with search) */
+  inputValue?: string;
+  /** Called when a value is deselected (mainly in multiple mode) */
+  onDeselect?: (value: ValueType, option: OptionType) => void;
+  /** Virtual list item height in pixels */
+  listItemHeight?: number;
+  /** Virtual list scroll offset per item for performance tuning */
+  listItemScrollOffset?: number;
+  /** Whether to render switcher/leaf icons next to each tree node */
+  showTreeIcon?: boolean;
+  prefixCls?: string;
+  /** Additional CSS class name for the popup container */
+  popupClassName?: string;
+  /** Called when dropdown visibility changes */
+  onDropdownVisibleChange?: (visible: boolean) => void;
+  /** Called when the controlled open state of the dropdown changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Whether to show the input border */
+  bordered?: boolean;
+  /** Additional CSS class name for the outermost wrapper */
+  rootClassName?: string;
+  /** Whether to show the dropdown arrow icon */
+  showArrow?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-tree-select",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,14 +9,18 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "^5.27.0"
+    "@ant-design/cssinjs": "^1.24.0",
+    "antd": "^5.27.0",
+    "classnames": "^2.5.1",
+    "@akinon/icons": "1.2.5",
+    "@akinon/ui-theme": "1.2.5"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "*",
-    "@akinon/typescript-config": "1.1.3"
+    "@akinon/typescript-config": "1.1.5"
   },
   "peerDependencies": {
     "react": "^18 || ^19",