@akinon/ui-select 0.5.0 → 1.0.0

package/dist/cjs/index.d.ts

@@ -1,5 +1,16 @@
 import * as React from 'react';
 import type { SelectProps } from './types';
+/**
+ * Select component for Akinon UI.
+ *
+ * This component provides a versatile dropdown input for selecting options.
+ * It supports single or multiple selection modes, search functionality,
+ * custom rendering for options and labels, and advanced accessibility features.
+ *
+ * The Select component adheres to the Akinon design system, ensuring consistent
+ * styling and behavior. It is highly customizable and suitable for use in forms,
+ * filters, and other selection scenarios.
+ */
 export declare const Select: ({ ...restSelectProps }: SelectProps) => React.JSX.Element;
 export type * from './types';
 //# 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":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,MAAM,2BAA4B,WAAW,sBAEzD,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,MAAM,2BAA4B,WAAW,sBA0DzD,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -12,10 +12,61 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
+/**
+ * Select component for Akinon UI.
+ *
+ * This component provides a versatile dropdown input for selecting options.
+ * It supports single or multiple selection modes, search functionality,
+ * custom rendering for options and labels, and advanced accessibility features.
+ *
+ * The Select component adheres to the Akinon design system, ensuring consistent
+ * styling and behavior. It is highly customizable and suitable for use in forms,
+ * filters, and other selection scenarios.
+ */
 const Select = (_a) => {
     var restSelectProps = __rest(_a, []);
-    return React.createElement(antd_1.Select, Object.assign({ size: "large" }, restSelectProps));
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const selectToken = token.Select;
+    const selectPrefixCls = `${getPrefixCls()}-select`;
+    const dropdownPrefixCls = `${selectPrefixCls}-dropdown`;
+    const dropdownPrefixClsWithHash = `:where(.${hashId}).${dropdownPrefixCls}`;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Select'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        return {
+            [`${dropdownPrefixClsWithHash}`]: {
+                '&.akinon-select-dropdown': {
+                    [`.${selectPrefixCls}-item`]: {
+                        boxShadow: `inset 0 -1px 0 0 ${selectToken.selectItemBorderShadowColor}, inset 0 1px 0 0 ${selectToken.selectItemBorderShadowColor}`,
+                        '&:nth-child(even)': {
+                            backgroundColor: selectToken.selectItemBgColor,
+                            [`&.${selectPrefixCls}-item-option-selected`]: {
+                                backgroundColor: selectToken === null || selectToken === void 0 ? void 0 : selectToken.optionActiveBg
+                            },
+                            '&:hover': {
+                                backgroundColor: selectToken.selectItemHoverBgColor
+                            }
+                        }
+                    },
+                    [`.${selectPrefixCls}-item-option-selected`]: {
+                        backgroundColor: selectToken === null || selectToken === void 0 ? void 0 : selectToken.optionActiveBg,
+                        color: selectToken.selectedOptionColor,
+                        '&:hover': {
+                            backgroundColor: selectToken === null || selectToken === void 0 ? void 0 : selectToken.optionActiveBg
+                        }
+                    }
+                }
+            }
+        };
+    });
+    return useStyle(React.createElement(antd_1.Select, Object.assign({ size: "large", popupMatchSelectWidth: true }, restSelectProps)));
 };
 exports.Select = Select;

package/dist/cjs/types.d.ts

@@ -1,67 +1,253 @@
+/**
+ * Base option type for Select components.
+ */
 export interface BaseOptionType {
+  /**
+   * Whether the option is disabled.
+   */
   disabled?: boolean;
+
+  /**
+   * Additional CSS class for the option.
+   */
   className?: string;
+
+  /**
+   * Descriptive title for the option.
+   */
   title?: string;
+
+  /**
+   * Additional custom properties for the option.
+   */
   [name: string]: unknown;
 }
 
+/**
+ * Default option type with additional attributes.
+ */
 export interface DefaultOptionType extends BaseOptionType {
+  /**
+   * The label displayed for the option.
+   */
   label?: React.ReactNode;
+
+  /**
+   * The value associated with the option.
+   */
   value?: string | number | null;
+
+  /**
+   * Nested child options for hierarchical structures.
+   */
   children?: Omit<DefaultOptionType, 'children'>[];
 }
 
+/**
+ * Generic handler type for select events.
+ * @param value - The selected value.
+ * @param option - The corresponding option.
+ */
 export type SelectHandler<ValueType, OptionType> = (
   value: ValueType,
   option: OptionType
 ) => void;
 
+/**
+ * Extracts the element type from an array type.
+ */
 export type ArrayElementType<T> = T extends (infer E)[] ? E : T;
 
+/**
+ * Props for the Select component.
+ */
 export interface SelectProps<
   ValueType = string | number | boolean,
   OptionType extends BaseOptionType = DefaultOptionType
 > extends BaseSelectPropsWithoutPrivate {
+  /**
+   * Placeholder text displayed when no value is selected.
+   */
   placeholder?: string;
+
+  /**
+   * Whether to show a clear button to remove the selection.
+   */
   allowClear?: boolean;
-  prefixCls?: string;
+
+  /**
+   * Unique identifier for the select component.
+   */
   id?: string;
+
+  /**
+   * Custom field names for options.
+   */
   fieldNames?: FieldNames;
+
+  /**
+   * Current search value for the options.
+   */
   searchValue?: string;
+
+  /**
+   * Callback triggered when the search value changes.
+   * @param value - The current search value.
+   */
   onSearch?: (value: string) => void;
+
+  /**
+   * Whether to clear the search value after selection.
+   */
   autoClearSearchValue?: boolean;
+
+  /**
+   * Whether the popup width matches the select width.
+   */
+  popupMatchSelectWidth?: boolean | number;
+
+  /**
+   * Callback triggered when an option is selected.
+   */
   onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+
+  /**
+   * Callback triggered when an option is deselected.
+   */
   onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+
+  /**
+   * Custom filter function for options.
+   */
   filterOption?: boolean | FilterFunc<OptionType>;
+
+  /**
+   * Custom sorting function for options.
+   */
   filterSort?: (optionA: OptionType, optionB: OptionType) => number;
+
+  /**
+   * The property used for option filtering.
+   */
   optionFilterProp?: string;
+
+  /**
+   * The property used for option labeling.
+   */
   optionLabelProp?: string;
+
+  /**
+   * Size of the select input.
+   */
   size?: 'small' | 'middle' | 'large';
+
+  /**
+   * Whether the select is in a loading state.
+   */
+  loading?: boolean;
+
+  /**
+   * List of options for the select component.
+   */
   options?: OptionType[];
+
+  /**
+   * Custom render function for options.
+   */
   optionRender?: (
     oriOption: FlattenOptionData<BaseOptionType>,
     info: {
       index: number;
     }
   ) => React.ReactNode;
+
+  /**
+   * Whether to make the first option active by default.
+   */
   defaultActiveFirstOption?: boolean;
+
+  /**
+   * Whether to enable virtual scrolling for options.
+   */
   virtual?: boolean;
+
+  /**
+   * Text direction of the select component.
+   */
   direction?: 'ltr' | 'rtl';
+
+  /**
+   * Height of the options list.
+   */
   listHeight?: number;
+
+  /**
+   * Height of individual list items.
+   */
   listItemHeight?: number;
+
+  /**
+   * Custom render function for the selected label.
+   */
   labelRender?: (props: LabelInValueType) => React.ReactNode;
+
+  /**
+   * Custom icon for selected menu items.
+   */
   menuItemSelectedIcon?: RenderNode;
+
+  /**
+   * The mode of the select component (e.g., combobox, multiple, or tags).
+   */
   mode?: 'combobox' | 'multiple' | 'tags';
+
+  /**
+   * Whether the value includes label information.
+   */
   labelInValue?: boolean;
+
+  /**
+   * The current value of the select component.
+   */
   value?: ValueType | null;
+
+  /**
+   * The default value of the select component.
+   */
   defaultValue?: ValueType | null;
+
+  /**
+   * Maximum number of selected items.
+   */
   maxCount?: number;
+
+  /**
+   * Callback triggered when the value changes.
+   */
   onChange?: (value: ValueType, option?: OptionType | OptionType[]) => void;
+
+  /**
+   * Additional CSS class for the root element.
+   */
   rootClassName?: string;
+
+  /**
+   * Icon displayed as the suffix for the select input.
+   */
   suffixIcon?: React.ReactNode;
+
+  /**
+   * Whether the select is disabled.
+   */
   disabled?: boolean;
+
+  /**
+   * Whether to show the dropdown arrow.
+   */
   showArrow?: boolean;
+
   /**
+   * Style variant of the select component.
    * @default "outlined"
    */
   variant?: 'outlined' | 'borderless' | 'filled';

package/dist/esm/index.d.ts

@@ -1,5 +1,16 @@
 import * as React from 'react';
 import type { SelectProps } from './types';
+/**
+ * Select component for Akinon UI.
+ *
+ * This component provides a versatile dropdown input for selecting options.
+ * It supports single or multiple selection modes, search functionality,
+ * custom rendering for options and labels, and advanced accessibility features.
+ *
+ * The Select component adheres to the Akinon design system, ensuring consistent
+ * styling and behavior. It is highly customizable and suitable for use in forms,
+ * filters, and other selection scenarios.
+ */
 export declare const Select: ({ ...restSelectProps }: SelectProps) => React.JSX.Element;
 export type * from './types';
 //# 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":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,MAAM,2BAA4B,WAAW,sBAEzD,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,MAAM,2BAA4B,WAAW,sBA0DzD,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/esm/index.js

@@ -9,9 +9,60 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Select as AntSelect } from 'antd';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Select as AntSelect } from 'antd';
 import * as React from 'react';
+/**
+ * Select component for Akinon UI.
+ *
+ * This component provides a versatile dropdown input for selecting options.
+ * It supports single or multiple selection modes, search functionality,
+ * custom rendering for options and labels, and advanced accessibility features.
+ *
+ * The Select component adheres to the Akinon design system, ensuring consistent
+ * styling and behavior. It is highly customizable and suitable for use in forms,
+ * filters, and other selection scenarios.
+ */
 export const Select = (_a) => {
     var restSelectProps = __rest(_a, []);
-    return React.createElement(AntSelect, Object.assign({ size: "large" }, restSelectProps));
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const selectToken = token.Select;
+    const selectPrefixCls = `${getPrefixCls()}-select`;
+    const dropdownPrefixCls = `${selectPrefixCls}-dropdown`;
+    const dropdownPrefixClsWithHash = `:where(.${hashId}).${dropdownPrefixCls}`;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Select'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        return {
+            [`${dropdownPrefixClsWithHash}`]: {
+                '&.akinon-select-dropdown': {
+                    [`.${selectPrefixCls}-item`]: {
+                        boxShadow: `inset 0 -1px 0 0 ${selectToken.selectItemBorderShadowColor}, inset 0 1px 0 0 ${selectToken.selectItemBorderShadowColor}`,
+                        '&:nth-child(even)': {
+                            backgroundColor: selectToken.selectItemBgColor,
+                            [`&.${selectPrefixCls}-item-option-selected`]: {
+                                backgroundColor: selectToken === null || selectToken === void 0 ? void 0 : selectToken.optionActiveBg
+                            },
+                            '&:hover': {
+                                backgroundColor: selectToken.selectItemHoverBgColor
+                            }
+                        }
+                    },
+                    [`.${selectPrefixCls}-item-option-selected`]: {
+                        backgroundColor: selectToken === null || selectToken === void 0 ? void 0 : selectToken.optionActiveBg,
+                        color: selectToken.selectedOptionColor,
+                        '&:hover': {
+                            backgroundColor: selectToken === null || selectToken === void 0 ? void 0 : selectToken.optionActiveBg
+                        }
+                    }
+                }
+            }
+        };
+    });
+    return useStyle(React.createElement(AntSelect, Object.assign({ size: "large", popupMatchSelectWidth: true }, restSelectProps)));
 };

package/dist/esm/types.d.ts

@@ -1,67 +1,253 @@
+/**
+ * Base option type for Select components.
+ */
 export interface BaseOptionType {
+  /**
+   * Whether the option is disabled.
+   */
   disabled?: boolean;
+
+  /**
+   * Additional CSS class for the option.
+   */
   className?: string;
+
+  /**
+   * Descriptive title for the option.
+   */
   title?: string;
+
+  /**
+   * Additional custom properties for the option.
+   */
   [name: string]: unknown;
 }
 
+/**
+ * Default option type with additional attributes.
+ */
 export interface DefaultOptionType extends BaseOptionType {
+  /**
+   * The label displayed for the option.
+   */
   label?: React.ReactNode;
+
+  /**
+   * The value associated with the option.
+   */
   value?: string | number | null;
+
+  /**
+   * Nested child options for hierarchical structures.
+   */
   children?: Omit<DefaultOptionType, 'children'>[];
 }
 
+/**
+ * Generic handler type for select events.
+ * @param value - The selected value.
+ * @param option - The corresponding option.
+ */
 export type SelectHandler<ValueType, OptionType> = (
   value: ValueType,
   option: OptionType
 ) => void;
 
+/**
+ * Extracts the element type from an array type.
+ */
 export type ArrayElementType<T> = T extends (infer E)[] ? E : T;
 
+/**
+ * Props for the Select component.
+ */
 export interface SelectProps<
   ValueType = string | number | boolean,
   OptionType extends BaseOptionType = DefaultOptionType
 > extends BaseSelectPropsWithoutPrivate {
+  /**
+   * Placeholder text displayed when no value is selected.
+   */
   placeholder?: string;
+
+  /**
+   * Whether to show a clear button to remove the selection.
+   */
   allowClear?: boolean;
-  prefixCls?: string;
+
+  /**
+   * Unique identifier for the select component.
+   */
   id?: string;
+
+  /**
+   * Custom field names for options.
+   */
   fieldNames?: FieldNames;
+
+  /**
+   * Current search value for the options.
+   */
   searchValue?: string;
+
+  /**
+   * Callback triggered when the search value changes.
+   * @param value - The current search value.
+   */
   onSearch?: (value: string) => void;
+
+  /**
+   * Whether to clear the search value after selection.
+   */
   autoClearSearchValue?: boolean;
+
+  /**
+   * Whether the popup width matches the select width.
+   */
+  popupMatchSelectWidth?: boolean | number;
+
+  /**
+   * Callback triggered when an option is selected.
+   */
   onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+
+  /**
+   * Callback triggered when an option is deselected.
+   */
   onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+
+  /**
+   * Custom filter function for options.
+   */
   filterOption?: boolean | FilterFunc<OptionType>;
+
+  /**
+   * Custom sorting function for options.
+   */
   filterSort?: (optionA: OptionType, optionB: OptionType) => number;
+
+  /**
+   * The property used for option filtering.
+   */
   optionFilterProp?: string;
+
+  /**
+   * The property used for option labeling.
+   */
   optionLabelProp?: string;
+
+  /**
+   * Size of the select input.
+   */
   size?: 'small' | 'middle' | 'large';
+
+  /**
+   * Whether the select is in a loading state.
+   */
+  loading?: boolean;
+
+  /**
+   * List of options for the select component.
+   */
   options?: OptionType[];
+
+  /**
+   * Custom render function for options.
+   */
   optionRender?: (
     oriOption: FlattenOptionData<BaseOptionType>,
     info: {
       index: number;
     }
   ) => React.ReactNode;
+
+  /**
+   * Whether to make the first option active by default.
+   */
   defaultActiveFirstOption?: boolean;
+
+  /**
+   * Whether to enable virtual scrolling for options.
+   */
   virtual?: boolean;
+
+  /**
+   * Text direction of the select component.
+   */
   direction?: 'ltr' | 'rtl';
+
+  /**
+   * Height of the options list.
+   */
   listHeight?: number;
+
+  /**
+   * Height of individual list items.
+   */
   listItemHeight?: number;
+
+  /**
+   * Custom render function for the selected label.
+   */
   labelRender?: (props: LabelInValueType) => React.ReactNode;
+
+  /**
+   * Custom icon for selected menu items.
+   */
   menuItemSelectedIcon?: RenderNode;
+
+  /**
+   * The mode of the select component (e.g., combobox, multiple, or tags).
+   */
   mode?: 'combobox' | 'multiple' | 'tags';
+
+  /**
+   * Whether the value includes label information.
+   */
   labelInValue?: boolean;
+
+  /**
+   * The current value of the select component.
+   */
   value?: ValueType | null;
+
+  /**
+   * The default value of the select component.
+   */
   defaultValue?: ValueType | null;
+
+  /**
+   * Maximum number of selected items.
+   */
   maxCount?: number;
+
+  /**
+   * Callback triggered when the value changes.
+   */
   onChange?: (value: ValueType, option?: OptionType | OptionType[]) => void;
+
+  /**
+   * Additional CSS class for the root element.
+   */
   rootClassName?: string;
+
+  /**
+   * Icon displayed as the suffix for the select input.
+   */
   suffixIcon?: React.ReactNode;
+
+  /**
+   * Whether the select is disabled.
+   */
   disabled?: boolean;
+
+  /**
+   * Whether to show the dropdown arrow.
+   */
   showArrow?: boolean;
+
   /**
+   * Style variant of the select component.
    * @default "outlined"
    */
   variant?: 'outlined' | 'borderless' | 'filled';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-select",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,14 +9,15 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0"
+    "antd": "5.22.6"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.4.0"
+    "typescript": "*",
+    "@akinon/ui-theme": "1.0.0",
+    "@akinon/typescript-config": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18",