fis-component 0.1.5 → 0.1.7

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

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

package/dist/cjs/types/src/utils/text.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Normalizes a text value by:
+ * - Removing all diacritic marks (e.g. Vietnamese accents)
+ * - Converting the result to lowercase
+ * - Trimming leading and trailing whitespace
+ *
+ * This is useful for case-insensitive and accent-insensitive text comparisons
+ * or searches, especially for languages that use diacritics.
+ *
+ * @example
+ * ```ts
+ * normalizeText("Công nghệ thông tin"); // "cong nghe thong tin"
+ * normalizeText(""); // ""
+ * ```
+ *
+ * @param value - The input text to normalize. If falsy, an empty string is returned.
+ * @returns The normalized, accent-stripped, lowercase, and trimmed string.
+ */
+export declare const normalizeText: (value: string) => string;

package/dist/esm/index.js

@@ -66642,7 +66642,7 @@ const DivWrapperSC$5 = styled.div `
   gap: ${getTheme("com/input/vertical-gap")};
 `;
 
-const FISInputStepper = forwardRef((props) => {
+const FISInputStepper = forwardRef((props, ref) => {
     const { min, max, step = 1, defaultValue, sizeInput = "md", StartIcon, EndIcon, negative, positive, message, iconLabel, textLabel = "", onClickIconLabel, disabled, readOnly, onChange, ...rest } = props;
     const [count, setCount] = useState(defaultValue !== undefined ? defaultValue : undefined);
     const handleIncrement = () => {
@@ -66674,7 +66674,7 @@ const FISInputStepper = forwardRef((props) => {
                     "input-text-lg": sizeInput === "lg",
                 }), children: [jsx(FISIconButton, { icon: StartIcon ? StartIcon : jsx(DecreIcon, {}), size: sizeInput === "lg" ? "md" : "sm", variant: "tertiary-invisible", onClick: handleDecrement, disabled: min !== undefined && count !== undefined && count <= min, className: classNames("decrement", {
                             "disabled-button": disabled || readOnly,
-                        }) }), jsx(InputSC$1, { ...rest, disabled: disabled, readOnly: readOnly, type: "number", value: count !== undefined ? count : "", className: classNames({
+                        }) }), jsx(InputSC$1, { ...rest, ref: ref, disabled: disabled, readOnly: readOnly, type: "number", value: count !== undefined ? count : "", className: classNames({
                             negative: negative,
                             "input-text-lg": sizeInput === "lg",
                         }), onChange: handleChange }), jsx(FISIconButton, { icon: EndIcon ? EndIcon : jsx(IncreIcon, {}), size: sizeInput === "lg" ? "md" : "sm", variant: "tertiary-invisible", onClick: handleIncrement, disabled: max !== undefined && count !== undefined && count >= max, className: classNames("increment", {
@@ -68543,9 +68543,40 @@ 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", maxHeight, onPopupScroll, }) => {
+/**
+ * Normalizes a text value by:
+ * - Removing all diacritic marks (e.g. Vietnamese accents)
+ * - Converting the result to lowercase
+ * - Trimming leading and trailing whitespace
+ *
+ * This is useful for case-insensitive and accent-insensitive text comparisons
+ * or searches, especially for languages that use diacritics.
+ *
+ * @example
+ * ```ts
+ * normalizeText("Công nghệ thông tin"); // "cong nghe thong tin"
+ * normalizeText(""); // ""
+ * ```
+ *
+ * @param value - The input text to normalize. If falsy, an empty string is returned.
+ * @returns The normalized, accent-stripped, lowercase, and trimmed string.
+ */
+const normalizeText = (value) => {
+    if (!value)
+        return "";
+    return value
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .replace(/đ/g, "d")
+        .replace(/Đ/g, "D")
+        .toLowerCase()
+        .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, 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);
@@ -68575,11 +68606,13 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
         if (search.trim()) {
             filteredItems = filteredItems.map((group) => ({
                 ...group,
-                items: group.items.filter((item) => item?.label?.toLowerCase()?.includes(search?.toLowerCase())),
+                items: group.items.filter((item) => normalizeTextSearch
+                    ? normalizeText(item?.label).includes(normalizeText(search))
+                    : item?.label?.toLowerCase()?.includes(search?.toLowerCase())),
             }));
         }
         return filteredItems.filter((group) => group.items.length > 0);
-    }, [groups, multi, selectedValues, search]);
+    }, [groups, multi, selectedValues, search, normalizeTextSearch]);
     const selectedItemsGroup = useMemo$1(() => {
         if (!multi)
             return null;
@@ -68639,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";