@tmlmobilidade/ui 20250211.2350.30 → 20250226.1436.26

package/dist/cjs/types/src/components/common/Combobox/index.d.ts

@@ -1,5 +1,6 @@
 import { ComboboxProps as MantineComboboxProps } from '@mantine/core';
 export interface DataItem {
+    icon?: React.ReactNode;
     label: string;
     value: string;
 }

package/dist/esm/index.js

@@ -1010,11 +1010,12 @@ function Checkbox(props) {
     return jsxRuntimeExports.jsx(Checkbox$1, { classNames: { ...styles$l, ...props.classNames }, ...props });
 }
 
-var styles$k = {"wrapper":"styles-module_wrapper__7zsRX","input":"styles-module_input__kZP4l","placeholder":"styles-module_placeholder__uazW4","pillInputWrapper":"styles-module_pillInputWrapper__rtJzo","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"};
+var styles$k = {"wrapper":"styles-module_wrapper__7zsRX","input":"styles-module_input__kZP4l","placeholder":"styles-module_placeholder__uazW4","pillInputWrapper":"styles-module_pillInputWrapper__rtJzo","icon":"styles-module_icon__jXQ8R","pillClearButton":"styles-module_pillClearButton__RYrwJ","pill":"styles-module_pill__eWbVa","label":"styles-module_label__tB0Ce","labelWrapper":"styles-module_labelWrapper__eFj6h","description":"styles-module_description__KHjxV","error":"styles-module_error__fOsRf","dropdownWrapper":"styles-module_dropdownWrapper__guQYa"};
 
 function parseComboboxItem(item) {
     if (typeof item === 'string') {
         return {
+            icon: null,
             label: item,
             value: item,
         };
@@ -1037,7 +1038,6 @@ function ComboboxComponent(props) {
     }, [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.
      */
@@ -1122,10 +1122,10 @@ function ComboboxComponent(props) {
     function renderValues() {
         if (multiple && Array.isArray(value)) {
             return value.map((item) => {
-                const itemData = data.find(dataItem => getValue(dataItem) === item);
+                const itemData = parseComboboxItem(data.find(dataItem => getValue(dataItem) === item) || '');
                 if (!itemData)
                     return null;
-                return (jsxRuntimeExports.jsx(Pill, { className: styles$k.pill, onRemove: () => removeValue(item), withRemoveButton: true, children: jsxRuntimeExports.jsx("span", { children: parseComboboxItem(itemData)?.label }) }, item));
+                return (jsxRuntimeExports.jsx(Pill, { className: styles$k.pill, onRemove: () => removeValue(item), withRemoveButton: true, children: jsxRuntimeExports.jsxs("div", { className: styles$k.labelWrapper, children: [itemData.icon && jsxRuntimeExports.jsx("span", { className: styles$k.icon, children: itemData.icon }), jsxRuntimeExports.jsx("span", { children: itemData.label })] }) }, item));
             });
         }
         return null;
@@ -1133,10 +1133,13 @@ function ComboboxComponent(props) {
     // Render Combobox Options
     function renderOptions() {
         const filtered = filterData();
-        return (jsxRuntimeExports.jsx(ViewportList, { itemMargin: maxHeight, items: filtered, children: item => (jsxRuntimeExports.jsx(Combobox.Option, { value: getValue(item), active: Array.isArray(value)
-                    && value.some(v => getValue(v) === getValue(item)), children: jsxRuntimeExports.jsxs(Group, { gap: "sm", children: [multiple
-                            && Array.isArray(value)
-                            && value.some(v => getValue(v) === getValue(item)) && jsxRuntimeExports.jsx(CheckIcon, { size: 12 }), jsxRuntimeExports.jsx("span", { children: getLabel(item) })] }) }, getValue(item))) }));
+        return (jsxRuntimeExports.jsx(ViewportList, { itemMargin: maxHeight, items: filtered, children: (item) => {
+                const itemData = parseComboboxItem(item);
+                return (jsxRuntimeExports.jsx(Combobox.Option, { value: itemData.value, active: Array.isArray(value)
+                        && value.some(v => getValue(v) === itemData.value), children: jsxRuntimeExports.jsxs(Group, { gap: "sm", children: [multiple
+                                && Array.isArray(value)
+                                && value.some(v => getValue(v) === itemData.value) && jsxRuntimeExports.jsx(CheckIcon, { size: 12 }), jsxRuntimeExports.jsxs("div", { className: styles$k.labelWrapper, children: [itemData.icon && jsxRuntimeExports.jsx("span", { className: styles$k.icon, children: itemData.icon }), jsxRuntimeExports.jsx("span", { children: itemData.label })] })] }) }, itemData.value));
+            } }));
     }
     // Render Input Field
     function renderInput() {
@@ -1153,14 +1156,14 @@ function ComboboxComponent(props) {
                                         }
                                     } }) }), jsxRuntimeExports.jsx("div", { className: styles$k.pillClearButton, children: renderClearButton() })] }) }) }));
         }
-        const itemData = data.find(dataItem => getValue(dataItem) === value);
-        return (jsxRuntimeExports.jsx(Combobox.Target, { children: searchable ? (jsxRuntimeExports.jsx(InputBase, { className: styles$k.input, onChange: handleSearchChange, onClick: () => combobox.openDropdown(), onFocus: () => combobox.openDropdown(), placeholder: "Search value", rightSection: renderClearButton(), type: "text", value: search, onBlur: () => {
+        const itemData = parseComboboxItem(data.find(dataItem => getValue(dataItem) === value) || '');
+        return (jsxRuntimeExports.jsx(Combobox.Target, { children: searchable ? (jsxRuntimeExports.jsx(InputBase, { className: styles$k.input, leftSection: itemData?.icon, onChange: handleSearchChange, onClick: () => combobox.openDropdown(), onFocus: () => combobox.openDropdown(), placeholder: "Search value", rightSection: renderClearButton(), type: "text", value: search, onBlur: () => {
                     combobox.closeDropdown();
-                    setSearch(itemData ? parseComboboxItem(itemData)?.label : '');
+                    setSearch(itemData ? itemData.label : '');
                 }, rightSectionPointerEvents: value === null ? 'none' : 'all' })) : (jsxRuntimeExports.jsx(InputBase, { className: styles$k.input, component: "button", onClick: () => combobox.openDropdown(), onFocus: () => combobox.openDropdown(), rightSection: renderClearButton(), type: "button", onBlur: () => {
                     combobox.closeDropdown();
                     setSearch(value?.toString() || '');
-                }, rightSectionPointerEvents: value === null ? 'none' : 'all', pointer: true, children: itemData ? parseComboboxItem(itemData)?.label : jsxRuntimeExports.jsx(Input.Placeholder, { className: styles$k.placeholder, children: "Pick value" }) })) }));
+                }, rightSectionPointerEvents: value === null ? 'none' : 'all', pointer: true, children: itemData ? (jsxRuntimeExports.jsxs("div", { className: styles$k.labelWrapper, children: [itemData.icon && jsxRuntimeExports.jsx("span", { className: styles$k.icon, children: itemData.icon }), jsxRuntimeExports.jsx("span", { children: itemData.label })] })) : (jsxRuntimeExports.jsx(Input.Placeholder, { className: styles$k.placeholder, children: "Pick value" })) })) }));
     }
     return (jsxRuntimeExports.jsxs("div", { className: cn(styles$k.wrapper, className), style: { width: fullWidth ? '100%' : undefined }, children: [label && jsxRuntimeExports.jsx("label", { className: styles$k.label, children: label }), description && jsxRuntimeExports.jsx("p", { className: styles$k.description, children: description }), error && jsxRuntimeExports.jsx("p", { className: styles$k.error, children: error }), jsxRuntimeExports.jsxs(Combobox, { store: combobox, withinPortal: false, onOptionSubmit: (val) => {
                     updateValue(val);