@tmlmobilidade/ui 20250128.1225.12 → 20250128.1609.43

package/dist/cjs/index.js

@@ -778,7 +778,7 @@ function getValueAtPath(obj, path) {
 }
 
 /* * */
-function Component$4({ className, icon, children, onClick, target, type = 'button', variant = 'primary', disabled, textTransform = 'none', ...props }) {
+function Component$3({ className, icon, children, onClick, target, type = 'button', variant = 'primary', disabled, textTransform = 'none', ...props }) {
     //
     const btnClass = cn(className, styles$l.button, !disabled && {
         [styles$l.danger]: variant === 'danger',
@@ -806,7 +806,7 @@ function SegmentedControl({ ...props }) {
     return jsxRuntimeExports.jsx(core.SegmentedControl, { ...props, className: cn(props.className), classNames: { ...styles$j, ...props.classNames }, style: { width: props.fullWidth ? '100%' : undefined } });
 }
 
-function Component$3({ error, validation, value, classNames, ...props }) {
+function Component$2({ error, validation, value, classNames, ...props }) {
     //
     //
     // A. Setup variables
@@ -828,7 +828,7 @@ function Component$3({ error, validation, value, classNames, ...props }) {
     return (jsxRuntimeExports.jsx(core.TextInput, { classNames: classNames, error: error ? error : isValid ? '' : error, rightSection: props.tooltip && renderTooltip(props.tooltip), value: value, ...props }));
 }
 
-function Component$2({ error, validation, value, classNames, ...props }) {
+function Component$1({ error, validation, value, classNames, ...props }) {
     //
     //
     // A. Setup variables
@@ -850,7 +850,7 @@ function Component$2({ error, validation, value, classNames, ...props }) {
     return (jsxRuntimeExports.jsx(core.PasswordInput, { classNames: classNames, error: error ? error : isValid ? '' : error, rightSection: props.tooltip && renderTooltip(props.tooltip), value: value, ...props }));
 }
 
-function Component$1({ classNames, ...props }) {
+function Component({ classNames, ...props }) {
     //
     //
     // A. Render components
@@ -859,76 +859,116 @@ function Component$1({ classNames, ...props }) {
 
 var styles$i = {"wrapper":"styles-module_wrapper__7zsRX","input":"styles-module_input__kZP4l","placeholder":"styles-module_placeholder__uazW4","pillInputWrapper":"styles-module_pillInputWrapper__rtJzo","pillInputField":"styles-module_pillInputField__LYXhi","icon":"styles-module_icon__jXQ8R","pillClearButton":"styles-module_pillClearButton__RYrwJ","pill":"styles-module_pill__eWbVa","label":"styles-module_label__tB0Ce","description":"styles-module_description__KHjxV","dropdownWrapper":"styles-module_dropdownWrapper__guQYa"};
 
-function Component({ multiple = false, searchable = false, autoComplete = false, onChange, data = [], clearable = false, label, description, fullWidth = false, ...props }) {
-    // A. Setup Variables
+function ComboboxComponent(props) {
+    const { multiple = false, searchable = false, autoComplete = false, onChange, data = [], clearable = false, label, description, fullWidth = false, className, ...rest } = props;
+    // Setup Combobox store
     const combobox = core.useCombobox({
         onDropdownClose: () => combobox.resetSelectedOption(),
         onDropdownOpen: () => combobox.updateSelectedOptionIndex('active'),
     });
-    const [value, setValue] = React.useState(props.value || (clearable ? null : multiple ? [] : ''));
+    // Define state with conditional types
+    const [value, setValue] = React.useState(props.value || (clearable ? undefined : multiple ? [] : undefined));
     const [search, setSearch] = React.useState('');
-    // B. Effects
+    // Reset value when props.value changes
     React.useEffect(() => {
         resetValue(props.value);
-    }, [multiple]);
-    // C. Helper Functions
+    }, [multiple, props.value]);
+    // Helper functions
+    const getValue = (val) => typeof val === 'string' ? val : val.value;
+    const getLabel = (val) => typeof val === 'string' ? val : val.label;
+    /**
+     * Resets the value based on initialValue or default state.
+     */
     const resetValue = (initialValue) => {
-        setValue(initialValue || (multiple ? [] : ''));
+        const newValue = initialValue || (multiple ? [] : undefined);
+        setValue(newValue);
         setSearch('');
+        onChange?.(newValue); // Type assertion handled via discriminated union
     };
-    const updateValue = (val) => {
+    /**
+     * Updates the current value based on selection.
+     */
+    function updateValue(val) {
         if (multiple && Array.isArray(value)) {
-            setValue((prev) => {
-                if (!prev || !Array.isArray(prev))
-                    return [val];
-                return prev.includes(val)
-                    ? prev.filter((v) => v !== val)
-                    : [...prev, val];
-            });
+            let updatedValue;
+            if (value.some(v => getValue(v) === getValue(val))) {
+                updatedValue = value.filter((v) => getValue(v) !== getValue(val));
+            }
+            else {
+                updatedValue = [...value, val];
+            }
+            setValue(updatedValue);
+            onChange?.(updatedValue); // Type assertion handled via discriminated union
         }
         else {
-            setSearch(searchable ? val : '');
-            setValue(val);
+            const newValue = val;
+            setSearch(searchable ? getLabel(val) : '');
+            setValue(newValue);
+            onChange?.(newValue); // Type assertion handled via discriminated union
         }
-    };
-    const removeValue = (val) => {
+    }
+    /**
+     * Removes a specified value from the selection.
+     */
+    function removeValue(val) {
         if (multiple && Array.isArray(value)) {
-            setValue((prev) => {
-                if (!prev || !Array.isArray(prev))
-                    return [];
-                return prev.filter((v) => v !== val);
-            });
+            const updatedValue = value.filter((v) => getValue(v) !== getValue(val));
+            setValue(updatedValue);
+            onChange?.(updatedValue); // Type assertion handled via discriminated union
         }
         else {
-            setValue('');
+            setValue(undefined);
+            onChange?.(undefined);
         }
-    };
-    const filterData = () => searchable ? data.filter((item) => item.toLowerCase().includes(search.trim().toLowerCase())) : data;
-    const handleSearchChange = (event) => {
+    }
+    /**
+     * Filters data based on search input.
+     */
+    function filterData() {
+        return searchable ? data.filter((item) => typeof item === 'string' ?
+            item.toLowerCase().includes(search.trim().toLowerCase()) :
+            item.label.toLowerCase().includes(search.trim().toLowerCase())) : data;
+    }
+    /**
+     * Handles changes in the search input field.
+     */
+    function handleSearchChange(event) {
         const inputValue = event.currentTarget.value;
         setSearch(inputValue);
         combobox.openDropdown();
         combobox.updateSelectedOptionIndex();
-    };
-    // D. Render Components
-    const renderClearButton = () => {
-        if (clearable && value && value.length > 0) {
+    }
+    // Render Clear Button
+    function renderClearButton() {
+        if (clearable && value && (Array.isArray(value) ? value.length > 0 : true)) {
             return (jsxRuntimeExports.jsx(core.ActionIcon, { variant: "transparent", onClick: () => resetValue(), "aria-label": "Clear value", style: { cursor: 'pointer' }, className: styles$i.icon, children: jsxRuntimeExports.jsx(iconsReact.IconX, { size: 24 }) }));
         }
         return jsxRuntimeExports.jsx(iconsReact.IconCaretDownFilled, { size: 24, className: styles$i.icon });
-    };
-    const renderValues = () => Array.isArray(value)
-        ? value.map((item) => (jsxRuntimeExports.jsx(core.Pill, { className: styles$i.pill, withRemoveButton: true, onRemove: () => removeValue(item), children: item }, item)))
-        : [];
-    const renderOptions = () => filterData().map((item) => (jsxRuntimeExports.jsx(core.Combobox.Option, { value: item, active: value?.includes?.(item), children: jsxRuntimeExports.jsxs(core.Group, { gap: "sm", children: [value?.includes?.(item) && jsxRuntimeExports.jsx(core.CheckIcon, { size: 12 }), jsxRuntimeExports.jsx("span", { children: item })] }) }, item)));
-    const renderInput = () => {
+    }
+    // Render Selected Values as Pills
+    function renderValues() {
+        if (multiple && Array.isArray(value)) {
+            return value.map((item) => (jsxRuntimeExports.jsx(core.Pill, { className: styles$i.pill, withRemoveButton: true, onRemove: () => removeValue(item), children: jsxRuntimeExports.jsx("span", { children: getLabel(item) }) }, getValue(item))));
+        }
+        return null;
+    }
+    // Render Combobox Options
+    function renderOptions() {
+        const filtered = filterData();
+        return filtered.map((item) => (jsxRuntimeExports.jsx(core.Combobox.Option, { value: getValue(item), active: Array.isArray(value) && value.some(v => getValue(v) === getValue(item)), children: jsxRuntimeExports.jsxs(core.Group, { gap: "sm", children: [multiple && Array.isArray(value) && value.some(v => getValue(v) === getValue(item)) && jsxRuntimeExports.jsx(core.CheckIcon, { size: 12 }), jsxRuntimeExports.jsx("span", { children: getLabel(item) })] }) }, getValue(item))));
+    }
+    // Render Input Field
+    function renderInput() {
         if (multiple) {
             return (jsxRuntimeExports.jsx(core.Combobox.DropdownTarget, { children: jsxRuntimeExports.jsx(core.PillsInput, { onClick: () => combobox.openDropdown(), className: cn(styles$i.input, styles$i.pillInputWrapper), children: jsxRuntimeExports.jsxs(core.Pill.Group, { style: { marginRight: '25px' }, children: [renderValues(), jsxRuntimeExports.jsx(core.Combobox.EventsTarget, { children: jsxRuntimeExports.jsx(core.PillsInput.Field, { style: { backgroundColor: 'transparent' }, type: searchable ? 'visible' : 'hidden', value: search, placeholder: "Search values", onFocus: () => combobox.openDropdown(), onBlur: () => combobox.closeDropdown(), onChange: handleSearchChange, onKeyDown: (event) => {
                                         if (event.key === 'Backspace' &&
                                             !search &&
                                             Array.isArray(value) &&
                                             value.length > 0) {
-                                            removeValue(value[value.length - 1] || '');
+                                            const lastValue = value[value.length - 1];
+                                            if (lastValue) {
+                                                removeValue(lastValue);
+                                            }
                                         }
                                     } }) }), jsxRuntimeExports.jsx("div", { className: styles$i.pillClearButton, children: renderClearButton() })] }) }) }));
         }
@@ -938,9 +978,16 @@ function Component({ multiple = false, searchable = false, autoComplete = false,
                 }, onChange: handleSearchChange, placeholder: "Search value" })) : (jsxRuntimeExports.jsx(core.InputBase, { className: styles$i.input, component: "button", type: "button", pointer: true, onClick: () => combobox.openDropdown(), onFocus: () => combobox.openDropdown(), onBlur: () => {
                     combobox.closeDropdown();
                     setSearch(value?.toString() || '');
-                }, rightSection: renderClearButton(), rightSectionPointerEvents: value === null ? 'none' : 'all', children: value || jsxRuntimeExports.jsx(core.Input.Placeholder, { className: styles$i.placeholder, children: "Pick value" }) })) }));
-    };
-    return (jsxRuntimeExports.jsxs("div", { className: cn(styles$i.wrapper, props.className), style: { width: fullWidth ? '100%' : undefined }, children: [label && jsxRuntimeExports.jsx("label", { className: styles$i.label, children: label }), description && jsxRuntimeExports.jsx("p", { className: styles$i.description, children: description }), jsxRuntimeExports.jsxs(core.Combobox, { store: combobox, onOptionSubmit: updateValue, withinPortal: false, ...props, children: [renderInput(), jsxRuntimeExports.jsx(core.Combobox.Dropdown, { className: styles$i.dropdownWrapper, children: jsxRuntimeExports.jsx(core.Combobox.Options, { children: renderOptions().length > 0 ? (renderOptions()) : (jsxRuntimeExports.jsx(core.Combobox.Empty, { children: "Nothing found..." })) }) })] })] }));
+                }, rightSection: renderClearButton(), rightSectionPointerEvents: value === null ? 'none' : 'all', children: Array.isArray(value)
+                    ? value.map((item) => getLabel(item)).join(', ')
+                    : typeof value === 'string'
+                        ? getLabel(value)
+                        : (jsxRuntimeExports.jsx(core.Input.Placeholder, { className: styles$i.placeholder, children: "Pick value" })) })) }));
+    }
+    return (jsxRuntimeExports.jsxs("div", { className: cn(styles$i.wrapper, className), style: { width: fullWidth ? '100%' : undefined }, children: [label && jsxRuntimeExports.jsx("label", { className: styles$i.label, children: label }), description && jsxRuntimeExports.jsx("p", { className: styles$i.description, children: description }), jsxRuntimeExports.jsxs(core.Combobox, { store: combobox, onOptionSubmit: (val) => {
+                    const selectedItem = data.find(item => getValue(item) === val) || val;
+                    updateValue(selectedItem);
+                }, withinPortal: false, ...rest, children: [renderInput(), jsxRuntimeExports.jsx(core.Combobox.Dropdown, { className: styles$i.dropdownWrapper, children: jsxRuntimeExports.jsx(core.Combobox.Options, { children: renderOptions().length > 0 ? (renderOptions()) : (jsxRuntimeExports.jsx(core.Combobox.Empty, { children: "Nothing found..." })) }) })] })] }));
 }
 
 var styles$h = {"button":"styles-module_button__fQIgs","fontxs":"styles-module_fontxs__c61kh","fontsm":"styles-module_fontsm__zi0bq","fontbase":"styles-module_fontbase__Uzeoy","fontlg":"styles-module_fontlg__TfMwu","fontxl":"styles-module_fontxl__4IxFS","tag":"styles-module_tag__HOLQE","pill":"styles-module_pill__VAXc-","fullWidth":"styles-module_fullWidth__zWbR4","primary":"styles-module_primary__HWgQU","secondary":"styles-module_secondary__UOKnw","muted":"styles-module_muted__fA0Fl","disabled":"styles-module_disabled__EKMKd","danger":"styles-module_danger__gZERs","info":"styles-module_info__b-gyN","success":"styles-module_success__mRhfk","warning":"styles-module_warning__G977Z","active":"styles-module_active__5pkXl"};
@@ -1447,7 +1494,7 @@ function DataTableTitle({ search, title }) {
     };
     //
     // C. Render Components
-    return (jsxRuntimeExports.jsxs("div", { className: styles$1.root, children: [jsxRuntimeExports.jsx("div", { className: styles$1.title, children: title && title }), search && !search.hidden && (jsxRuntimeExports.jsx("div", { className: styles$1.filters, children: jsxRuntimeExports.jsx(Component$3, { onChange: handleSearchChange, placeholder: search.placeholder, value: searchQuery }) }))] }));
+    return (jsxRuntimeExports.jsxs("div", { className: styles$1.root, children: [jsxRuntimeExports.jsx("div", { className: styles$1.title, children: title && title }), search && !search.hidden && (jsxRuntimeExports.jsx("div", { className: styles$1.filters, children: jsxRuntimeExports.jsx(Component$2, { onChange: handleSearchChange, placeholder: search.placeholder, value: searchQuery }) }))] }));
 }
 
 var styles = {"root":"styles-module_root__AStX6","tableWrapper":"styles-module_tableWrapper__ByR84","table":"styles-module_table__IKm6A","body":"styles-module_body__Ou1Rp"};
@@ -1618,16 +1665,16 @@ const useToast = new Toast();
 
 exports.ActionIcon = ActionIcon;
 exports.Badge = Badge;
-exports.Button = Component$4;
+exports.Button = Component$3;
 exports.CMIcon = CMIcon;
 exports.CMLogo = CMLogo;
 exports.Checkbox = Checkbox;
-exports.Combobox = Component;
+exports.Combobox = ComboboxComponent;
 exports.DataTable = DataTable;
 exports.DateTimePicker = DateTimePicker;
 exports.Grid = Grid;
 exports.Menu = Menu;
-exports.PasswordInput = Component$2;
+exports.PasswordInput = Component$1;
 exports.Section = Section;
 exports.SegmentedControl = SegmentedControl;
 exports.Sidebar = Sidebar;
@@ -1639,8 +1686,8 @@ exports.TMLogo = TMLogo;
 exports.TMLogoDark = TMLogoDark;
 exports.TMLogoLight = TMLogoLight;
 exports.Text = Text;
-exports.TextArea = Component$1;
-exports.TextInput = Component$3;
+exports.TextArea = Component;
+exports.TextInput = Component$2;
 exports.ThemeDark = ThemeDark;
 exports.ThemeLight = ThemeLight;
 exports.ThemeProvider = ThemeProvider;