@aloudata/aloudata-design 2.19.5 → 3.0.0-beta.2

package/dist/Row/index.d.ts

@@ -1,3 +1,12 @@
-import { Row, RowProps } from 'antd';
-export type { RowProps };
+import { default as React } from 'react';
+export interface RowProps {
+    gutter?: number | [number, number];
+    align?: 'top' | 'middle' | 'bottom' | 'stretch';
+    justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+    wrap?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+declare function Row(props: RowProps): import("react/jsx-runtime").JSX.Element;
 export default Row;

package/dist/Row/index.js

@@ -1,2 +1,42 @@
-import { Row } from 'antd';
-export default Row;
+import { cn } from "../lib/utils.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Row/index.tsx
+function Row(props) {
+	const { gutter = 0, align, justify, wrap = true, className, style, children } = props;
+	const [hGutter, vGutter] = Array.isArray(gutter) ? gutter : [gutter, 0];
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("ald-row tw-flex", wrap && "tw-flex-wrap", align && {
+			top: "tw-items-start",
+			middle: "tw-items-center",
+			bottom: "tw-items-end",
+			stretch: "tw-items-stretch"
+		}[align], justify && {
+			start: "tw-justify-start",
+			end: "tw-justify-end",
+			center: "tw-justify-center",
+			"space-around": "tw-justify-around",
+			"space-between": "tw-justify-between",
+			"space-evenly": "tw-justify-evenly"
+		}[justify], className),
+		style: {
+			rowGap: vGutter,
+			marginLeft: hGutter ? -hGutter / 2 : void 0,
+			marginRight: hGutter ? -hGutter / 2 : void 0,
+			...style
+		},
+		children: React.Children.map(children, (child) => {
+			if (!React.isValidElement(child)) return child;
+			if (hGutter) return React.cloneElement(child, { style: {
+				paddingLeft: hGutter / 2,
+				paddingRight: hGutter / 2,
+				...child.props.style || {}
+			} });
+			return child;
+		})
+	});
+}
+//#endregion
+export { Row as default };
+
+//# sourceMappingURL=index.js.map

package/dist/Row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Row/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface RowProps {\n  gutter?: number | [number, number];\n  align?: 'top' | 'middle' | 'bottom' | 'stretch';\n  justify?:\n    | 'start'\n    | 'end'\n    | 'center'\n    | 'space-around'\n    | 'space-between'\n    | 'space-evenly';\n  wrap?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nfunction Row(props: RowProps) {\n  const {\n    gutter = 0,\n    align,\n    justify,\n    wrap = true,\n    className,\n    style,\n    children,\n  } = props;\n\n  const [hGutter, vGutter] = Array.isArray(gutter) ? gutter : [gutter, 0];\n\n  const alignMap: Record<string, string> = {\n    top: 'tw-items-start',\n    middle: 'tw-items-center',\n    bottom: 'tw-items-end',\n    stretch: 'tw-items-stretch',\n  };\n\n  const justifyMap: Record<string, string> = {\n    start: 'tw-justify-start',\n    end: 'tw-justify-end',\n    center: 'tw-justify-center',\n    'space-around': 'tw-justify-around',\n    'space-between': 'tw-justify-between',\n    'space-evenly': 'tw-justify-evenly',\n  };\n\n  return (\n    <div\n      className={cn(\n        'ald-row tw-flex',\n        wrap && 'tw-flex-wrap',\n        align && alignMap[align],\n        justify && justifyMap[justify],\n        className,\n      )}\n      style={{\n        rowGap: vGutter,\n        marginLeft: hGutter ? -hGutter / 2 : undefined,\n        marginRight: hGutter ? -hGutter / 2 : undefined,\n        ...style,\n      }}\n    >\n      {React.Children.map(children, (child) => {\n        if (!React.isValidElement(child)) return child;\n        if (hGutter) {\n          return React.cloneElement(child as React.ReactElement<any>, {\n            style: {\n              paddingLeft: hGutter / 2,\n              paddingRight: hGutter / 2,\n              ...(child.props.style || {}),\n            },\n          });\n        }\n        return child;\n      })}\n    </div>\n  );\n}\n\nexport default Row;\n"],"mappings":";;;;AAmBA,SAAS,IAAI,OAAiB;CAC5B,MAAM,EACJ,SAAS,GACT,OACA,SACA,OAAO,MACP,WACA,OACA,aACE;CAEJ,MAAM,CAAC,SAAS,WAAW,MAAM,QAAQ,OAAO,GAAG,SAAS,CAAC,QAAQ,EAAE;AAkBvE,QACE,oBAAC,OAAD;EACE,WAAW,GACT,mBACA,QAAQ,gBACR,SArBmC;GACvC,KAAK;GACL,QAAQ;GACR,QAAQ;GACR,SAAS;GACV,CAgBuB,QAClB,WAfqC;GACzC,OAAO;GACP,KAAK;GACL,QAAQ;GACR,gBAAgB;GAChB,iBAAiB;GACjB,gBAAgB;GACjB,CAQ2B,UACtB,UACD;EACD,OAAO;GACL,QAAQ;GACR,YAAY,UAAU,CAAC,UAAU,IAAI;GACrC,aAAa,UAAU,CAAC,UAAU,IAAI;GACtC,GAAG;GACJ;YAEA,MAAM,SAAS,IAAI,WAAW,UAAU;AACvC,OAAI,CAAC,MAAM,eAAe,MAAM,CAAE,QAAO;AACzC,OAAI,QACF,QAAO,MAAM,aAAa,OAAkC,EAC1D,OAAO;IACL,aAAa,UAAU;IACvB,cAAc,UAAU;IACxB,GAAI,MAAM,MAAM,SAAS,EAAE;IAC5B,EACF,CAAC;AAEJ,UAAO;IACP;EACE,CAAA"}

package/dist/ScrollArea/index.d.ts

@@ -1,5 +1,5 @@
 import { ScrollAreaProps } from '@radix-ui/react-scroll-area';
-import React, { ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 interface Props extends ScrollAreaProps {
     children?: ReactNode;
     className?: string;

package/dist/ScrollArea/index.js

@@ -1,59 +1,45 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["children", "className", "innerClassName", "horizontalScrollBarClassName", "verticalScrollBarClassName", "onViewportScroll", "contentDeterminesWidth", "scrollBarHidden", "asChild", "innerStyle"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import * as ScrollAreaComponent from '@radix-ui/react-scroll-area';
-import classNames from 'classnames';
-import React, { forwardRef, memo } from 'react';
-var ScrollArea = function ScrollArea(props, ref) {
-  var children = props.children,
-    className = props.className,
-    innerClassName = props.innerClassName,
-    horizontalScrollBarClassName = props.horizontalScrollBarClassName,
-    verticalScrollBarClassName = props.verticalScrollBarClassName,
-    onViewportScroll = props.onViewportScroll,
-    contentDeterminesWidth = props.contentDeterminesWidth,
-    scrollBarHidden = props.scrollBarHidden,
-    asChild = props.asChild,
-    innerStyle = props.innerStyle,
-    rest = _objectWithoutProperties(props, _excluded);
-  var isHorizontalScrollBarHidden = scrollBarHidden === null || scrollBarHidden === void 0 ? void 0 : scrollBarHidden.includes('horizontal');
-  var isVerticalScrollBarHidden = scrollBarHidden === null || scrollBarHidden === void 0 ? void 0 : scrollBarHidden.includes('vertical');
-  return /*#__PURE__*/React.createElement(ScrollAreaComponent.Root, _extends({}, rest, {
-    scrollHideDelay: 50,
-    className: classNames('ald-scroll-area', className)
-  }), /*#__PURE__*/React.createElement(ScrollAreaComponent.Viewport, {
-    asChild: asChild,
-    className: classNames('ald-scroll-area-inner', {
-      'ald-scroll-area-width-auto': !contentDeterminesWidth
-    }, innerClassName),
-    style: _objectSpread({}, innerStyle),
-    onScroll: function onScroll(event) {
-      onViewportScroll === null || onViewportScroll === void 0 ? void 0 : onViewportScroll(event);
-    },
-    ref: ref
-  }, children), !isVerticalScrollBarHidden && /*#__PURE__*/React.createElement(ScrollAreaComponent.Scrollbar, {
-    style: {
-      right: 3
-    },
-    className: classNames('ald-scroll-area-bar', verticalScrollBarClassName),
-    orientation: "vertical"
-  }, /*#__PURE__*/React.createElement(ScrollAreaComponent.Thumb, {
-    className: 'ald-scroll-area-thumb'
-  })), !isHorizontalScrollBarHidden && /*#__PURE__*/React.createElement(ScrollAreaComponent.Scrollbar, {
-    className: classNames('ald-scroll-area-bar', horizontalScrollBarClassName),
-    style: {
-      bottom: 3
-    },
-    orientation: "horizontal"
-  }, /*#__PURE__*/React.createElement(ScrollAreaComponent.Thumb, {
-    className: 'ald-scroll-area-thumb'
-  })));
+import { cn } from "../lib/utils.js";
+/* empty css            */
+import { forwardRef, memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ScrollAreaComponent from "@radix-ui/react-scroll-area";
+//#region src/ScrollArea/index.tsx
+var ScrollArea = (props, ref) => {
+	const { children, className, innerClassName, horizontalScrollBarClassName, verticalScrollBarClassName, onViewportScroll, contentDeterminesWidth, scrollBarHidden, asChild, innerStyle, ...rest } = props;
+	const isHorizontalScrollBarHidden = scrollBarHidden?.includes("horizontal");
+	const isVerticalScrollBarHidden = scrollBarHidden?.includes("vertical");
+	return /* @__PURE__ */ jsxs(ScrollAreaComponent.Root, {
+		...rest,
+		scrollHideDelay: 50,
+		className: cn("ald-scroll-area", className),
+		children: [
+			/* @__PURE__ */ jsx(ScrollAreaComponent.Viewport, {
+				asChild,
+				className: cn("ald-scroll-area-inner", { "ald-scroll-area-width-auto": !contentDeterminesWidth }, innerClassName),
+				style: { ...innerStyle },
+				onScroll: (event) => {
+					onViewportScroll?.(event);
+				},
+				ref,
+				children
+			}),
+			!isVerticalScrollBarHidden && /* @__PURE__ */ jsx(ScrollAreaComponent.Scrollbar, {
+				style: { right: 3 },
+				className: cn("ald-scroll-area-bar", verticalScrollBarClassName),
+				orientation: "vertical",
+				children: /* @__PURE__ */ jsx(ScrollAreaComponent.Thumb, { className: "ald-scroll-area-thumb" })
+			}),
+			!isHorizontalScrollBarHidden && /* @__PURE__ */ jsx(ScrollAreaComponent.Scrollbar, {
+				className: cn("ald-scroll-area-bar", horizontalScrollBarClassName),
+				style: { bottom: 3 },
+				orientation: "horizontal",
+				children: /* @__PURE__ */ jsx(ScrollAreaComponent.Thumb, { className: "ald-scroll-area-thumb" })
+			})
+		]
+	});
 };
-export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(ScrollArea));
+var ScrollArea_default = memo(forwardRef(ScrollArea));
+//#endregion
+export { ScrollArea_default as default };
+
+//# sourceMappingURL=index.js.map

package/dist/ScrollArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/ScrollArea/index.tsx"],"sourcesContent":["import * as ScrollAreaComponent from '@radix-ui/react-scroll-area';\nimport { ScrollAreaProps } from '@radix-ui/react-scroll-area';\nimport { cn } from '../lib/utils';\nimport React, { forwardRef, memo, ReactNode, Ref } from 'react';\nimport './scroll-area.css';\n\ninterface Props extends ScrollAreaProps {\n  children?: ReactNode;\n  className?: string;\n  horizontalScrollBarClassName?: string;\n  verticalScrollBarClassName?: string;\n  onViewportScroll?: (event: React.UIEvent<HTMLDivElement>) => void;\n  innerClassName?: string;\n  scrollBarHidden?: Array<'horizontal' | 'vertical'>;\n  contentDeterminesWidth?: boolean;\n  innerStyle?: React.CSSProperties;\n}\n\nconst ScrollArea = (props: Props, ref: Ref<HTMLDivElement>) => {\n  const {\n    children,\n    className,\n    innerClassName,\n    horizontalScrollBarClassName,\n    verticalScrollBarClassName,\n    onViewportScroll,\n    contentDeterminesWidth,\n    scrollBarHidden,\n    asChild,\n    innerStyle,\n    ...rest\n  } = props;\n  const isHorizontalScrollBarHidden = scrollBarHidden?.includes('horizontal');\n  const isVerticalScrollBarHidden = scrollBarHidden?.includes('vertical');\n  return (\n    <ScrollAreaComponent.Root\n      {...rest}\n      scrollHideDelay={50}\n      className={cn('ald-scroll-area', className)}\n    >\n      <ScrollAreaComponent.Viewport\n        asChild={asChild}\n        className={cn(\n          'ald-scroll-area-inner',\n          {\n            'ald-scroll-area-width-auto': !contentDeterminesWidth,\n          },\n          innerClassName,\n        )}\n        style={{\n          ...innerStyle,\n        }}\n        onScroll={(event) => {\n          onViewportScroll?.(event);\n        }}\n        ref={ref}\n      >\n        {children}\n      </ScrollAreaComponent.Viewport>\n      {!isVerticalScrollBarHidden && (\n        <ScrollAreaComponent.Scrollbar\n          style={{ right: 3 }}\n          className={cn('ald-scroll-area-bar', verticalScrollBarClassName)}\n          orientation=\"vertical\"\n        >\n          <ScrollAreaComponent.Thumb className={'ald-scroll-area-thumb'} />\n        </ScrollAreaComponent.Scrollbar>\n      )}\n      {!isHorizontalScrollBarHidden && (\n        <ScrollAreaComponent.Scrollbar\n          className={cn('ald-scroll-area-bar', horizontalScrollBarClassName)}\n          style={{ bottom: 3 }}\n          orientation=\"horizontal\"\n        >\n          <ScrollAreaComponent.Thumb className={'ald-scroll-area-thumb'} />\n        </ScrollAreaComponent.Scrollbar>\n      )}\n    </ScrollAreaComponent.Root>\n  );\n};\n\nexport default memo(forwardRef(ScrollArea));\n"],"mappings":";;;;;;AAkBA,IAAM,cAAc,OAAc,QAA6B;CAC7D,MAAM,EACJ,UACA,WACA,gBACA,8BACA,4BACA,kBACA,wBACA,iBACA,SACA,YACA,GAAG,SACD;CACJ,MAAM,8BAA8B,iBAAiB,SAAS,aAAa;CAC3E,MAAM,4BAA4B,iBAAiB,SAAS,WAAW;AACvE,QACE,qBAAC,oBAAoB,MAArB;EACE,GAAI;EACJ,iBAAiB;EACjB,WAAW,GAAG,mBAAmB,UAAU;YAH7C;GAKE,oBAAC,oBAAoB,UAArB;IACW;IACT,WAAW,GACT,yBACA,EACE,8BAA8B,CAAC,wBAChC,EACD,eACD;IACD,OAAO,EACL,GAAG,YACJ;IACD,WAAW,UAAU;AACnB,wBAAmB,MAAM;;IAEtB;IAEJ;IAC4B,CAAA;GAC9B,CAAC,6BACA,oBAAC,oBAAoB,WAArB;IACE,OAAO,EAAE,OAAO,GAAG;IACnB,WAAW,GAAG,uBAAuB,2BAA2B;IAChE,aAAY;cAEZ,oBAAC,oBAAoB,OAArB,EAA2B,WAAW,yBAA2B,CAAA;IACnC,CAAA;GAEjC,CAAC,+BACA,oBAAC,oBAAoB,WAArB;IACE,WAAW,GAAG,uBAAuB,6BAA6B;IAClE,OAAO,EAAE,QAAQ,GAAG;IACpB,aAAY;cAEZ,oBAAC,oBAAoB,OAArB,EAA2B,WAAW,yBAA2B,CAAA;IACnC,CAAA;GAET;;;AAI/B,IAAA,qBAAe,KAAK,WAAW,WAAW,CAAC"}

package/dist/{AldSelect → Select}/BaseSelect.d.ts

@@ -1,7 +1,17 @@
-import * as React from 'react';
-import type { AlignType } from 'rc-trigger/lib/interface';
 import { PlacementType } from '../Dropdown';
-import { BaseSelectRef, ISelectProps, LabelInValueType, SelectMenuProps } from './interface';
+import { BaseSelectRef, ISelectProps, LabelInValueType, SelectMenuProps } from './interface.js';
+import * as React from 'react';
+/** Align config type (locally defined to avoid rc-trigger dependency) */
+export interface AlignType {
+    points?: string[];
+    offset?: (number | string)[];
+    targetOffset?: (number | string)[];
+    overflow?: {
+        adjustX?: boolean;
+        adjustY?: boolean;
+    };
+    _experimental?: Record<string, any>;
+}
 export type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
 export type RenderDOMFunc = (props: any) => HTMLElement;
 export type Mode = 'multiple' | {

package/dist/Select/BaseSelect.js

@@ -0,0 +1,206 @@
+import { cn } from "../lib/utils.js";
+import SizeContext from "../ConfigProvider/sizeContext.js";
+import { useCompactItemContext } from "../Space/CompactContext.js";
+/* empty css           */
+import prefixCls from "../_utils/prefixCls.js";
+import RefSelectTrigger from "./SelectTrigger.js";
+import Suffix from "./components/Suffix.js";
+import Selector from "./Selector/index.js";
+import { FormItemInputContext } from "../Form/FormItemContext.js";
+import getWidthStyle from "./utils/getWidthStyle.js";
+import { ConfigContext } from "../ConfigProvider/index.js";
+import * as React$1 from "react";
+import { useContext, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import _ from "lodash";
+import useMergedState from "rc-util/es/hooks/useMergedState";
+//#region src/Select/BaseSelect.tsx
+function isMultiple(mode) {
+	return !!mode;
+}
+function isResponsive(mode) {
+	return mode === "multiple" || typeof mode === "object" && mode?.responsive;
+}
+function isShowSelectedSection(mode) {
+	if (!mode || mode === "multiple") return false;
+	return typeof mode === "object" && mode.showSelectedSection && mode.responsive;
+}
+var BaseSelect = React$1.forwardRef((props, ref) => {
+	const { id, className, displayValues, onDisplayValuesChange, displayMenu, notFoundContent, onClear, width, mode, status: customStatus, onOptionSelect, onClick, size: customSize, borderLess = false, disabled, placeholder, open, defaultOpen, onOpenChange, showSearch, innerSearchValue, setInnerSearchValue, allowClear, showArrow = true, prefix, suffixIcon, dropdownRender, overlayStyle, dropdownStyle, popupMatchSelectWidth = true, placement, popupClassName, style, ...restProps } = props;
+	const setClassNames = prefixCls("select");
+	const selectRef = useRef(null);
+	const widthStyle = getWidthStyle(width);
+	const dropdownRef = useRef(null);
+	const isResponsiveMode = isResponsive(mode);
+	const isMultipleMode = isMultiple(mode);
+	/** Used for component focused management */
+	const contentSize = useContext(SizeContext);
+	const { direction } = React$1.useContext(ConfigContext);
+	const { compactSize, compactItemClassnames } = useCompactItemContext("ald-select", direction);
+	const size = compactSize || customSize || contentSize || "middle";
+	const { status: contextStatus } = useContext(FormItemInputContext);
+	const mergedStatus = customStatus || contextStatus || void 0;
+	React$1.useImperativeHandle(ref, () => ({
+		focus: () => setFocus(true),
+		blur: () => setFocus(false),
+		open: () => onToggleOpen(true),
+		close: () => {
+			console.log("ref close");
+			onToggleOpen(false);
+		}
+	}));
+	const [focus, setFocus] = useState(false);
+	const [isHover, setIsHover] = useState(false);
+	const [innerOpen, setInnerOpen] = useMergedState(false, {
+		defaultValue: defaultOpen,
+		value: open
+	});
+	const mergedOpen = innerOpen;
+	const onToggleOpen = React$1.useCallback((newOpen) => {
+		const nextOpen = newOpen !== void 0 ? newOpen : !mergedOpen;
+		if (!nextOpen) {
+			setShowResponsiveSelectedSection(false);
+			setFocus(false);
+		}
+		if (mergedOpen !== nextOpen && !disabled) {
+			setInnerOpen(nextOpen);
+			onOpenChange?.(nextOpen);
+		}
+	}, [
+		mergedOpen,
+		disabled,
+		setInnerOpen,
+		onOpenChange
+	]);
+	const [showResponsiveSelectedSection, setShowResponsiveSelectedSection] = useState(false);
+	const onSelectorRemove = (val) => {
+		onDisplayValuesChange(displayValues.filter((i) => i !== val), {
+			type: "remove",
+			values: [{
+				label: val.label,
+				value: val.value
+			}]
+		});
+	};
+	const mergedClassName = cn(setClassNames("beta-ald-select", size, {
+		active: mergedOpen || focus,
+		borderless: borderLess,
+		disabled,
+		[`${mergedStatus}`]: !!mergedStatus,
+		"multiple-responsive": isResponsiveMode,
+		"multiple-default": isMultipleMode && !isResponsiveMode
+	}), className, compactItemClassnames);
+	const showMenu = React$1.useMemo(() => {
+		if (!displayMenu) return;
+		return {
+			...displayMenu,
+			onClick: (info) => {
+				displayMenu?.onClick?.(info);
+				if (displayMenu && !isMultipleMode) {
+					console.log("menu onClick", info);
+					onToggleOpen(false);
+					setFocus(false);
+				}
+				setIsHover(false);
+				onOptionSelect?.(info.key);
+			}
+		};
+	}, [
+		displayMenu,
+		isMultipleMode,
+		onToggleOpen,
+		onOptionSelect
+	]);
+	const onSelectClick = React$1.useCallback((e) => {
+		if (disabled) return;
+		onClick?.(e);
+	}, [disabled, onClick]);
+	React$1.useEffect(() => {
+		const element = selectRef.current;
+		if (element) {
+			const handleMouseOver = () => setIsHover(true);
+			const handleMouseOut = () => setIsHover(false);
+			element.addEventListener("mouseover", handleMouseOver);
+			element.addEventListener("mouseout", handleMouseOut);
+			return () => {
+				element.removeEventListener("mouseover", handleMouseOver);
+				element.removeEventListener("mouseout", handleMouseOut);
+			};
+		}
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergedClassName,
+		style: {
+			...widthStyle,
+			...style
+		},
+		ref: selectRef,
+		id,
+		onClick: onSelectClick,
+		children: [/* @__PURE__ */ jsx(RefSelectTrigger, {
+			...restProps,
+			open: !!mergedOpen,
+			notFoundContent,
+			menu: showMenu,
+			ref: dropdownRef,
+			showSearch,
+			searchValue: innerSearchValue,
+			setInnerSearchValue,
+			popupMatchSelectWidth,
+			overlayClassName: popupClassName,
+			dropdownRender,
+			overlayStyle: overlayStyle || dropdownStyle,
+			placement,
+			onOpenChange: (open) => {
+				if (isResponsiveMode) if (!mergedOpen && !showResponsiveSelectedSection && displayValues.length > 0 && isShowSelectedSection(mode)) setShowResponsiveSelectedSection(true);
+				else onToggleOpen(open);
+				else onToggleOpen(open);
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				className: setClassNames("trigger"),
+				children: [
+					prefix && /* @__PURE__ */ jsx("div", {
+						className: setClassNames("prefix"),
+						children: prefix
+					}),
+					_.isEmpty(displayValues) && /* @__PURE__ */ jsx("div", {
+						className: setClassNames("placeholder"),
+						children: placeholder
+					}),
+					!_.isEmpty(displayValues) && /* @__PURE__ */ jsx(Selector, {
+						...restProps,
+						suffixIcon,
+						size,
+						disabled,
+						mode,
+						dropdownRef,
+						displayValues,
+						onToggleOpen,
+						onRemove: onSelectorRemove,
+						showResponsiveSelectedSection
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx(Suffix, {
+			showArrow,
+			allowClear,
+			disabled,
+			isHover,
+			onClear: () => {
+				onToggleOpen(false);
+				onDisplayValuesChange([], {
+					type: "clear",
+					values: displayValues
+				});
+				onClear?.();
+			},
+			isActive: innerOpen,
+			icon: suffixIcon,
+			displayValues
+		})]
+	});
+});
+//#endregion
+export { BaseSelect as default, isMultiple, isResponsive, isShowSelectedSection };
+
+//# sourceMappingURL=BaseSelect.js.map

package/dist/Select/BaseSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSelect.js","names":[],"sources":["../../src/Select/BaseSelect.tsx"],"sourcesContent":["import './ald-select.css';\nimport * as React from 'react';\nimport useMergedState from 'rc-util/es/hooks/useMergedState';\nimport { cn } from '../lib/utils';\nimport prefixCls from '../_utils/prefixCls';\n\n/** Align config type (locally defined to avoid rc-trigger dependency) */\nexport interface AlignType {\n  points?: string[];\n  offset?: (number | string)[];\n  targetOffset?: (number | string)[];\n  overflow?: { adjustX?: boolean; adjustY?: boolean };\n  _experimental?: Record<string, any>;\n}\nimport SelectTrigger, { RefTriggerProps } from './SelectTrigger';\nimport Selector from './Selector';\nimport _ from 'lodash';\nimport { useContext, useRef, useState } from 'react';\nimport { FormItemInputContext } from '../Form/FormItemContext';\nimport getWidthStyle from './utils/getWidthStyle';\nimport Suffix from './components/Suffix';\nimport { PlacementType } from '../Dropdown';\nimport {\n  BaseSelectRef,\n  DisplayValueType,\n  ISelectProps,\n  LabelInValueType,\n  SelectMenuProps,\n} from './interface';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ConfigContext } from '../ConfigProvider';\nimport { useCompactItemContext } from '../Space/CompactContext';\nimport { MenuInfo } from '../Menu';\n\nexport type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);\n\nexport type RenderDOMFunc = (props: any) => HTMLElement;\n\nexport type Mode =\n  | 'multiple'\n  | {\n      type: 'multiple';\n      responsive?: boolean;\n      maxRows?: number;\n      showSelectedSection?: boolean;\n    };\n\nexport type RawValueType = string | number;\n\nexport type CustomTagProps = {\n  label: React.ReactNode;\n  value: any;\n  disabled: boolean;\n  onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  closable: boolean;\n};\nexport interface BaseSelectPrivateProps {\n  // >>> MISC\n  omitDomProps?: string[];\n\n  // >>> Value\n  displayValues: LabelInValueType[];\n  onDisplayValuesChange: (\n    values: LabelInValueType[],\n    info: {\n      type: 'add' | 'remove' | 'clear';\n      values: LabelInValueType[];\n    },\n  ) => void;\n\n  // >>> Active\n  /** Current dropdown list active item string value */\n  activeValue?: string;\n  /** Link search input with target element */\n  activeDescendantId?: string;\n  onActiveValueChange?: (value: string | null) => void;\n}\n\nexport type BaseSelectPropsWithoutPrivate = Omit<\n  BaseSelectProps,\n  keyof BaseSelectPrivateProps\n>;\n\nexport interface BaseSelectProps\n  extends BaseSelectPrivateProps,\n    ISelectProps,\n    React.AriaAttributes {\n  className?: string;\n  style?: React.CSSProperties;\n  notFoundContent?: React.ReactNode;\n  onClear?: () => void;\n  innerSearchValue?: string;\n  setInnerSearchValue?: (value: string) => void;\n  displayMenu?: SelectMenuProps;\n  // >>> Open\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  onOptionSelect?: (val: RawValueType) => void;\n\n  // >>> Icons\n  allowClear?: boolean;\n  showArrow?: boolean;\n  suffixIcon?: React.ReactNode;\n\n  // >>> Dropdown\n  dropdownAlign?: AlignType;\n  placement?: PlacementType;\n  getPopupContainer?: () => HTMLElement;\n\n  // >>> Focus\n  onBlur?: React.FocusEventHandler<HTMLElement>;\n  onFocus?: React.FocusEventHandler<HTMLElement>;\n\n  // >>> Rest Events\n  onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;\n  onPopupScroll?: React.UIEventHandler<HTMLDivElement>;\n  onInputKeyDown?: React.KeyboardEventHandler<\n    HTMLInputElement | HTMLTextAreaElement\n  >;\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport function isMultiple(mode?: Mode) {\n  return !!mode;\n}\nexport function isResponsive(mode?: Mode) {\n  return mode === 'multiple' || (typeof mode === 'object' && mode?.responsive);\n}\nexport function isShowSelectedSection(mode?: Mode) {\n  if (!mode || mode === 'multiple') {\n    return false;\n  }\n\n  return (\n    typeof mode === 'object' && mode.showSelectedSection && mode.responsive\n  );\n}\nconst BaseSelect = React.forwardRef(\n  (props: BaseSelectProps, ref: React.Ref<BaseSelectRef>) => {\n    const {\n      id,\n      className,\n      // Value\n      displayValues,\n      onDisplayValuesChange,\n      displayMenu,\n      notFoundContent,\n      onClear,\n      width,\n      mode,\n      status: customStatus,\n      onOptionSelect,\n      onClick,\n      size: customSize,\n      borderLess = false,\n      // Status\n      disabled,\n      placeholder,\n\n      // Open\n      open,\n      defaultOpen,\n      onOpenChange,\n      showSearch,\n      innerSearchValue,\n      setInnerSearchValue,\n      // Icons\n      allowClear,\n      showArrow = true,\n      prefix,\n      suffixIcon,\n      dropdownRender,\n      overlayStyle,\n      dropdownStyle,\n      popupMatchSelectWidth = true,\n      placement,\n      popupClassName,\n      style,\n      ...restProps\n      // Rest Props\n    } = props;\n    const setClassNames = prefixCls('select');\n    const selectRef = useRef<HTMLDivElement>(null);\n    const widthStyle = getWidthStyle(width);\n    const dropdownRef = useRef<RefTriggerProps>(null);\n    const isResponsiveMode = isResponsive(mode);\n    const isMultipleMode = isMultiple(mode);\n    /** Used for component focused management */\n    const contentSize = useContext(SizeContext);\n    const { direction } = React.useContext(ConfigContext);\n    // ===================== Compact Item =====================\n    const { compactSize, compactItemClassnames } = useCompactItemContext(\n      'ald-select',\n      direction,\n    );\n    const size = compactSize || customSize || contentSize || 'middle';\n    const {\n      status: contextStatus,\n      // hasFeedback,\n      // isFormItemInput,\n      // feedbackIcon,\n    } = useContext(FormItemInputContext);\n\n    const mergedStatus = customStatus || contextStatus || undefined;\n\n    // =========================== Imperative ===========================\n    React.useImperativeHandle(ref, () => ({\n      focus: () => setFocus(true),\n      blur: () => setFocus(false),\n      open: () => onToggleOpen(true),\n      close: () => {\n        console.log('ref close');\n        onToggleOpen(false);\n      },\n    }));\n    const [focus, setFocus] = useState(false);\n    const [isHover, setIsHover] = useState(false);\n    // ============================== Open ==============================\n    const [innerOpen, setInnerOpen] = useMergedState<boolean>(false, {\n      defaultValue: defaultOpen,\n      value: open,\n    });\n    const mergedOpen = innerOpen;\n    const onToggleOpen = React.useCallback(\n      (newOpen?: boolean) => {\n        const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;\n        if (!nextOpen) {\n          setShowResponsiveSelectedSection(false);\n          setFocus(false);\n        }\n        if (mergedOpen !== nextOpen && !disabled) {\n          setInnerOpen(nextOpen);\n          onOpenChange?.(nextOpen);\n        }\n      },\n      [mergedOpen, disabled, setInnerOpen, onOpenChange],\n    );\n    const [showResponsiveSelectedSection, setShowResponsiveSelectedSection] =\n      useState(false);\n\n    // ============================ Selector ============================\n    const onSelectorRemove = (val: DisplayValueType) => {\n      const newValues = displayValues.filter((i) => i !== val);\n\n      onDisplayValuesChange(newValues, {\n        type: 'remove',\n        values: [\n          {\n            label: val.label,\n            value: val.value as RawValueType,\n          },\n        ],\n      });\n    };\n\n    const mergedClassName = cn(\n      setClassNames('beta-ald-select', size, {\n        active: mergedOpen || focus,\n        borderless: borderLess,\n        disabled: disabled,\n        [`${mergedStatus}`]: !!mergedStatus,\n        'multiple-responsive': isResponsiveMode,\n        'multiple-default': isMultipleMode && !isResponsiveMode,\n      }),\n      className,\n      compactItemClassnames,\n    );\n    const showMenu = React.useMemo(() => {\n      if (!displayMenu) {\n        return undefined;\n      }\n\n      return {\n        ...displayMenu,\n        onClick: (info: MenuInfo) => {\n          displayMenu?.onClick?.(info);\n          if (displayMenu && !isMultipleMode) {\n            console.log('menu onClick', info);\n            onToggleOpen(false);\n            setFocus(false);\n          }\n          setIsHover(false);\n          onOptionSelect?.(info.key);\n        },\n      };\n    }, [displayMenu, isMultipleMode, onToggleOpen, onOptionSelect]);\n    const onSelectClick = React.useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (disabled) {\n          return;\n        }\n        onClick?.(e);\n      },\n      [disabled, onClick],\n    );\n    React.useEffect(() => {\n      const element = selectRef.current;\n      if (element) {\n        const handleMouseOver = () => setIsHover(true);\n        const handleMouseOut = () => setIsHover(false);\n\n        element.addEventListener('mouseover', handleMouseOver);\n        element.addEventListener('mouseout', handleMouseOut);\n\n        return () => {\n          element.removeEventListener('mouseover', handleMouseOver);\n          element.removeEventListener('mouseout', handleMouseOut);\n        };\n      }\n    }, []);\n    return (\n      <div\n        className={mergedClassName}\n        style={{\n          ...widthStyle,\n          ...style,\n        }}\n        ref={selectRef}\n        id={id}\n        onClick={onSelectClick}\n      >\n        <SelectTrigger\n          {...restProps}\n          open={!!mergedOpen}\n          notFoundContent={notFoundContent}\n          menu={showMenu}\n          ref={dropdownRef}\n          showSearch={showSearch}\n          searchValue={innerSearchValue}\n          setInnerSearchValue={setInnerSearchValue}\n          popupMatchSelectWidth={popupMatchSelectWidth}\n          overlayClassName={popupClassName}\n          // @ts-ignore\n          dropdownRender={dropdownRender}\n          overlayStyle={overlayStyle || dropdownStyle}\n          placement={placement}\n          onOpenChange={(open) => {\n            if (isResponsiveMode) {\n              if (\n                !mergedOpen &&\n                !showResponsiveSelectedSection &&\n                displayValues.length > 0 &&\n                isShowSelectedSection(mode)\n              ) {\n                setShowResponsiveSelectedSection(true);\n              } else {\n                onToggleOpen(open);\n              }\n            } else {\n              onToggleOpen(open);\n            }\n          }}\n        >\n          <div className={setClassNames('trigger')}>\n            {prefix && <div className={setClassNames('prefix')}>{prefix}</div>}\n            {_.isEmpty(displayValues) && (\n              <div className={setClassNames('placeholder')}>{placeholder}</div>\n            )}\n            {!_.isEmpty(displayValues) && (\n              <Selector\n                {...restProps}\n                suffixIcon={suffixIcon}\n                size={size}\n                disabled={disabled}\n                mode={mode}\n                dropdownRef={dropdownRef}\n                displayValues={displayValues}\n                onToggleOpen={onToggleOpen}\n                onRemove={onSelectorRemove}\n                showResponsiveSelectedSection={showResponsiveSelectedSection}\n              ></Selector>\n            )}\n          </div>\n        </SelectTrigger>\n        <Suffix\n          showArrow={showArrow}\n          allowClear={allowClear}\n          disabled={disabled}\n          isHover={isHover}\n          onClear={() => {\n            onToggleOpen(false);\n\n            onDisplayValuesChange([], {\n              type: 'clear',\n              values: displayValues,\n            });\n            onClear?.();\n          }}\n          isActive={innerOpen}\n          icon={suffixIcon}\n          displayValues={displayValues}\n        ></Suffix>\n      </div>\n    );\n  },\n);\n\nexport default BaseSelect;\n"],"mappings":"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"}

package/dist/{AldSelect → Select}/SelectTrigger.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import type { ScrollTo } from 'rc-virtual-list/lib/List';
+import { default as React } from 'react';
+import { ScrollTo } from 'rc-virtual-list/es/List';
 import { IDropdownProps } from '../Dropdown';
-import { SelectOptionType } from '../Select';
+import { DefaultOptionType as SelectOptionType } from './interface.js';
 export interface RefTriggerProps {
     getPopupElement: () => HTMLDivElement | null;
 }

package/dist/Select/SelectTrigger.js

@@ -0,0 +1,60 @@
+import { cn } from "../lib/utils.js";
+import Dropdown from "../Dropdown/index.js";
+import SearchBox_default from "./components/SearchBox.js";
+import PopupContent from "./components/PopupContent.js";
+import Empty from "../Empty/index.js";
+import React, { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Select/SelectTrigger.tsx
+var RefSelectTrigger = React.forwardRef((props, ref) => {
+	const { overlayStyle, disabled, open, children, dropdownRender, getPopupContainer, onOpenChange, showSearch, searchValue, setInnerSearchValue, menu: menuProps, overlayClassName, placement = "bottom-start", popupMatchSelectWidth, notFoundContent = /* @__PURE__ */ jsx(Empty, { size: "small" }), ...restProps } = props;
+	const popupRef = React.useRef(null);
+	React.useImperativeHandle(ref, () => ({ getPopupElement: () => popupRef.current }));
+	const customDropdownRender = useCallback((menu) => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "beta-ald-select-popup",
+			ref: popupRef,
+			children: [/* @__PURE__ */ jsx(SearchBox_default, {
+				showSearch,
+				value: searchValue,
+				onChange: (value) => {
+					setInnerSearchValue?.(value);
+				}
+			}), /* @__PURE__ */ jsx(PopupContent, {
+				content: menu,
+				notFoundContent,
+				dropdownRender,
+				menuProps
+			})]
+		});
+	}, [
+		dropdownRender,
+		menuProps,
+		notFoundContent,
+		searchValue,
+		setInnerSearchValue,
+		showSearch
+	]);
+	return /* @__PURE__ */ jsx(Dropdown, {
+		...restProps,
+		disabled,
+		open,
+		menu: menuProps,
+		placement,
+		popupMatchTriggerWidth: popupMatchSelectWidth,
+		overlayStyle,
+		overlayClassName: cn("beta-ald-select-popup-container", overlayClassName),
+		autoUpdatePos: true,
+		dropdownRender: customDropdownRender,
+		getPopupContainer,
+		onOpenChange: (o) => {
+			onOpenChange?.(o);
+		},
+		children
+	});
+});
+RefSelectTrigger.displayName = "SelectTrigger";
+//#endregion
+export { RefSelectTrigger as default };
+
+//# sourceMappingURL=SelectTrigger.js.map

package/dist/Select/SelectTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.js","names":[],"sources":["../../src/Select/SelectTrigger.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport type { ScrollTo } from 'rc-virtual-list/es/List';\nimport Dropdown from '../Dropdown';\nimport { cn } from '../lib/utils';\nimport { IDropdownProps } from '../Dropdown';\nimport { DefaultOptionType as SelectOptionType } from './interface';\nimport SearchBox from './components/SearchBox';\nimport PopupContent from './components/PopupContent';\nimport Empty from '../Empty';\n\nexport interface RefTriggerProps {\n  getPopupElement: () => HTMLDivElement | null;\n}\nexport interface RefSelectorProps {\n  focus: (options?: FocusOptions) => void;\n  blur: () => void;\n  scrollTo?: ScrollTo;\n}\nexport interface SelectTriggerProps extends IDropdownProps {\n  open: boolean;\n  notFoundContent?: React.ReactNode;\n  popupMatchSelectWidth?: boolean | number;\n  showSearch?: boolean;\n  searchValue?: string;\n  setInnerSearchValue?: (value: string) => void;\n  filterOption?: (inputValue: string, option: SelectOptionType) => boolean;\n}\n\nconst RefSelectTrigger = React.forwardRef<RefTriggerProps, SelectTriggerProps>(\n  (props, ref) => {\n    const {\n      // prefixCls,\n      overlayStyle,\n      disabled,\n      open,\n      children,\n      dropdownRender,\n      getPopupContainer,\n      onOpenChange,\n      showSearch,\n      searchValue,\n      setInnerSearchValue,\n      menu: menuProps,\n      overlayClassName,\n      placement = 'bottom-start',\n      popupMatchSelectWidth,\n      notFoundContent = <Empty size=\"small\" />,\n      ...restProps\n    } = props;\n\n    // ======================= Ref =======================\n    const popupRef = React.useRef<HTMLDivElement>(null);\n    React.useImperativeHandle(ref, () => ({\n      getPopupElement: () => popupRef.current,\n    }));\n\n    const customDropdownRender = useCallback(\n      (menu: React.ReactNode) => {\n        return (\n          <div className=\"beta-ald-select-popup\" ref={popupRef}>\n            <SearchBox\n              showSearch={showSearch}\n              value={searchValue}\n              onChange={(value) => {\n                setInnerSearchValue?.(value);\n              }}\n            />\n            <PopupContent\n              content={menu}\n              notFoundContent={notFoundContent}\n              dropdownRender={dropdownRender}\n              menuProps={menuProps}\n            />\n          </div>\n        );\n      },\n      [\n        dropdownRender,\n        menuProps,\n        notFoundContent,\n        searchValue,\n        setInnerSearchValue,\n        showSearch,\n      ],\n    );\n\n    return (\n      <Dropdown\n        {...restProps}\n        disabled={disabled}\n        open={open}\n        menu={menuProps}\n        placement={placement}\n        popupMatchTriggerWidth={popupMatchSelectWidth}\n        overlayStyle={overlayStyle}\n        overlayClassName={cn(\n          'beta-ald-select-popup-container',\n          overlayClassName,\n        )}\n        autoUpdatePos\n        dropdownRender={customDropdownRender}\n        getPopupContainer={getPopupContainer}\n        onOpenChange={(o) => {\n          onOpenChange?.(o);\n        }}\n      >\n        {children}\n      </Dropdown>\n    );\n  },\n);\n\nRefSelectTrigger.displayName = 'SelectTrigger';\n\nexport default RefSelectTrigger;\n"],"mappings":";;;;;;;;AA4BA,IAAM,mBAAmB,MAAM,YAC5B,OAAO,QAAQ;CACd,MAAM,EAEJ,cACA,UACA,MACA,UACA,gBACA,mBACA,cACA,YACA,aACA,qBACA,MAAM,WACN,kBACA,YAAY,gBACZ,uBACA,kBAAkB,oBAAC,OAAD,EAAO,MAAK,SAAU,CAAA,EACxC,GAAG,cACD;CAGJ,MAAM,WAAW,MAAM,OAAuB,KAAK;AACnD,OAAM,oBAAoB,YAAY,EACpC,uBAAuB,SAAS,SACjC,EAAE;CAEH,MAAM,uBAAuB,aAC1B,SAA0B;AACzB,SACE,qBAAC,OAAD;GAAK,WAAU;GAAwB,KAAK;aAA5C,CACE,oBAAC,mBAAD;IACc;IACZ,OAAO;IACP,WAAW,UAAU;AACnB,2BAAsB,MAAM;;IAE9B,CAAA,EACF,oBAAC,cAAD;IACE,SAAS;IACQ;IACD;IACL;IACX,CAAA,CACE;;IAGV;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,QACE,oBAAC,UAAD;EACE,GAAI;EACM;EACJ;EACN,MAAM;EACK;EACX,wBAAwB;EACV;EACd,kBAAkB,GAChB,mCACA,iBACD;EACD,eAAA;EACA,gBAAgB;EACG;EACnB,eAAe,MAAM;AACnB,kBAAe,EAAE;;EAGlB;EACQ,CAAA;EAGhB;AAED,iBAAiB,cAAc"}

package/dist/{AldSelect → Select}/Selector/MultipleResponsiveSelectedSection.d.ts

@@ -1,4 +1,4 @@
-import React, { RefObject } from 'react';
+import { default as React, RefObject } from 'react';
 import { DisplayValueType } from '../interface';
 import { RefTriggerProps } from '../SelectTrigger';
 export default function MultipleResponsiveSelectedSection(params: {
@@ -8,4 +8,4 @@ export default function MultipleResponsiveSelectedSection(params: {
     dropdownRef: RefObject<RefTriggerProps>;
     maxHeight?: number;
     suffixIcon?: React.ReactNode;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/Select/Selector/MultipleResponsiveSelectedSection.js

@@ -0,0 +1,48 @@
+import ScrollArea_default from "../../ScrollArea/index.js";
+import Suffix from "../components/Suffix.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Select/Selector/MultipleResponsiveSelectedSection.tsx
+function MultipleResponsiveSelectedSection(params) {
+	const { displayValues, renderItem, onToggleOpen, dropdownRef, maxHeight, suffixIcon } = params;
+	const multipleSelectedSectionRef = useRef(null);
+	useEffect(() => {
+		function isAncestorElement(ancestorClass, target) {
+			let currentElement = target;
+			while (currentElement) {
+				if (currentElement.classList.contains(ancestorClass)) return true;
+				currentElement = currentElement.parentElement;
+			}
+			return false;
+		}
+		function close(e) {
+			const target = e.target;
+			if (!isAncestorElement("beta-ald-select", target) && !isAncestorElement("beta-ald-select-popup", target)) onToggleOpen(false);
+		}
+		document.addEventListener("mousedown", close);
+		return () => {
+			document.removeEventListener("mousedown", close);
+		};
+	}, [onToggleOpen, dropdownRef]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: multipleSelectedSectionRef,
+		className: "beta-ald-select-selector-multiple-responsive-selected-section",
+		children: [/* @__PURE__ */ jsx(ScrollArea_default, {
+			innerClassName: "beta-ald-select-selector-multiple-responsive-selected-section-inner",
+			innerStyle: { maxHeight },
+			children: /* @__PURE__ */ jsx("div", {
+				className: "beta-ald-select-selector-multiple-responsive-selected-section-tags",
+				children: displayValues.map((item, index) => renderItem(item, index))
+			})
+		}), /* @__PURE__ */ jsx(Suffix, {
+			showArrow: true,
+			allowClear: false,
+			icon: suffixIcon,
+			displayValues
+		})]
+	});
+}
+//#endregion
+export { MultipleResponsiveSelectedSection as default };
+
+//# sourceMappingURL=MultipleResponsiveSelectedSection.js.map

package/dist/Select/Selector/MultipleResponsiveSelectedSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleResponsiveSelectedSection.js","names":[],"sources":["../../../src/Select/Selector/MultipleResponsiveSelectedSection.tsx"],"sourcesContent":["import React, { RefObject, useEffect, useRef } from 'react';\nimport { DisplayValueType } from '../interface';\nimport { RefTriggerProps } from '../SelectTrigger';\nimport ScrollArea from '../../ScrollArea';\nimport Suffix from '../components/Suffix';\n\nexport default function MultipleResponsiveSelectedSection(params: {\n  displayValues: DisplayValueType[];\n  renderItem: (\n    valueItem: DisplayValueType,\n    index?: number,\n  ) => React.JSX.Element | null;\n  onToggleOpen: (open: boolean) => void;\n  dropdownRef: RefObject<RefTriggerProps>;\n  maxHeight?: number;\n  suffixIcon?: React.ReactNode;\n}) {\n  const {\n    displayValues,\n    renderItem,\n    onToggleOpen,\n    dropdownRef,\n    maxHeight,\n    suffixIcon,\n  } = params;\n  const multipleSelectedSectionRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    function isAncestorElement(ancestorClass: string, target: HTMLElement) {\n      let currentElement: HTMLElement | null = target;\n      while (currentElement) {\n        if (currentElement.classList.contains(ancestorClass)) {\n          return true;\n        }\n        currentElement = currentElement.parentElement;\n      }\n      return false;\n    }\n    function close(e: MouseEvent) {\n      const target = e.target as HTMLElement;\n      if (\n        !isAncestorElement('beta-ald-select', target) &&\n        !isAncestorElement('beta-ald-select-popup', target)\n      ) {\n        onToggleOpen(false);\n      }\n    }\n    document.addEventListener('mousedown', close);\n    return () => {\n      document.removeEventListener('mousedown', close);\n    };\n  }, [onToggleOpen, dropdownRef]);\n\n  return (\n    <div\n      ref={multipleSelectedSectionRef}\n      className=\"beta-ald-select-selector-multiple-responsive-selected-section\"\n    >\n      <ScrollArea\n        innerClassName=\"beta-ald-select-selector-multiple-responsive-selected-section-inner\"\n        innerStyle={{\n          maxHeight: maxHeight,\n        }}\n      >\n        <div className=\"beta-ald-select-selector-multiple-responsive-selected-section-tags\">\n          {displayValues.map((item, index) => renderItem(item, index))}\n        </div>\n      </ScrollArea>\n      <Suffix\n        showArrow={true}\n        allowClear={false}\n        icon={suffixIcon}\n        displayValues={displayValues}\n      ></Suffix>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAMA,SAAwB,kCAAkC,QAUvD;CACD,MAAM,EACJ,eACA,YACA,cACA,aACA,WACA,eACE;CACJ,MAAM,6BAA6B,OAA8B,KAAK;AAEtE,iBAAgB;EACd,SAAS,kBAAkB,eAAuB,QAAqB;GACrE,IAAI,iBAAqC;AACzC,UAAO,gBAAgB;AACrB,QAAI,eAAe,UAAU,SAAS,cAAc,CAClD,QAAO;AAET,qBAAiB,eAAe;;AAElC,UAAO;;EAET,SAAS,MAAM,GAAe;GAC5B,MAAM,SAAS,EAAE;AACjB,OACE,CAAC,kBAAkB,mBAAmB,OAAO,IAC7C,CAAC,kBAAkB,yBAAyB,OAAO,CAEnD,cAAa,MAAM;;AAGvB,WAAS,iBAAiB,aAAa,MAAM;AAC7C,eAAa;AACX,YAAS,oBAAoB,aAAa,MAAM;;IAEjD,CAAC,cAAc,YAAY,CAAC;AAE/B,QACE,qBAAC,OAAD;EACE,KAAK;EACL,WAAU;YAFZ,CAIE,oBAAC,oBAAD;GACE,gBAAe;GACf,YAAY,EACC,WACZ;aAED,oBAAC,OAAD;IAAK,WAAU;cACZ,cAAc,KAAK,MAAM,UAAU,WAAW,MAAM,MAAM,CAAC;IACxD,CAAA;GACK,CAAA,EACb,oBAAC,QAAD;GACE,WAAW;GACX,YAAY;GACZ,MAAM;GACS;GACP,CAAA,CACN"}

package/dist/{AldSelect → Select}/Selector/MultipleSelector.d.ts

@@ -1,5 +1,5 @@
-import React, { RefObject } from 'react';
-import { SelectorProps } from './index';
+import { default as React, RefObject } from 'react';
+import { SelectorProps } from './index.js';
 import { DisplayValueType } from '../interface';
 import { CustomTagProps } from '../BaseSelect';
 import { RefTriggerProps } from '../SelectTrigger';
@@ -10,5 +10,5 @@ interface MultipleSelectorProps extends SelectorProps {
     maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);
     dropdownRef: RefObject<RefTriggerProps>;
 }
-export default function MultipleSelector(props: MultipleSelectorProps): React.JSX.Element;
+export default function MultipleSelector(props: MultipleSelectorProps): import("react/jsx-runtime").JSX.Element;
 export {};