fis-component 0.0.71 → 0.0.73

package/dist/cjs/index.js

@@ -66337,7 +66337,11 @@ const DivContainerSC$4 = styled.div `
   flex-direction: column;
   width: unset;
   min-width: ${getTheme("com/menu/min-width")};
-  max-height: ${getTheme("com/menu/max-height")};
+  max-height: ${({ $maxHeight }) => $maxHeight
+    ? typeof $maxHeight === "number"
+        ? `${$maxHeight}px`
+        : $maxHeight
+    : getTheme("com/menu/max-height")};
   border-radius: ${getTheme("com/menu/corner-radius")};
   border: ${getTheme("com/menu/border/stroke-width")} solid
     ${getTheme("com/menu/border/color-stroke")};
@@ -66445,6 +66449,7 @@ const DivContentSC$2 = styled.div `
   flex-direction: column;
   flex: 1;
   gap: ${getTheme("com/menu/item/vertical-gap")};
+  min-width: 0;
 `;
 const DivPrefixIconSC = styled.div `
   display: flex;
@@ -66504,6 +66509,10 @@ const DivPrefixIconSC = styled.div `
 `;
 const PTitleSC$1 = styled.p `
   margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 
   ${(props) => {
     switch (props.$type) {
@@ -66555,6 +66564,10 @@ const PTitleSC$1 = styled.p `
 `;
 const PDescriptionSC = styled.p `
   margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 
   ${(props) => {
     switch (props.$type) {
@@ -67370,10 +67383,16 @@ const DivContentSC$1 = styled.div `
   padding-bottom: ${getTheme("sem/dimension/padding/2xs")};
   padding-left: ${getTheme("com/menu/group-label/horizontal-padding")};
   gap: 8px;
+  min-width: 0;
 `;
 const SectionLabel = styled.span `
   ${getTheme("Subheading/Sm")}
   color: ${getTheme("com/menu/group-label/color-text")};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1;
 `;
 const ActionLink = styled.a `
   ${getTheme("Paragraph/Sm")};
@@ -67397,7 +67416,7 @@ const FISMenuSection = ({ label, withAction = false, actionText, actionLabel = f
 };
 FISMenuSection.displayName = "FISMenuSection";
 
-const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, selectedValues = [], onChangeSelected, searchValue = "", onSearchChange, loading = false, noData = false, noResult = false, combobox, className, onClickMenu, loadingText = "Data loading...", noDataText = "No data", noResultText = "No result", removeSelectedText = "Remove selected", selectedGroupLabel = "Selected", }) => {
+const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, selectedValues = [], onChangeSelected, searchValue = "", onSearchChange, loading = false, noData = false, noResult = false, combobox, className, onClickMenu, loadingText = "Data loading...", noDataText = "No data", noResultText = "No result", removeSelectedText = "Remove selected", selectedGroupLabel = "Selected", maxHeight, }) => {
     const [localSearch, setLocalSearch] = React.useState(searchValue);
     React.useEffect(() => {
         setLocalSearch(searchValue);
@@ -67478,7 +67497,7 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
             onClickMenu?.();
         }
     };
-    return (jsxRuntime.jsxs(DivContainerSC$4, { className: className, children: [showInput && !combobox && (jsxRuntime.jsx(DivSearchSC, { children: jsxRuntime.jsx(FISInputText, { iconPrefix: jsxRuntime.jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoResultIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoDataIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsxRuntime.jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxRuntime.jsxs(DivWrapperSC$4, { children: [index !== 0 && jsxRuntime.jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsxRuntime.jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }, idx)))] }, index))) }), removeSelectedGroup && (jsxRuntime.jsx(FixedBottomSection, { children: jsxRuntime.jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsxRuntime.jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }));
+    return (jsxRuntime.jsxs(DivContainerSC$4, { "$maxHeight": maxHeight, className: className, children: [showInput && !combobox && (jsxRuntime.jsx(DivSearchSC, { children: jsxRuntime.jsx(FISInputText, { iconPrefix: jsxRuntime.jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoResultIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoDataIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsxRuntime.jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxRuntime.jsxs(DivWrapperSC$4, { children: [index !== 0 && jsxRuntime.jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsxRuntime.jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }, idx)))] }, index))) }), removeSelectedGroup && (jsxRuntime.jsx(FixedBottomSection, { children: jsxRuntime.jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsxRuntime.jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }));
 };
 FISMenuSelect.displayName = "FISMenuSelect";
 
@@ -70773,7 +70792,7 @@ const MultipleValue = ({ options, onRemove }) => {
     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ả", ...restProps }, ref) => {
+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) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [searchValue, setSearchValue] = React.useState("");
     const [referenceElement, setReferenceElement] = React.useState(null);
@@ -70879,7 +70898,7 @@ const FISCombobox = React.forwardRef(({ className, options, value, disabled = fa
     }, [filteredOptions, searchValue]);
     return (jsxRuntime.jsxs(DivWrapperSC$3, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(DivInputWrapperSC$2, { ref: setReferenceElement, onClick: handleToggle, children: jsxRuntime.jsx(FISInputField, { ...restProps, ref: ref, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: isOpen && searchValue !== undefined
                         ? searchValue
-                        : computedDisplayValue, disabled: disabled, onClickSuffix: handleToggle, onChange: handleInputChange, onKeyDown: handleInputKeyDown, "$isPointer": true }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper$1, { children: jsxRuntime.jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(DivDropdownMenuSC$1, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: jsxRuntime.jsx(FISMenuSelect, { groups: filteredOptions, placeholder: placeholderSearch, loading: loading, multi: multi, combobox: true, noResult: hasNoResults, noResultText: noResultText, selectedValues: multi ? value : value ? [value] : [], onChangeSelected: (values) => {
+                        : computedDisplayValue, disabled: disabled, onClickSuffix: handleToggle, onChange: handleInputChange, onKeyDown: handleInputKeyDown, "$isPointer": true }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper$1, { children: jsxRuntime.jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(DivDropdownMenuSC$1, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: jsxRuntime.jsx(FISMenuSelect, { groups: filteredOptions, placeholder: placeholderSearch, loading: loading, multi: multi, combobox: true, noResult: hasNoResults, noResultText: noResultText, maxHeight: maxHeight, selectedValues: multi ? value : value ? [value] : [], onChangeSelected: (values) => {
                             if (multi) {
                                 onChange(values);
                             }
@@ -71820,7 +71839,7 @@ const DivSuffixIconSC = styled.div `
 `;
 
 const { RangePicker } = DatePicker;
-const FISDateRange = ({ placeholder = ["dd/mm/yyyy", "dd/mm/yyyy"], label, required = true, message, negative = false, positive = false, disabled = true, ...rest }) => {
+const FISDateRange = ({ placeholder = ["dd/mm/yyyy", "dd/mm/yyyy"], label, required, message, negative, positive, disabled, ...rest }) => {
     const [open, setOpen] = React.useState(false);
     const handleOpenCalendar = () => {
         setOpen(!open);
@@ -73130,6 +73149,10 @@ const InputSC = styled.input `
   border: none;
   background: transparent;
   outline: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 
   ${(props) => {
     switch (props.$size) {
@@ -73202,6 +73225,7 @@ const DivWrapperSC = styled.div `
   justify-content: space-between;
   padding-right: ${getTheme("com/select/field/right-padding")};
   padding-left: ${getTheme("com/select/field/left-padding")};
+  min-width: 0;
 `;
 const DivIconPrefixSC = styled.div `
   display: flex;
@@ -73387,7 +73411,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, ...restProps }, ref) => {
+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 [isOpen, setIsOpen] = React.useState(false);
     const [referenceElement, setReferenceElement] = React.useState(null);
     const [popperElement, setPopperElement] = React.useState(null);
@@ -73498,6 +73522,7 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         onClickMenu: handleMenuClick,
         searchValue,
         onSearchChange,
+        maxHeight,
         ...restProps,
     }), [
         options,
@@ -73510,6 +73535,7 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         handleMenuClick,
         searchValue,
         onSearchChange,
+        maxHeight,
         restProps,
     ]);
     React.useEffect(() => {