fis-component 0.0.70 → 0.0.72

package/dist/cjs/types/src/components/Combobox/types.d.ts

@@ -30,4 +30,5 @@ export type ComboboxProps<T> = Omit<InputFieldProps, "value" | "onChange"> & Par
     renderOption?: (option: ComboboxOption) => React.ReactNode;
     noResult?: boolean;
     noResultText?: string;
+    maxHeight?: string | number;
 } & (SingleSelect<T> | MultiSelect<T>);

package/dist/cjs/types/src/components/Input/InputDate/index.d.ts

@@ -2,6 +2,7 @@ import { InputFieldProps } from "../InputField";
 import dayjs from "dayjs";
 import { InputLabelProps } from "../InputLabel";
 export interface InputDateProps extends Omit<InputFieldProps, "value" | "onChange">, Partial<InputLabelProps> {
+    className?: string | undefined;
     /**Date value*/
     value?: Date | null;
     /**Format Date*/

package/dist/cjs/types/src/components/MenuSelect/styles.d.ts

@@ -1,4 +1,6 @@
-export declare const DivContainerSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DivContainerSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $maxHeight?: string | number;
+}>> & string;
 export declare const DivLoaderSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DivIconDataSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const PTitleSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;

package/dist/cjs/types/src/components/MenuSelect/types.d.ts

@@ -29,6 +29,7 @@ export interface MenuProps {
     noResultText?: string;
     removeSelectedText?: string;
     selectedGroupLabel?: string;
+    maxHeight?: string | number;
 }
 export interface MenuState {
     search: string;

package/dist/cjs/types/src/components/Select/Select.stories.d.ts

@@ -13,3 +13,5 @@ export declare const Loading: import("@storybook/core/csf").AnnotatedStoryFn<imp
 export declare const LargeSize: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
 export declare const Disabled: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
 export declare const NumberType: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, NumberSelectStoryProps>;
+export declare const CustomMaxHeight: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
+export declare const TextEllipsis: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;

package/dist/cjs/types/src/components/Select/styles.d.ts

@@ -1,4 +1,6 @@
 export declare const DivWrapperSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DivInputWrapperSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DivInputWrapperSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $hasValue?: boolean;
+}>> & string;
 export declare const DivDropdownMenuSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const SelectedTagsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/cjs/types/src/components/Select/types.d.ts

@@ -18,6 +18,7 @@ type BaseSelectProps<T extends string | number> = Partial<InputLabelProps> & Omi
     multiDisplayText?: (count: number) => string;
     renderOption?: (option: SelectOption<T>) => React.ReactNode;
     portal?: boolean;
+    maxHeight?: string | number;
 };
 export type SingleSelectProps<T extends string | number> = BaseSelectProps<T> & {
     multi?: false;

package/dist/cjs/types/src/components/SelectItem/styles.d.ts

@@ -1,6 +1,7 @@
 import { SelectSize } from ".";
 interface SelectItemProps {
     $size?: SelectSize;
+    $disabled?: boolean;
 }
 export declare const InputSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, SelectItemProps>> & string;
 export declare const DivWrapperSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectItemProps>> & string;

package/dist/esm/index.js

@@ -66317,7 +66317,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")};
@@ -66425,6 +66429,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;
@@ -66484,6 +66489,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) {
@@ -66535,6 +66544,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) {
@@ -67350,10 +67363,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")};
@@ -67377,7 +67396,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] = useState(searchValue);
     useEffect(() => {
         setLocalSearch(searchValue);
@@ -67458,7 +67477,7 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
             onClickMenu?.();
         }
     };
-    return (jsxs(DivContainerSC$4, { className: className, children: [showInput && !combobox && (jsx(DivSearchSC, { children: jsx(FISInputText, { iconPrefix: jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxs(DivWrapperSC$4, { children: [index !== 0 && jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }, idx)))] }, index))) }), removeSelectedGroup && (jsx(FixedBottomSection, { children: jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }));
+    return (jsxs(DivContainerSC$4, { "$maxHeight": maxHeight, className: className, children: [showInput && !combobox && (jsx(DivSearchSC, { children: jsx(FISInputText, { iconPrefix: jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxs(DivWrapperSC$4, { children: [index !== 0 && jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }, idx)))] }, index))) }), removeSelectedGroup && (jsx(FixedBottomSection, { children: jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }));
 };
 FISMenuSelect.displayName = "FISMenuSelect";
 
@@ -70753,7 +70772,7 @@ const MultipleValue = ({ options, onRemove }) => {
     return (jsxs(DivChipButtonWrapperSC, { ref: containerRef, children: [options.map((option, index) => (jsx(DivChipButtonSC, { "$isVisible": isVisible(option), children: jsx(FISChipButton, { ref: (el) => (tagRefs.current[index] = el), size: "xs", label: option.label, closeable: true, onClickClose: () => handleRemove(option) }, `${option.value}-${index}`) }))), hiddenTagCount > 0 && (jsx(DivTagSC, { "$isVisible": true, children: jsx(FISChipButton, { label: `+${hiddenTagCount}`, size: "xs" }) }))] }));
 };
 
-const FISCombobox = 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 = 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] = useState(false);
     const [searchValue, setSearchValue] = useState("");
     const [referenceElement, setReferenceElement] = useState(null);
@@ -70859,7 +70878,7 @@ const FISCombobox = forwardRef(({ className, options, value, disabled = false, t
     }, [filteredOptions, searchValue]);
     return (jsxs(DivWrapperSC$3, { className: className, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC$2, { ref: setReferenceElement, onClick: handleToggle, children: jsx(FISInputField, { ...restProps, ref: ref, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: isOpen && searchValue !== undefined
                         ? searchValue
-                        : computedDisplayValue, disabled: disabled, onClickSuffix: handleToggle, onChange: handleInputChange, onKeyDown: handleInputKeyDown, "$isPointer": true }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper$1, { children: jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { children: jsx(DivDropdownMenuSC$1, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: 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 && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper$1, { children: jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { children: jsx(DivDropdownMenuSC$1, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: 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);
                             }
@@ -71023,7 +71042,7 @@ function mergeRefs(...refs) {
 }
 
 const FISInputDate = forwardRef((props, ref) => {
-    const { value, textLabel = "", iconLabel, required, message = "", disabled, negative, positive, format = "DD/MM/YYYY", onClickIconLabel, onChange, getPopupContainer, minDate, maxDate, ...restProps } = props;
+    const { className, value, textLabel = "", iconLabel, required, message = "", disabled, negative, positive, format = "DD/MM/YYYY", onClickIconLabel, onChange, getPopupContainer, minDate, maxDate, ...restProps } = props;
     const [open, setOpen] = useState(false);
     const [inputValue, setInputValue] = useState(value ? dayjs(value).format(format) : "");
     const [dateValue, setDateValue] = useState(value ? dayjs(value) : null);
@@ -71066,7 +71085,7 @@ const FISInputDate = forwardRef((props, ref) => {
             onChange?.(null);
         }
     };
-    return (jsxs(DivWrapperSC$2, { children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxs(DivInputWrapperSC$1, { children: [jsx(FISInputField, { ...restProps, ref: mergeRef, typeSuffix: "icon", iconSuffix: jsx(DateIcon, {}), value: inputValue, negative: negative, disabled: disabled, onFocus: () => setOpen(true), onChange: handleInputChange, onClickSuffix: () => setOpen(true) }), jsx(HiddenDatePickerSC, { open: open, value: dateValue, onChange: (value) => handleChange(value), onOpenChange: handleOpenChange, format: format, getPopupContainer: getPopupContainer, minDate: minDate, maxDate: maxDate })] }), message && (jsx(DivHintWrapperSC$1, { children: jsx(SpanHintSC$3, { className: classNames({
+    return (jsxs(DivWrapperSC$2, { className: className, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxs(DivInputWrapperSC$1, { children: [jsx(FISInputField, { ...restProps, ref: mergeRef, typeSuffix: "icon", iconSuffix: jsx(DateIcon, {}), value: inputValue, negative: negative, disabled: disabled, onFocus: () => setOpen(true), onChange: handleInputChange, onClickSuffix: () => setOpen(true) }), jsx(HiddenDatePickerSC, { open: open, value: dateValue, onChange: (value) => handleChange(value), onOpenChange: handleOpenChange, format: format, getPopupContainer: getPopupContainer, minDate: minDate, maxDate: maxDate })] }), message && (jsx(DivHintWrapperSC$1, { children: jsx(SpanHintSC$3, { className: classNames({
                         disabled,
                         negative,
                         positive,
@@ -73066,10 +73085,27 @@ const DivWrapperSC$1 = styled.div `
   flex-direction: column;
   gap: ${getTheme("com/input/vertical-gap")};
 `;
+const preventSelection = css `
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  cursor: pointer !important;
+`;
 const DivInputWrapperSC = styled.div `
   position: relative;
   display: inline-block;
   width: 100%;
+
+  ${(props) => props.$hasValue &&
+    css `
+      ${preventSelection}
+
+      input {
+        ${preventSelection}
+        pointer-events: none;
+      }
+    `}
 `;
 const DivDropdownMenuSC = styled.div `
   /* margin-top: ${getTheme("com/select/vertical-gap")}; */
@@ -73093,6 +73129,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) {
@@ -73165,6 +73205,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;
@@ -73199,7 +73240,7 @@ const DivIconSuffixSC = styled.div `
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
+  cursor: ${(props) => (props.$disabled ? "not-allowed" : "pointer")};
   color: ${getTheme("com/select/field/right-icon/color-icon")};
 
   ${(props) => {
@@ -73342,7 +73383,7 @@ const FISSelectItem = forwardRef((props, ref) => {
     return (jsx(DivContainerSC, { className: classNames({
             iconPrefix: iconPrefix,
             negative: negative,
-        }), "$size": size, children: jsxs(DivWrapperSC, { children: [iconPrefix && (jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size }), iconSuffix && (jsx(DivIconSuffixSC, { "$size": size, children: iconSuffix }))] }) }));
+        }), "$size": size, children: jsxs(DivWrapperSC, { children: [iconPrefix && (jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size }), iconSuffix && (jsx(DivIconSuffixSC, { "$size": size, "$disabled": disabled, children: iconSuffix }))] }) }));
 });
 FISSelectItem.displayName = "FISSelectItem";
 
@@ -73350,7 +73391,7 @@ function isMenuSize(value) {
     return value === "sm" || value === "md";
 }
 
-const FISSelect = 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 = 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] = useState(false);
     const [referenceElement, setReferenceElement] = useState(null);
     const [popperElement, setPopperElement] = useState(null);
@@ -73435,8 +73476,10 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
             onChange(values);
         }
         else {
-            onChange(values[0]);
-            setIsOpen(false);
+            if (values.length > 0) {
+                onChange(values[0]);
+                setIsOpen(false);
+            }
         }
     }, [multi, onChange]);
     const handleMenuClick = useCallback(() => {
@@ -73459,6 +73502,7 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
         onClickMenu: handleMenuClick,
         searchValue,
         onSearchChange,
+        maxHeight,
         ...restProps,
     }), [
         options,
@@ -73471,6 +73515,7 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
         handleMenuClick,
         searchValue,
         onSearchChange,
+        maxHeight,
         restProps,
     ]);
     useEffect(() => {
@@ -73485,7 +73530,7 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [referenceElement, popperElement]);
-    return (jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue(), disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
+    return (jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue(), disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
                         ...styles.popper,
                         width: referenceElement?.offsetWidth,
                         zIndex: 9999,