fis-component 0.0.73 → 0.0.76

package/dist/cjs/index.js

@@ -70556,9 +70556,12 @@ ${({ $disabled }) => {
 `;
 const SpanLabel$1 = styled.span `
   margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
 
   &.no-padding {
     padding-right: 0;
@@ -70721,6 +70724,7 @@ const MultipleValue = ({ options, onRemove }) => {
     const [hiddenTagCount, setHiddenTagCount] = React.useState(0);
     const theme = styled.useTheme();
     const calculateVisibleTags = React.useCallback(() => {
+        // Đảm bảo containerRef đã được khởi tạo và có phần tử
         if (!containerRef.current || options.length === 0)
             return;
         const container = containerRef.current;
@@ -70732,7 +70736,7 @@ const MultipleValue = ({ options, onRemove }) => {
         for (let i = 0; i < options.length; i++) {
             const tagElement = tagRefs.current[i];
             if (!tagElement)
-                continue;
+                continue; // Skip if tag ref is null
             const tagWidth = tagElement.offsetWidth;
             if (firstTotalWidth + tagWidth + gap <= containerClientWidth) {
                 newFirstTag.push(options[i]);
@@ -70782,14 +70786,39 @@ const MultipleValue = ({ options, onRemove }) => {
     const isVisible = React.useCallback((option) => firstTag.some((t) => t.value === option.value) ||
         secondTag.some((t) => t.value === option.value), [firstTag, secondTag]);
     React.useLayoutEffect(() => {
+        // Tạo một flag để theo dõi trạng thái mounted
+        let isMounted = true;
+        // Sử dụng RAF để đảm bảo DOM đã render
+        let rafId = requestAnimationFrame(() => {
+            // Chỉ tính toán nếu component vẫn mounted
+            if (isMounted && containerRef.current) {
+                calculateVisibleTags();
+            }
+        });
+        // Tạo ResizeObserver để theo dõi khi container được render và có kích thước
+        const resizeObserver = new ResizeObserver(() => {
+            if (isMounted && containerRef.current) {
+                calculateVisibleTags();
+            }
+        });
+        // Observe container nếu nó đã tồn tại
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
         const handleResize = () => {
-            calculateVisibleTags();
+            if (isMounted) {
+                calculateVisibleTags();
+            }
         };
-        calculateVisibleTags();
         window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
+        return () => {
+            isMounted = false;
+            cancelAnimationFrame(rafId);
+            resizeObserver.disconnect();
+            window.removeEventListener("resize", handleResize);
+        };
     }, [calculateVisibleTags, options]);
-    return (jsxRuntime.jsxs(DivChipButtonWrapperSC, { ref: containerRef, children: [options.map((option, index) => (jsxRuntime.jsx(DivChipButtonSC, { "$isVisible": isVisible(option), children: jsxRuntime.jsx(FISChipButton, { ref: (el) => (tagRefs.current[index] = el), size: "xs", label: option.label, closeable: true, onClickClose: () => handleRemove(option) }, `${option.value}-${index}`) }))), hiddenTagCount > 0 && (jsxRuntime.jsx(DivTagSC, { "$isVisible": true, children: jsxRuntime.jsx(FISChipButton, { label: `+${hiddenTagCount}`, size: "xs" }) }))] }));
+    return (jsxRuntime.jsxs(DivChipButtonWrapperSC, { ref: containerRef, children: [options.map((option, index) => (jsxRuntime.jsx(DivChipButtonSC, { "$isVisible": isVisible(option), children: jsxRuntime.jsx(FISChipButton, { ref: (el) => (tagRefs.current[index] = el), size: "xs", label: option.label, closeable: true, onClickClose: () => handleRemove(option) }) }, `${option.value}-${index}`))), hiddenTagCount > 0 && (jsxRuntime.jsx(DivTagSC, { "$isVisible": true, children: jsxRuntime.jsx(FISChipButton, { label: `+${hiddenTagCount}`, size: "xs" }) }))] }));
 };
 
 const FISCombobox = React.forwardRef(({ className, options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, noResultText = "Không tìm thấy kết quả", maxHeight, ...restProps }, ref) => {
@@ -73411,7 +73440,7 @@ function isMenuSize(value) {
     return value === "sm" || value === "md";
 }
 
-const FISSelect = React.forwardRef(({ className, style, size = "md", options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, searchValue, onSearchChange, portal, maxHeight, ...restProps }, ref) => {
+const FISSelect = React.forwardRef(({ className, style, size = "md", options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholder, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, searchValue, onSearchChange, portal, maxHeight, ...restProps }, ref) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [referenceElement, setReferenceElement] = React.useState(null);
     const [popperElement, setPopperElement] = React.useState(null);
@@ -73550,7 +73579,7 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [referenceElement, popperElement]);
-    return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsxRuntime.jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: computedDisplayValue(), disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
+    return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsxRuntime.jsx(FISSelectItem, { ...restProps, ref: ref, size: size, placeholder: placeholder, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: computedDisplayValue(), disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
                         ...styles.popper,
                         width: referenceElement?.offsetWidth,
                         zIndex: 9999,