@ballistix.digital/react-components 9.4.1-rc-356.0 → 9.4.1-rc-358.0

package/dist/index.js

@@ -2296,10 +2296,12 @@ const $0c7305af577f9538$var$styles = {
 var $0c7305af577f9538$export$2e2bcd8739ae039 = $0c7305af577f9538$var$styles;
 
 
+const $cb1b9d36d0757897$var$searchPrefix = '__search__';
 const $cb1b9d36d0757897$var$SelectMenu = (props)=>{
-    const { name: name = 'select-menu-form', label: label, description: description, hint: hint, placeholder: placeholder, options: options, required: required, value: value, error: error, isRequired: isRequired = false, isLoading: isLoading, isTouched: isTouched = false, isDisabled: isDisabled, isClearable: isClearable = true, isMultiple: isMultiple = false, isSearchable: isSearchable = true, isSolo: isSolo = false, isOptionalLabelHidden: isOptionalLabelHidden = false, onChange: onChange, onSearchInputChange: onSearchInputChange, onClear: onClear, onBlur: onBlur, dataTestid: dataTestid, styles: stylesOverrides } = props;
+    const { name: name = 'select-menu-form', label: label, description: description, hint: hint, placeholder: placeholder, options: options, required: required, value: value, error: error, isRequired: isRequired = false, isLoading: isLoading, isTouched: isTouched = false, isDisabled: isDisabled, isClearable: isClearable = true, isMultiple: isMultiple = false, isSearchable: isSearchable = true, isSolo: isSolo = false, isOptionalLabelHidden: isOptionalLabelHidden = false, onChange: onChange, onSearchInputChange: onSearchInputChange, onClear: onClear, onBlur: onBlur, isSearchOptionEnabled: isSearchOptionEnabled = false, searchInputOptionRenderer: searchInputOptionRenderer, dataTestid: dataTestid, styles: stylesOverrides } = props;
     const [isFocus, setIsFocus] = (0, $iA2ta$react.useState)(true);
     const [state, setState] = (0, $iA2ta$react.useState)(value ?? null);
+    const [searchValue, setSearchValue] = (0, $iA2ta$react.useState)();
     const isValid = error === undefined;
     const selectDataTestid = dataTestid ?? `form-select-${name}`;
     const handleGenerateStyle = ()=>{
@@ -2314,7 +2316,27 @@ const $cb1b9d36d0757897$var$SelectMenu = (props)=>{
         setState(selectValue);
         onChange && onChange(selectValue);
         setIsFocus(false);
+        if (isSearchOptionEnabled) setSearchValue(null);
     };
+    const handleSearchInputChange = (e)=>{
+        if (isSearchOptionEnabled) setSearchValue(e.target.value);
+        onSearchInputChange?.(e);
+    };
+    const computedOptions = (0, $iA2ta$react.useMemo)(()=>{
+        if (!isSearchOptionEnabled || !searchValue) return options;
+        if (options.some((opt)=>opt.label.toLowerCase().includes(searchValue.toLowerCase()))) return options;
+        return [
+            ...options,
+            {
+                label: searchValue,
+                value: $cb1b9d36d0757897$var$searchPrefix + searchValue
+            }
+        ];
+    }, [
+        isSearchOptionEnabled,
+        options,
+        searchValue
+    ]);
     const styles = handleGenerateStyle();
     // Simulate onClear event.
     (0, $iA2ta$react.useEffect)(()=>{
@@ -2332,10 +2354,37 @@ const $cb1b9d36d0757897$var$SelectMenu = (props)=>{
     ]);
     // listen to value changes.
     (0, $iA2ta$react.useEffect)(()=>{
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setState(value ?? null);
     }, [
         value
     ]);
+    (0, $iA2ta$react.useEffect)(()=>{
+        const targetNode = document.querySelector(`.bx-select-menu-${name}`);
+        if (!targetNode) return;
+        targetNode.setAttribute('aria-labelledby', `${name}-label`);
+    }, [
+        name
+    ]);
+    // Reset search value when the dropdown closes (aria-expanded → false).
+    (0, $iA2ta$react.useEffect)(()=>{
+        if (!isSearchOptionEnabled) return;
+        const targetNode = document.querySelector(`.bx-select-menu-${name}`);
+        if (!targetNode) return;
+        const observer = new MutationObserver((mutations)=>{
+            for (const mutation of mutations)if (mutation.attributeName === 'aria-expanded' && targetNode.getAttribute('aria-expanded') === 'false') setSearchValue(null);
+        });
+        observer.observe(targetNode, {
+            attributes: true,
+            attributeFilter: [
+                'aria-expanded'
+            ]
+        });
+        return ()=>observer.disconnect();
+    }, [
+        isSearchOptionEnabled,
+        name
+    ]);
     const formattedError = (0, $iA2ta$react.useMemo)(()=>{
         if (error) return JSON.stringify(error).replaceAll('"', '');
         return null;
@@ -2345,6 +2394,12 @@ const $cb1b9d36d0757897$var$SelectMenu = (props)=>{
     return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
         className: styles.container,
         "data-testid": selectDataTestid,
+        onBlur: (e)=>{
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                setIsFocus(false);
+                if (isSearchOptionEnabled) setSearchValue('');
+            }
+        },
         children: [
             (0, $iA2ta$reactjsxruntime.jsx)((0, $9314e0aa7f1e874e$export$2e2bcd8739ae039), {
                 name: name,
@@ -2359,16 +2414,13 @@ const $cb1b9d36d0757897$var$SelectMenu = (props)=>{
                 className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.container, styles.wrapperContainer),
                 children: [
                     (0, $iA2ta$reactjsxruntime.jsx)("div", {
+                        id: `select-menu-control-${name}`,
                         "data-cy": `form-select-${name}`,
                         "data-testid": `${selectDataTestid}-control`,
                         children: (0, $iA2ta$reactjsxruntime.jsx)((0, ($parcel$interopDefault($iA2ta$reacttailwindcssselect))), {
                             primaryColor: "primary",
                             //
                             placeholder: placeholder?.select,
-                            noOptionsMessage: (0, $iA2ta$reactjsxruntime.jsx)("p", {
-                                className: styles.emptyState,
-                                children: placeholder?.emptyState ?? 'No results found'
-                            }),
                             searchInputPlaceholder: placeholder?.searchInput,
                             //
                             loading: isLoading,
@@ -2377,14 +2429,29 @@ const $cb1b9d36d0757897$var$SelectMenu = (props)=>{
                             isMultiple: isMultiple,
                             isSearchable: isSearchable,
                             //
-                            options: options,
+                            options: computedOptions,
                             //
                             value: state,
                             onChange: handleChange,
-                            onSearchInputChange: onSearchInputChange,
+                            onSearchInputChange: handleSearchInputChange,
                             //
+                            formatOptionLabel: (data)=>{
+                                if (isSearchOptionEnabled && searchInputOptionRenderer && data.value.startsWith($cb1b9d36d0757897$var$searchPrefix)) {
+                                    const tagItem = (0, $iA2ta$reactjsxruntime.jsx)("div", {
+                                        className: styles.tagItem,
+                                        children: (0, $iA2ta$reactjsxruntime.jsx)("p", {
+                                            className: styles.tagItemText,
+                                            children: data.label
+                                        })
+                                    });
+                                    return (0, $iA2ta$reactjsxruntime.jsx)((0, $iA2ta$reactjsxruntime.Fragment), {
+                                        children: searchInputOptionRenderer(tagItem)
+                                    });
+                                }
+                                return data.label;
+                            },
                             classNames: {
-                                menuButton: ()=>(0, $622cd2936b18c771$export$4370d69198e9314a)(styles.input, state === null && '*:text-gray-300! ', state === null && !isValid && isTouched && '*:text-red-300!'),
+                                menuButton: ()=>(0, $622cd2936b18c771$export$4370d69198e9314a)(styles.input, `bx-select-menu-${name}`, state === null && '*:text-gray-300! ', state === null && !isValid && isTouched && '*:text-red-300!'),
                                 menu: styles.menu,
                                 tagItem: ()=>styles.tagItem,
                                 tagItemText: styles.tagItemText,
@@ -3657,11 +3724,11 @@ const $51d5596368acf759$var$TableList2 = (props)=>{
         if (column.getIsSorted()) return column.getIsSorted() === 'asc' ? (0, $iA2ta$reactjsxruntime.jsx)((0, $cbf4b156892acb71$export$2e2bcd8739ae039), {
             accessor: "chevron-up",
             type: "solid",
-            className: "h-4 w-4"
+            className: "h-3! w-3!"
         }) : (0, $iA2ta$reactjsxruntime.jsx)((0, $cbf4b156892acb71$export$2e2bcd8739ae039), {
             accessor: "chevron-down",
             type: "solid",
-            className: "h-4 w-4"
+            className: "h-3! w-3!"
         });
         return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
             className: "h-5 w-5 flex flex-col items-center justify-center",
@@ -3669,12 +3736,12 @@ const $51d5596368acf759$var$TableList2 = (props)=>{
                 (0, $iA2ta$reactjsxruntime.jsx)((0, $cbf4b156892acb71$export$2e2bcd8739ae039), {
                     accessor: "chevron-up",
                     type: "solid",
-                    className: "translate-y-1/5 h-3 w-3"
+                    className: "translate-y-1/12 h-2.5! w-2.5!"
                 }),
                 (0, $iA2ta$reactjsxruntime.jsx)((0, $cbf4b156892acb71$export$2e2bcd8739ae039), {
                     accessor: "chevron-down",
                     type: "solid",
-                    className: "-translate-y-1/5 h-3 w-3"
+                    className: "-translate-y-1/12 h-2.5! w-2.5!"
                 })
             ]
         });