@tmlmobilidade/ui 20250129.1606.25 → 20250129.1626.34

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 {
@@ -957,7 +966,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;
     }
@@ -993,8 +1007,7 @@ function ComboboxComponent(props) {
                 }, 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 }), 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..." })) }) })] })] }));
 }