x-ui-design 0.5.25 → 0.5.27

package/dist/esm/types/components/Select/Select.d.ts

@@ -47,6 +47,7 @@ declare const Select: React.ForwardRefExoticComponent<import("../../types").Defa
     feedbackIcons?: boolean;
     placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
     removeIcon?: ReactNode;
+    maxTagCount?: number | "responsive";
 } & React.RefAttributes<HTMLDivElement>> & {
     Option: React.FC<import("../../types/select").OptionProps>;
 };

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

@@ -150,6 +150,7 @@ declare const Select: import("react").ComponentType<import("@/types").DefaultPro
     feedbackIcons?: boolean;
     placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
     removeIcon?: import("react").ReactNode;
+    maxTagCount?: number | "responsive";
 } & import("react").RefAttributes<HTMLDivElement>>;
 declare const Option: import("react").ComponentType<import("@/types/select").OptionProps>;
 declare const Tag: import("react").ComponentType<import("@/types/select").CustomTagProps>;

package/dist/esm/types/types/select.d.ts

@@ -46,6 +46,7 @@ export type SelectProps = DefaultProps & {
     feedbackIcons?: boolean;
     placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
     removeIcon?: ReactNode;
+    maxTagCount?: number | 'responsive';
 };
 export interface OptionType {
     value: RuleType;
@@ -60,8 +61,8 @@ export interface OptionType {
 }
 export type CustomTagProps = DefaultProps & {
     label?: ReactNode;
-    value: string;
-    onClose: (e: MouseEvent<HTMLSpanElement> & TargetProps) => void;
+    value?: string;
+    onClose?: (e: MouseEvent<HTMLSpanElement> & TargetProps) => void;
     onMouseDown?: MouseEventHandler | undefined;
     onLoadCapture?: ReactEventHandler | undefined;
     closable?: boolean;

package/dist/index.d.ts

@@ -252,6 +252,7 @@ declare const Select: react.ComponentType<__types.DefaultProps & {
     feedbackIcons?: boolean;
     placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
     removeIcon?: react.ReactNode;
+    maxTagCount?: number | "responsive";
 } & react.RefAttributes<HTMLDivElement>>;
 declare const Option: react.ComponentType<__types_select.OptionProps>;
 declare const Tag: react.ComponentType<__types_select.CustomTagProps>;

package/dist/index.esm.js

@@ -3194,7 +3194,7 @@ const Tag = ({
     e.preventDefault();
     e.stopPropagation();
     e.target.value = value;
-    onClose(e);
+    onClose?.(e);
   };
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -3272,6 +3272,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
   feedbackIcons,
   placement = 'bottomLeft',
   removeIcon,
+  maxTagCount,
   onSearch,
   onSelect,
   onDeselect,
@@ -3296,6 +3297,9 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
   const [isOpenChecker, setIsOpenChecker] = useState(isOpen);
   const [searchQuery, setSearchQuery] = useState(searchValue || '');
   const [dropdownPosition, setDropdownPosition] = useState({});
+  const tagContainerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const [responsiveTagCount, setResponsiveTagCount] = useState(null);
   const [selected, setSelected] = useState(hasMode ? checkModeInitialValue : initialValue);
   useImperativeHandle(ref, () => ({
     focus: () => selectRef.current?.focus(),
@@ -3439,8 +3443,8 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       return;
     }
     const updatedSelected = [...selected, newOptionValue];
-    onSelect?.(updatedSelected);
     onChange?.(updatedSelected);
+    onSelect?.(updatedSelected);
     const input = selectRef.current?.querySelector('input');
     if (input) {
       input.value = '';
@@ -3464,16 +3468,16 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     } else {
       setIsOpen(defaultOpen);
       setSelected(optionValue);
-      onSelect?.(optionValue, option);
       onChange?.(optionValue, option);
+      onSelect?.(optionValue, option);
     }
     handleClearInputValue();
   };
   const handleClear = () => {
     const value = hasMode ? [] : '';
     setSelected(value);
-    onSelect?.('');
     onChange?.('');
+    onSelect?.('');
     onClear?.();
     handleClearInputValue();
   };
@@ -3653,6 +3657,40 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     const option = extractedOptions.find(e => e.value === selected || e.label === selected || e.children === selected) || selected;
     return option?.children || option?.label || option?.value || null;
   })() || selected || null;
+  const hasMaxTagCount = hasMode && (typeof maxTagCount === 'number' || maxTagCount === 'responsive');
+  const displayTagCount = maxTagCount === 'responsive' ? responsiveTagCount : maxTagCount;
+  const selectedTags = hasMode ? selected : [];
+  const tagsToDisplay = hasMaxTagCount ? selectedTags.slice(0, displayTagCount || selectedTags.length) : selectedTags;
+  const overflowCount = hasMaxTagCount ? selectedTags.length - (displayTagCount || selectedTags.length) : 0;
+  useEffect(() => {
+    if (maxTagCount === 'responsive' && tagContainerRef.current) {
+      const calculateTagsToDisplay = () => {
+        const container = tagContainerRef.current;
+        const tags = Array.from(container?.querySelectorAll('.select-tag') || []);
+        const containerWidth = container?.clientWidth || 0;
+        let currentWidth = 0;
+        let count = 0;
+        for (let i = 0; i < tags.length; i++) {
+          const tag = tags[i];
+          currentWidth += tag.offsetWidth + 4; // 4px is the margin-right
+          if (currentWidth < containerWidth) {
+            count++;
+          } else {
+            break;
+          }
+        }
+        setResponsiveTagCount(count);
+      };
+      const observer = new ResizeObserver(() => {
+        calculateTagsToDisplay();
+      });
+      observer.observe(tagContainerRef.current);
+      calculateTagsToDisplay();
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [maxTagCount, selected, tagContainerRef]);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     ref: selectRef,
@@ -3672,6 +3710,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     onMouseLeave: handleMouseLeave,
     className: `${prefixCls}-trigger`
   }, showSearch || hasMode ? /*#__PURE__*/React.createElement("div", {
+    ref: tagContainerRef,
     style: {
       ...style,
       ...(isOpen ? {
@@ -3681,7 +3720,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       minWidth: `${searchInputWidth}px`
     },
     className: `${prefixCls}-tag-container`
-  }, hasMode ? /*#__PURE__*/React.createElement(React.Fragment, null, selected.length ? selected.map((tag, index) => tagRender ? /*#__PURE__*/React.createElement("div", {
+  }, hasMode ? /*#__PURE__*/React.createElement(React.Fragment, null, selectedTags.length ? /*#__PURE__*/React.createElement(React.Fragment, null, tagsToDisplay.map((tag, index) => tagRender ? /*#__PURE__*/React.createElement("div", {
     key: `${index}_${tag}`
   }, tagRender?.({
     label: (() => {
@@ -3700,6 +3739,9 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     })() || tag || null,
     onClose: handleRemoveTag,
     key: `${index}_${tag}`
+  })), overflowCount > 0 && /*#__PURE__*/React.createElement(Tag, {
+    label: `+${overflowCount}`,
+    className: `${prefixCls}-tag-overflow`
   })) : /*#__PURE__*/React.createElement("span", {
     style: {
       opacity: 0.5
@@ -3707,6 +3749,8 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
   }, searchFocused ? '' : placeholder)) : null, isOpen ? /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-tag`
   }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: searchInputRef // Ref to the search input
+    ,
     onClick: e => {
       if (disabled) {
         e.preventDefault();