@tmlmobilidade/ui 20250129.1606.25 → 20250129.1656.11

package/dist/cjs/index.js

@@ -860,6 +860,15 @@ function Component({ 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","error":"styles-module_error__fOsRf","dropdownWrapper":"styles-module_dropdownWrapper__guQYa"};
 
+function parseComboboxItem(item) {
+    if (typeof item === 'string') {
+        return {
+            value: item,
+            label: item,
+        };
+    }
+    return item;
+}
 function ComboboxComponent(props) {
     const { multiple = false, searchable = false, autoComplete = false, onChange, data = [], clearable = false, label, description, fullWidth = false, maxHeight = 200, className, error, ...rest } = props;
     // Setup Combobox store
@@ -892,7 +901,7 @@ function ComboboxComponent(props) {
     function updateValue(val) {
         if (multiple && Array.isArray(value)) {
             let updatedValue;
-            if (value.some((v) => getValue(v) === getValue(val))) {
+            if (value.some((v) => v === val)) {
                 updatedValue = value.filter((v) => v !== getValue(val));
             }
             else {
@@ -903,7 +912,10 @@ function ComboboxComponent(props) {
         }
         else {
             const newValue = val;
-            setSearch(searchable ? getLabel(val) : '');
+            const itemData = data.find(dataItem => getValue(dataItem) === val);
+            if (!itemData)
+                return;
+            setSearch(searchable ? parseComboboxItem(itemData)?.label : '');
             setValue(newValue);
             onChange?.(newValue); // Type assertion handled via discriminated union
         }
@@ -957,7 +969,12 @@ function ComboboxComponent(props) {
     // 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) }) }, item)));
+            return value.map((item) => {
+                const itemData = data.find(dataItem => getValue(dataItem) === item);
+                if (!itemData)
+                    return null;
+                return (jsxRuntimeExports.jsx(core.Pill, { className: styles$i.pill, withRemoveButton: true, onRemove: () => removeValue(item), children: jsxRuntimeExports.jsx("span", { children: parseComboboxItem(itemData)?.label }) }, item));
+            });
         }
         return null;
     }
@@ -984,17 +1001,17 @@ function ComboboxComponent(props) {
                                         }
                                     } }) }), jsxRuntimeExports.jsx("div", { className: styles$i.pillClearButton, children: renderClearButton() })] }) }) }));
         }
+        const itemData = data.find(dataItem => getValue(dataItem) === value);
         return (jsxRuntimeExports.jsx(core.Combobox.Target, { children: searchable ? (jsxRuntimeExports.jsx(core.InputBase, { className: styles$i.input, type: "text", value: search, rightSection: renderClearButton(), rightSectionPointerEvents: value === null ? 'none' : 'all', onClick: () => combobox.openDropdown(), onFocus: () => combobox.openDropdown(), onBlur: () => {
                     combobox.closeDropdown();
-                    setSearch(value?.toString() || '');
+                    setSearch(itemData ? parseComboboxItem(itemData)?.label : '');
                 }, 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: 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" })) })) }));
+                }, rightSection: renderClearButton(), rightSectionPointerEvents: value === null ? 'none' : 'all', children: itemData ? parseComboboxItem(itemData)?.label : 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 }), error && jsxRuntimeExports.jsx("p", { className: styles$i.error, children: error }), jsxRuntimeExports.jsxs(core.Combobox, { store: combobox, onOptionSubmit: (val) => {
-                    const selectedItem = data.find((item) => getValue(item) === val) || val;
-                    updateValue(selectedItem);
+                    updateValue(val);
                 }, withinPortal: false, ...rest, children: [renderInput(), jsxRuntimeExports.jsx(core.Combobox.Dropdown, { className: styles$i.dropdownWrapper, children: jsxRuntimeExports.jsx(core.Combobox.Options, { style: { overflowY: 'scroll', maxHeight }, children: filterData().length > 0 ? (renderOptions()) : (jsxRuntimeExports.jsx(core.Combobox.Empty, { children: "Nothing found..." })) }) })] })] }));
 }