fis-component 0.1.6 → 0.1.8

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

@@ -30,6 +30,7 @@ export interface MenuProps {
     removeSelectedText?: string;
     selectedGroupLabel?: string;
     maxHeight?: string | number;
+    focusSearchInput?: boolean;
     onPopupScroll?: (e: React.UIEvent<HTMLElement>) => void;
     normalizeTextSearch?: boolean;
 }

package/dist/esm/index.js

@@ -68573,9 +68573,10 @@ const normalizeText = (value) => {
         .trim();
 };
 
-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, onPopupScroll, normalizeTextSearch = false, }) => {
+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, focusSearchInput = true, onPopupScroll, normalizeTextSearch = false, }) => {
     const [localSearch, setLocalSearch] = useState(searchValue);
     const [debouncedSearchValue, setDebouncedSearchValue] = useState(searchValue);
+    const searchInputRef = useRef(null);
     const debouncedSetSearch = useMemo$1(() => debounce$1((value) => setDebouncedSearchValue(value), 300), []);
     useEffect(() => {
         debouncedSetSearch(localSearch);
@@ -68671,7 +68672,12 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
             onClickMenu?.();
         }
     };
-    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 }) })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !loading && noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), !loading && !noData && (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), !shouldShowNoResult && !noData && !loading && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, onScroll: onPopupScroll, 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(FISTooltip, { title: item.label, variant: "primary", children: 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(FISTooltip, { title: item.label, variant: "primary", children: jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }) }, idx))) }) }))] }))] }));
+    useEffect(() => {
+        if (focusSearchInput && searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    }, [focusSearchInput]);
+    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, ref: searchInputRef }) })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !loading && noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), !loading && !noData && (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), !shouldShowNoResult && !noData && !loading && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, onScroll: onPopupScroll, 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(FISTooltip, { title: item.label, variant: "primary", children: 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(FISTooltip, { title: item.label, variant: "primary", children: jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }) }, idx))) }) }))] }))] }));
 };
 FISMenuSelect.displayName = "FISMenuSelect";
 
@@ -72214,7 +72220,7 @@ const FISInputTime = forwardRef((props, ref) => {
             setIsOpen(false);
         }
     };
-    return (jsxs(DivContainerSC$2, { className: className, ref: containerRef, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxs(DivInputTimeSC, { children: [jsx(FISInputField, { ...rest, ref: ref, typeSuffix: "icon", iconSuffix: jsx(TimeIcon, {}), negative: negative, disabled: disabled, value: inputValue, onChange: handleInputChange, onFocus: handleClickInput, onClickSuffix: handleClickInput, onKeyDown: handleKeyDown }), jsx(HiddenTimePickerSC, { ref: timePickerRef, format: format, value: timeValue, onChange: handleTimeChange, open: isOpen, onOpenChange: handleOpenChange, getPopupContainer: getPopupContainer, showNow: true, inputReadOnly: true })] }), message && (jsx(DivHintWrapperSC, { children: jsx(SpanHintSC, { className: classNames({
+    return (jsxs(DivContainerSC$2, { className: className, ref: containerRef, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxs(DivInputTimeSC, { children: [jsx(FISInputField, { ...rest, ref: ref, typeSuffix: "icon", iconSuffix: jsx(TimeIcon, {}), negative: negative, disabled: disabled, value: inputValue, onChange: handleInputChange, onFocus: handleClickInput, onClickSuffix: handleClickInput, onKeyDown: handleKeyDown, autoComplete: "off" }), jsx(HiddenTimePickerSC, { ref: timePickerRef, format: format, value: timeValue, onChange: handleTimeChange, open: isOpen, onOpenChange: handleOpenChange, getPopupContainer: getPopupContainer, showNow: true, inputReadOnly: true })] }), message && (jsx(DivHintWrapperSC, { children: jsx(SpanHintSC, { className: classNames({
                         disabled: disabled,
                         negative: negative,
                         positive: positive,
@@ -72324,7 +72330,7 @@ const FISInputDate = forwardRef((props, ref) => {
             setInputValue("");
         }
     };
-    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, placeholder: restProps.placeholder, readOnly: inputReadOnly, autoFocus: autoFocus, onFocus: () => setOpen(true), onChange: handleInputChange, onBlur: handleInputBlur, onClickSuffix: () => setOpen(true) }), jsx(HiddenDatePickerSC, { open: open, value: dateValue, onChange: (value) => handleChange(value), onOpenChange: handleOpenChange, format: finalFormat, getPopupContainer: getPopupContainer, minDate: minDate, maxDate: maxDate, picker: picker, allowClear: allowClear, showToday: showToday, showTime: showTime, disabledDate: disabledDate })] }), 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, placeholder: restProps.placeholder, readOnly: inputReadOnly, autoFocus: autoFocus, onFocus: () => setOpen(true), onChange: handleInputChange, onBlur: handleInputBlur, onClickSuffix: () => setOpen(true), autoComplete: "off" }), jsx(HiddenDatePickerSC, { open: open, value: dateValue, onChange: (value) => handleChange(value), onOpenChange: handleOpenChange, format: finalFormat, getPopupContainer: getPopupContainer, minDate: minDate, maxDate: maxDate, picker: picker, allowClear: allowClear, showToday: showToday, showTime: showTime, disabledDate: disabledDate })] }), message && (jsx(DivHintWrapperSC$1, { children: jsx(SpanHintSC$3, { className: classNames({
                         disabled,
                         negative,
                         positive,
@@ -74641,7 +74647,7 @@ const FISSelectItem = forwardRef((props, ref) => {
             iconPrefix: iconPrefix,
             negative: negative,
             activeDropdown: activeDropdown,
-        }), "$size": size, "$activeDropdown": activeDropdown, 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 }))] }) }));
+        }), "$size": size, "$activeDropdown": activeDropdown, children: jsxs(DivWrapperSC, { children: [iconPrefix && (jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size, autoComplete: "off" }), iconSuffix && (jsx(DivIconSuffixSC, { "$size": size, "$disabled": disabled, children: iconSuffix }))] }) }));
 });
 FISSelectItem.displayName = "FISSelectItem";