@tmlmobilidade/ui 20250128.1609.43 → 20250128.1631.30

package/dist/cjs/index.js

@@ -6,11 +6,11 @@ var core = require('@mantine/core');
 var clsx = require('clsx');
 var luxon = require('luxon');
 var iconsReact = require('@tabler/icons-react');
+var reactViewportList = require('react-viewport-list');
 var dates = require('@mantine/dates');
 var modals = require('@mantine/modals');
 var notifications = require('@mantine/notifications');
 var hooks = require('@mantine/hooks');
-var reactViewportList = require('react-viewport-list');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -860,7 +860,7 @@ 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","dropdownWrapper":"styles-module_dropdownWrapper__guQYa"};
 
 function ComboboxComponent(props) {
-    const { multiple = false, searchable = false, autoComplete = false, onChange, data = [], clearable = false, label, description, fullWidth = false, className, ...rest } = props;
+    const { multiple = false, searchable = false, autoComplete = false, onChange, data = [], clearable = false, label, description, fullWidth = false, maxHeight = 200, className, ...rest } = props;
     // Setup Combobox store
     const combobox = core.useCombobox({
         onDropdownClose: () => combobox.resetSelectedOption(),
@@ -891,7 +891,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) => getValue(v) === getValue(val))) {
                 updatedValue = value.filter((v) => getValue(v) !== getValue(val));
             }
             else {
@@ -925,9 +925,15 @@ function ComboboxComponent(props) {
      * 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;
+        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.
@@ -940,7 +946,9 @@ function ComboboxComponent(props) {
     }
     // Render Clear Button
     function renderClearButton() {
-        if (clearable && value && (Array.isArray(value) ? value.length > 0 : true)) {
+        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 });
@@ -955,7 +963,10 @@ function ComboboxComponent(props) {
     // 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))));
+        return (jsxRuntimeExports.jsx(reactViewportList.ViewportList, { itemMargin: maxHeight, items: filtered, children: (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() {
@@ -978,16 +989,12 @@ function ComboboxComponent(props) {
                 }, 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: 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;
+                    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..." })) }) })] })] }));
+                }, 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..." })) }) })] })] }));
 }
 
 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"};