@ballistix.digital/react-components 9.10.0 → 9.10.1-rc-410.0

package/dist/index.js

@@ -12,6 +12,7 @@ var $iA2ta$fortawesomereactfontawesome = require("@fortawesome/react-fontawesome
 var $iA2ta$floatinguireact = require("@floating-ui/react");
 var $iA2ta$headlessuireact = require("@headlessui/react");
 var $iA2ta$reactinputmask = require("@react-input/mask");
+var $iA2ta$reactnumberformat = require("react-number-format");
 var $iA2ta$tanstackreacttable = require("@tanstack/react-table");
 var $iA2ta$reacttailwindcssselect = require("react-tailwindcss-select");
 var $iA2ta$xlsx = require("xlsx");
@@ -1361,6 +1362,7 @@ var $ccdca29d489f3200$export$2e2bcd8739ae039 = $ccdca29d489f3200$var$ProgressTra
 
 
 
+
 const $3369f7d596d23d58$var$base = {
     foot: '',
     hint: 'text-gray-400 text-xs mt-1',
@@ -1650,7 +1652,7 @@ var $47f4a9343fdccb9b$export$2e2bcd8739ae039 = $47f4a9343fdccb9b$var$styles;
 
 
 const $c474e734ef48f77c$var$InputGroup = (props)=>{
-    const { name: name, htmlType: htmlType = 'text', label: label, hint: hint, description: description, placeholder: placeholder, leading: leading, trailing: trailing, required: required, value: value, mask: mask, min: min, max: max, step: step, maxLength: maxLength, rows: rows, error: error, type: type = 'normal', isDisabled: isDisabled, isRequired: isRequired = false, isTouched: isTouched = false, isSolo: isSolo = false, isOptionalLabelHidden: isOptionalLabelHidden = false, onChange: onChange, onClear: onClear, onBlur: onBlur, onClick: onClick, onKeyDown: onKeyDown, setRefOnLoad: setRefOnLoad, styles: stylesOverrides } = props;
+    const { name: name, htmlType: htmlType = 'text', label: label, hint: hint, description: description, placeholder: placeholder, leading: leading, trailing: trailing, required: required, value: value, mask: mask, min: min, max: max, step: step, maxLength: maxLength, rows: rows, error: error, precision: precision, thousandSeparator: thousandSeparator, decimalSeparator: decimalSeparator, currency: currency, type: type = 'normal', isDisabled: isDisabled, isRequired: isRequired = false, isTouched: isTouched = false, isSolo: isSolo = false, isOptionalLabelHidden: isOptionalLabelHidden = false, onChange: onChange, onClear: onClear, onBlur: onBlur, onClick: onClick, onKeyDown: onKeyDown, setRefOnLoad: setRefOnLoad, styles: stylesOverrides } = props;
     const isValid = error === undefined;
     const maskRef = (0, $iA2ta$reactinputmask.useMask)({
         mask: mask?.mask,
@@ -1660,6 +1662,74 @@ const $c474e734ef48f77c$var$InputGroup = (props)=>{
     });
     const defaultRef = (0, $iA2ta$react.useRef)(null);
     const ref = mask ? maskRef : defaultRef;
+    const isNumeric = htmlType === 'number' || htmlType === 'percent' || htmlType === 'currency';
+    const numericValueRef = (0, $iA2ta$react.useRef)(null);
+    const numericFormatProps = (0, $iA2ta$react.useMemo)(()=>{
+        if (htmlType === 'percent') return {
+            decimalScale: precision,
+            suffix: '%'
+        };
+        if (htmlType === 'currency') {
+            const resolvedDecimalSeparator = decimalSeparator ?? ',';
+            return {
+                decimalScale: precision ?? 2,
+                fixedDecimalScale: true,
+                thousandSeparator: thousandSeparator ?? '.',
+                decimalSeparator: resolvedDecimalSeparator,
+                // Numpad decimal keys are typically ".", regardless of locale. A literal "." can never be a
+                // manually-typed thousand separator (grouping is auto-inserted), so it's safe to also accept
+                // it as a decimal keystroke even when the configured decimal separator is something else.
+                allowedDecimalSeparators: Array.from(new Set([
+                    resolvedDecimalSeparator,
+                    '.'
+                ])),
+                prefix: `${currency ?? "\u20AC"} `
+            };
+        }
+        // htmlType === 'number'
+        return {
+            decimalScale: precision,
+            thousandSeparator: thousandSeparator,
+            allowNegative: min === undefined || Number(min) < 0
+        };
+    }, [
+        htmlType,
+        precision,
+        thousandSeparator,
+        decimalSeparator,
+        currency,
+        min
+    ]);
+    const handleNumericValueChange = (values, sourceInfo)=>{
+        numericValueRef.current = values.floatValue ?? null;
+        if (sourceInfo.source !== 'event') return;
+        onChange(values.floatValue ?? null, values.formattedValue);
+    };
+    const handleNumericBlur = (e)=>{
+        if (htmlType === 'number' && numericValueRef.current !== null) {
+            let clamped = numericValueRef.current;
+            if (min !== undefined) clamped = Math.max(Number(min), clamped);
+            if (max !== undefined) clamped = Math.min(Number(max), clamped);
+            if (clamped !== numericValueRef.current) {
+                numericValueRef.current = clamped;
+                onChange(clamped, String(clamped));
+            }
+        }
+        onBlur(e);
+    };
+    const handleNumericKeyDown = (e)=>{
+        if (htmlType === 'number' && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+            e.preventDefault();
+            const stepValue = step !== undefined && step !== 'any' ? Number(step) : 1;
+            const delta = stepValue * (e.key === 'ArrowUp' ? 1 : -1);
+            let next = (numericValueRef.current ?? 0) + delta;
+            if (min !== undefined) next = Math.max(Number(min), next);
+            if (max !== undefined) next = Math.min(Number(max), next);
+            numericValueRef.current = next;
+            onChange(next, String(next));
+        }
+        onKeyDown?.(e);
+    };
     const handleGenerateStyle = ()=>{
         const result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $47f4a9343fdccb9b$export$2e2bcd8739ae039).base);
         const keys = (0, $iA2ta$lodash.concat)((0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $47f4a9343fdccb9b$export$2e2bcd8739ae039).base), (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $3369f7d596d23d58$export$2e2bcd8739ae039).base), (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $65bb4d593718fcda$export$2e2bcd8739ae039).base));
@@ -1704,7 +1774,7 @@ const $c474e734ef48f77c$var$InputGroup = (props)=>{
                         className: styles.leading,
                         children: leading
                     }),
-                    !htmlType || htmlType !== 'area' && (0, $iA2ta$reactjsxruntime.jsxs)("div", {
+                    !htmlType || htmlType !== 'area' && !isNumeric && (0, $iA2ta$reactjsxruntime.jsxs)("div", {
                         className: "flex items-center",
                         children: [
                             (0, $iA2ta$reactjsxruntime.jsx)("input", {
@@ -1745,6 +1815,27 @@ const $c474e734ef48f77c$var$InputGroup = (props)=>{
                             })
                         ]
                     }),
+                    isNumeric && (0, $iA2ta$reactjsxruntime.jsx)("div", {
+                        className: "flex items-center",
+                        children: (0, $iA2ta$reactjsxruntime.jsx)((0, $iA2ta$reactnumberformat.NumericFormat), {
+                            getInputRef: ref,
+                            name: name,
+                            id: name,
+                            "data-cy": inputDataCy,
+                            className: styles.input,
+                            placeholder: placeholder,
+                            defaultValue: isSolo ? value : undefined,
+                            value: isSolo ? undefined : value,
+                            valueIsNumericString: true,
+                            inputMode: "decimal",
+                            disabled: isDisabled,
+                            onValueChange: handleNumericValueChange,
+                            onBlur: handleNumericBlur,
+                            onClick: onClick,
+                            onKeyDown: handleNumericKeyDown,
+                            ...numericFormatProps
+                        })
+                    }),
                     htmlType === 'area' && (0, $iA2ta$reactjsxruntime.jsx)("textarea", {
                         rows: rows,
                         name: name,
@@ -2233,14 +2324,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 +2388,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 +2402,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 +2418,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 +2487,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 +2509,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 +2573,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 +6533,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 +6572,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);