@ballistix.digital/react-components 9.10.0 → 9.10.1

package/dist/index.js

@@ -2233,14 +2233,14 @@ const $0c7305af577f9538$var$base = {
     input: 'w-full flex border',
     menuButton: '',
     menu: 'z-10 px-0! py-0! w-full! rounded-md overflow-hidden border mt-1! absolute bg-white',
-    tagItem: 'bg-gray-200 px-2 py-1 flex flex-row gap-x-1 items-center justify-between rounded-xs',
+    tagItem: 'bg-gray-200 px-2 py-1 flex flex-row gap-x-1 items-center justify-between rounded-md',
     tagItemText: 'text-xs',
     tagItemIconContainer: 'p-0! rounded-full hover:bg-gray-400 text-sm hover:text-white aspect-square w-4 flex items-center justify-center cursor-pointer',
     tagItemIcon: '',
     list: 'px-0! w-full! *:px-0 max-h-56 overflow-scroll py-1!',
     listGroupLabel: '',
     listItem: 'w-full! list-none! hover:bg-primary-500 hover:text-white py-2! px-2! cursor-pointer',
-    listDisabledItem: '',
+    listDisabledItem: 'w-full! list-none! py-2! px-2! cursor-not-allowed text-gray-400',
     searchContainer: 'w-full! px-2! py-2! border-b',
     searchBox: '',
     searchIcon: '',
@@ -2297,7 +2297,7 @@ var $0c7305af577f9538$export$2e2bcd8739ae039 = $0c7305af577f9538$var$styles;
 
 
 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, searchInputOptionRenderer: searchInputOptionRenderer, 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, optionRenderer: optionRenderer, 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)();
@@ -2311,16 +2311,6 @@ const $cb1b9d36d0757897$var$SelectMenu = (props)=>{
         });
         return result;
     };
-    const handleChange = (selectValue)=>{
-        setState(selectValue);
-        onChange && onChange(selectValue);
-        setIsFocus(false);
-        if (searchInputOptionRenderer) setSearchValue(null);
-    };
-    const handleSearchInputChange = (e)=>{
-        if (searchInputOptionRenderer) setSearchValue(e.target.value);
-        onSearchInputChange?.(e);
-    };
     const computedOptions = (0, $iA2ta$react.useMemo)(()=>{
         if (!searchInputOptionRenderer || !searchValue) return options;
         if (options.some((opt)=>opt.label.toLowerCase().includes(searchValue.toLowerCase()))) return options;
@@ -2337,6 +2327,26 @@ const $cb1b9d36d0757897$var$SelectMenu = (props)=>{
         options,
         searchValue
     ]);
+    const optionsByValue = (0, $iA2ta$react.useMemo)(()=>(0, $iA2ta$lodash.keyBy)(computedOptions, 'value'), [
+        computedOptions
+    ]);
+    const handleChange = (selectValue)=>{
+        const applyValue = (nextValue)=>{
+            setState(nextValue);
+            onChange && onChange(nextValue);
+            setIsFocus(false);
+            if (searchInputOptionRenderer) setSearchValue(null);
+        };
+        // A single selection is handed back straight from `options`.
+        if (!Array.isArray(selectValue)) return applyValue(selectValue);
+        // A multiple selection echoes the value we passed in, which carries a rendered `label`
+        // (see `libraryValue`), so resolve those entries to the options we were given.
+        return applyValue(selectValue.map((option)=>optionsByValue[option.value] ?? option));
+    };
+    const handleSearchInputChange = (e)=>{
+        if (searchInputOptionRenderer) setSearchValue(e.target.value);
+        onSearchInputChange?.(e);
+    };
     const styles = handleGenerateStyle();
     // Simulate onClear event.
     (0, $iA2ta$react.useEffect)(()=>{
@@ -2386,8 +2396,10 @@ const $cb1b9d36d0757897$var$SelectMenu = (props)=>{
         name
     ]);
     const formattedError = (0, $iA2ta$react.useMemo)(()=>{
-        if (error) return JSON.stringify(error).replaceAll('"', '');
-        return null;
+        if (!error) return null;
+        if (typeof error === 'string') return error;
+        if ((0, $iA2ta$lodash.isArray)(error)) return (0, $iA2ta$lodash.join)((0, $iA2ta$lodash.map)(error, 'label'), ', ');
+        return error.label;
     }, [
         error
     ]);
@@ -2406,10 +2418,30 @@ const $cb1b9d36d0757897$var$SelectMenu = (props)=>{
             });
         }
         return (0, $iA2ta$reactjsxruntime.jsx)("div", {
-            className: styles.listItem,
-            children: data.label
+            role: "option",
+            "aria-selected": !!data.isSelected,
+            className: data.disabled ? styles.listDisabledItem : styles.listItem,
+            // Formatted options are rendered inside a wrapper that carries the select's own click
+            // handler, which bypasses its disabled handling.
+            onClick: (e)=>data.disabled && e.stopPropagation(),
+            children: optionRenderer ? optionRenderer(data) : data.label
         });
     };
+    // The select renders `label` as children everywhere except its search filter, which only ever
+    // reads `options`. Rendering the value keeps the selected button and tags in sync with the list.
+    const libraryValue = (0, $iA2ta$react.useMemo)(()=>{
+        if (!optionRenderer || !state) return state;
+        return (0, $iA2ta$lodash.isArray)(state) ? (0, $iA2ta$lodash.map)(state, (option)=>({
+                ...option,
+                label: optionRenderer(option)
+            })) : {
+            ...state,
+            label: optionRenderer(state)
+        };
+    }, [
+        optionRenderer,
+        state
+    ]);
     return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
         className: styles.container,
         "data-testid": selectDataTestId,
@@ -2450,11 +2482,11 @@ const $cb1b9d36d0757897$var$SelectMenu = (props)=>{
                             //
                             options: computedOptions,
                             //
-                            value: state,
+                            value: libraryValue,
                             onChange: handleChange,
                             onSearchInputChange: handleSearchInputChange,
                             //
-                            formatOptionLabel: searchInputOptionRenderer ? handleFormatOptionLabel : undefined,
+                            formatOptionLabel: searchInputOptionRenderer || optionRenderer ? handleFormatOptionLabel : undefined,
                             classNames: {
                                 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,
@@ -6410,7 +6442,7 @@ var $df1ad8019f5459e8$export$2e2bcd8739ae039 = $df1ad8019f5459e8$var$styles;
 
 
 const $a8e0e51381520cae$var$FileInputGroup = (props)=>{
-    const { name: name = 'multiple-file-input', label: label, description: description, hint: hint, required: required, value: value, max: max, error: error, isDisabled: isDisabled, isRequired: isRequired = false, isTouched: isTouched = false, isMulti: isMulti = false, children: children, onChange: onChange, onBlur: onBlur, styles: stylesOverrides } = props;
+    const { name: name = 'multiple-file-input', label: label, description: description, hint: hint, required: required, value: value, max: max, accept: accept, error: error, isDisabled: isDisabled, isRequired: isRequired = false, isTouched: isTouched = false, isMulti: isMulti = false, children: children, onChange: onChange, onBlur: onBlur, styles: stylesOverrides } = props;
     const isValid = error === undefined;
     const [isDragging, setIsDragging] = (0, $iA2ta$react.useState)(false);
     const handleChangeInput = (0, $iA2ta$react.useCallback)((files)=>{
@@ -6449,6 +6481,7 @@ const $a8e0e51381520cae$var$FileInputGroup = (props)=>{
         onDrop: onDrop,
         multiple: isMulti,
         disabled: isDisabled,
+        accept: accept,
         onError: ()=>{
         // console.log('error');
         // setFieldError('file', t('component.form.error.multipleFiles') as string);