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

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import {jsx as $4MPRY$jsx, jsxs as $4MPRY$jsxs, Fragment as $4MPRY$Fragment} from "react/jsx-runtime";
-import {set as $4MPRY$set, get as $4MPRY$get, isArray as $4MPRY$isArray, map as $4MPRY$map, padStart as $4MPRY$padStart, concat as $4MPRY$concat, isNil as $4MPRY$isNil, noop as $4MPRY$noop, toSafeInteger as $4MPRY$toSafeInteger, filter as $4MPRY$filter, indexOf as $4MPRY$indexOf, find as $4MPRY$find, compact as $4MPRY$compact, forEach as $4MPRY$forEach, assign as $4MPRY$assign, includes as $4MPRY$includes, isEmpty as $4MPRY$isEmpty, some as $4MPRY$some, findIndex as $4MPRY$findIndex, last as $4MPRY$last, first as $4MPRY$first, times as $4MPRY$times, pick as $4MPRY$pick, intersection as $4MPRY$intersection, every as $4MPRY$every, uniq as $4MPRY$uniq, trim as $4MPRY$trim, lastIndexOf as $4MPRY$lastIndexOf} from "lodash";
+import {set as $4MPRY$set, get as $4MPRY$get, isArray as $4MPRY$isArray, map as $4MPRY$map, padStart as $4MPRY$padStart, concat as $4MPRY$concat, isNil as $4MPRY$isNil, noop as $4MPRY$noop, toSafeInteger as $4MPRY$toSafeInteger, keyBy as $4MPRY$keyBy, join as $4MPRY$join, filter as $4MPRY$filter, indexOf as $4MPRY$indexOf, find as $4MPRY$find, compact as $4MPRY$compact, forEach as $4MPRY$forEach, assign as $4MPRY$assign, includes as $4MPRY$includes, isEmpty as $4MPRY$isEmpty, some as $4MPRY$some, findIndex as $4MPRY$findIndex, last as $4MPRY$last, first as $4MPRY$first, times as $4MPRY$times, pick as $4MPRY$pick, intersection as $4MPRY$intersection, every as $4MPRY$every, uniq as $4MPRY$uniq, trim as $4MPRY$trim, lastIndexOf as $4MPRY$lastIndexOf} from "lodash";
 import $4MPRY$react, {useState as $4MPRY$useState, useMemo as $4MPRY$useMemo, useRef as $4MPRY$useRef, Children as $4MPRY$Children, Fragment as $4MPRY$Fragment1, useCallback as $4MPRY$useCallback, useEffect as $4MPRY$useEffect, createElement as $4MPRY$createElement} from "react";
 import $4MPRY$lodashget from "lodash/get";
 import {library as $4MPRY$library} from "@fortawesome/fontawesome-svg-core";
@@ -12,6 +12,7 @@ import {FontAwesomeIcon as $4MPRY$FontAwesomeIcon} from "@fortawesome/react-font
 import {useFloating as $4MPRY$useFloating, offset as $4MPRY$offset, flip as $4MPRY$flip, shift as $4MPRY$shift, arrow as $4MPRY$arrow, autoUpdate as $4MPRY$autoUpdate, useHover as $4MPRY$useHover, useFocus as $4MPRY$useFocus, useDismiss as $4MPRY$useDismiss, useRole as $4MPRY$useRole, useInteractions as $4MPRY$useInteractions, FloatingArrow as $4MPRY$FloatingArrow} from "@floating-ui/react";
 import {Menu as $4MPRY$Menu, MenuButton as $4MPRY$MenuButton, Transition as $4MPRY$Transition, MenuItems as $4MPRY$MenuItems, Dialog as $4MPRY$Dialog, TransitionChild as $4MPRY$TransitionChild, Popover as $4MPRY$Popover, PopoverButton as $4MPRY$PopoverButton, PopoverPanel as $4MPRY$PopoverPanel, Switch as $4MPRY$Switch} from "@headlessui/react";
 import {useMask as $4MPRY$useMask} from "@react-input/mask";
+import {NumericFormat as $4MPRY$NumericFormat} from "react-number-format";
 import {useTable as $4MPRY$useTable, flexRender as $4MPRY$flexRender, tableFeatures as $4MPRY$tableFeatures, rowSortingFeature as $4MPRY$rowSortingFeature, columnVisibilityFeature as $4MPRY$columnVisibilityFeature, columnOrderingFeature as $4MPRY$columnOrderingFeature, columnPinningFeature as $4MPRY$columnPinningFeature, columnSizingFeature as $4MPRY$columnSizingFeature, rowPaginationFeature as $4MPRY$rowPaginationFeature, columnGroupingFeature as $4MPRY$columnGroupingFeature, createGroupedRowModel as $4MPRY$createGroupedRowModel, rowExpandingFeature as $4MPRY$rowExpandingFeature, createExpandedRowModel as $4MPRY$createExpandedRowModel, rowAggregationFeature as $4MPRY$rowAggregationFeature, aggregationFn_sum as $4MPRY$aggregationFn_sum, aggregationFn_min as $4MPRY$aggregationFn_min, aggregationFn_max as $4MPRY$aggregationFn_max, aggregationFn_extent as $4MPRY$aggregationFn_extent, aggregationFn_mean as $4MPRY$aggregationFn_mean, aggregationFn_median as $4MPRY$aggregationFn_median, aggregationFn_unique as $4MPRY$aggregationFn_unique, aggregationFn_uniqueCount as $4MPRY$aggregationFn_uniqueCount, aggregationFn_count as $4MPRY$aggregationFn_count, aggregationFn_first as $4MPRY$aggregationFn_first, aggregationFn_last as $4MPRY$aggregationFn_last, createColumnHelper as $4MPRY$createColumnHelper} from "@tanstack/react-table";
 import $4MPRY$reacttailwindcssselect from "react-tailwindcss-select";
 import {utils as $4MPRY$utils, writeFile as $4MPRY$writeFile} from "xlsx";
@@ -1293,6 +1294,7 @@ var $49931a5175dab103$export$2e2bcd8739ae039 = $49931a5175dab103$var$ProgressTra
 
 
 
+
 const $26a2a503969671d2$var$base = {
     foot: '',
     hint: 'text-gray-400 text-xs mt-1',
@@ -1582,7 +1584,7 @@ var $e0479f32053e5dad$export$2e2bcd8739ae039 = $e0479f32053e5dad$var$styles;
 
 
 const $3db4e24516b1d7c2$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, $4MPRY$useMask)({
         mask: mask?.mask,
@@ -1592,6 +1594,74 @@ const $3db4e24516b1d7c2$var$InputGroup = (props)=>{
     });
     const defaultRef = (0, $4MPRY$useRef)(null);
     const ref = mask ? maskRef : defaultRef;
+    const isNumeric = htmlType === 'number' || htmlType === 'percent' || htmlType === 'currency';
+    const numericValueRef = (0, $4MPRY$useRef)(null);
+    const numericFormatProps = (0, $4MPRY$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, $b3fc44f26b625a32$export$e2d2075c69d9100d)((0, $e0479f32053e5dad$export$2e2bcd8739ae039).base);
         const keys = (0, $4MPRY$concat)((0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $e0479f32053e5dad$export$2e2bcd8739ae039).base), (0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $26a2a503969671d2$export$2e2bcd8739ae039).base), (0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $495392c79d755f40$export$2e2bcd8739ae039).base));
@@ -1636,7 +1706,7 @@ const $3db4e24516b1d7c2$var$InputGroup = (props)=>{
                         className: styles.leading,
                         children: leading
                     }),
-                    !htmlType || htmlType !== 'area' && (0, $4MPRY$jsxs)("div", {
+                    !htmlType || htmlType !== 'area' && !isNumeric && (0, $4MPRY$jsxs)("div", {
                         className: "flex items-center",
                         children: [
                             (0, $4MPRY$jsx)("input", {
@@ -1677,6 +1747,27 @@ const $3db4e24516b1d7c2$var$InputGroup = (props)=>{
                             })
                         ]
                     }),
+                    isNumeric && (0, $4MPRY$jsx)("div", {
+                        className: "flex items-center",
+                        children: (0, $4MPRY$jsx)((0, $4MPRY$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, $4MPRY$jsx)("textarea", {
                         rows: rows,
                         name: name,
@@ -2165,14 +2256,14 @@ const $5a695feeffe62190$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: '',
@@ -2229,7 +2320,7 @@ var $5a695feeffe62190$export$2e2bcd8739ae039 = $5a695feeffe62190$var$styles;
 
 
 const $0f7b65f3f54c9363$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, $4MPRY$useState)(true);
     const [state, setState] = (0, $4MPRY$useState)(value ?? null);
     const [searchValue, setSearchValue] = (0, $4MPRY$useState)();
@@ -2243,16 +2334,6 @@ const $0f7b65f3f54c9363$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, $4MPRY$useMemo)(()=>{
         if (!searchInputOptionRenderer || !searchValue) return options;
         if (options.some((opt)=>opt.label.toLowerCase().includes(searchValue.toLowerCase()))) return options;
@@ -2269,6 +2350,26 @@ const $0f7b65f3f54c9363$var$SelectMenu = (props)=>{
         options,
         searchValue
     ]);
+    const optionsByValue = (0, $4MPRY$useMemo)(()=>(0, $4MPRY$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, $4MPRY$useEffect)(()=>{
@@ -2318,8 +2419,10 @@ const $0f7b65f3f54c9363$var$SelectMenu = (props)=>{
         name
     ]);
     const formattedError = (0, $4MPRY$useMemo)(()=>{
-        if (error) return JSON.stringify(error).replaceAll('"', '');
-        return null;
+        if (!error) return null;
+        if (typeof error === 'string') return error;
+        if ((0, $4MPRY$isArray)(error)) return (0, $4MPRY$join)((0, $4MPRY$map)(error, 'label'), ', ');
+        return error.label;
     }, [
         error
     ]);
@@ -2338,10 +2441,30 @@ const $0f7b65f3f54c9363$var$SelectMenu = (props)=>{
             });
         }
         return (0, $4MPRY$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, $4MPRY$useMemo)(()=>{
+        if (!optionRenderer || !state) return state;
+        return (0, $4MPRY$isArray)(state) ? (0, $4MPRY$map)(state, (option)=>({
+                ...option,
+                label: optionRenderer(option)
+            })) : {
+            ...state,
+            label: optionRenderer(state)
+        };
+    }, [
+        optionRenderer,
+        state
+    ]);
     return (0, $4MPRY$jsxs)("div", {
         className: styles.container,
         "data-testid": selectDataTestId,
@@ -2382,11 +2505,11 @@ const $0f7b65f3f54c9363$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, $66c3dcaaa74b5389$export$4370d69198e9314a)(styles.input, `bx-select-menu-${name}`, state === null && '*:text-gray-300! ', state === null && !isValid && isTouched && '*:text-red-300!'),
                                 menu: styles.menu,
@@ -6342,7 +6465,7 @@ var $d0f2c79aeb98cf67$export$2e2bcd8739ae039 = $d0f2c79aeb98cf67$var$styles;
 
 
 const $1a5ad17805feb7b2$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, $4MPRY$useState)(false);
     const handleChangeInput = (0, $4MPRY$useCallback)((files)=>{
@@ -6381,6 +6504,7 @@ const $1a5ad17805feb7b2$var$FileInputGroup = (props)=>{
         onDrop: onDrop,
         multiple: isMulti,
         disabled: isDisabled,
+        accept: accept,
         onError: ()=>{
         // console.log('error');
         // setFieldError('file', t('component.form.error.multipleFiles') as string);