mautourco-components 0.2.103 → 0.2.104

package/dist/components/molecules/LocationDropdown/LocationDropdown.js

@@ -29,6 +29,7 @@ var LocationDropdown = function (_a) {
     var _q = useState(false), isOpen = _q[0], setIsOpen = _q[1];
     var _r = useState(''), searchQuery = _r[0], setSearchQuery = _r[1];
     var dropdownRef = useRef(null);
+    var dropdownPanelRef = useRef(null);
     var inputRef = useRef(null);
     var searchInputRef = useRef(null);
     // Close dropdown when clicking outside
@@ -45,7 +46,11 @@ var LocationDropdown = function (_a) {
     }, []);
     // Scroll to input when dropdown opens (if scrollOnOpen is true)
     useEffect(function () {
-        scrollIntoViewOnOpen(inputRef, isOpen, scrollOnOpen);
+        setTimeout(function () {
+            if (dropdownPanelRef.current) {
+                scrollIntoViewOnOpen(dropdownPanelRef, isOpen, scrollOnOpen);
+            }
+        }, 10);
     }, [isOpen, scrollOnOpen]);
     // Reset search when dropdown closes
     useEffect(function () {
@@ -88,9 +93,7 @@ var LocationDropdown = function (_a) {
         if (!searchQuery.trim())
             return opts;
         var query = searchQuery.toLowerCase();
-        return opts.filter(function (option) {
-            return option.label.toLowerCase().includes(query);
-        });
+        return opts.filter(function (option) { return option.label.toLowerCase().includes(query); });
     };
     var getSelectedOption = function () {
         if (selectedValue) {
@@ -156,13 +159,15 @@ var LocationDropdown = function (_a) {
     var displayText = selectedOption ? selectedOption.label : placeholder;
     // Prepare all options (flat or grouped) and filter them
     var allOptionsRaw = groups.length > 0 ? groups : [{ id: 'default', label: '', options: options }];
-    var allOptions = allOptionsRaw.map(function (group) { return (__assign(__assign({}, group), { options: filterOptions(group.options) })); }).filter(function (group) { return group.options.length > 0; });
+    var allOptions = allOptionsRaw
+        .map(function (group) { return (__assign(__assign({}, group), { options: filterOptions(group.options) })); })
+        .filter(function (group) { return group.options.length > 0; });
     // Skeleton loader component
     var SkeletonOption = function () { return (_jsxs("div", { className: "location-dropdown__option location-dropdown__option--skeleton", children: [_jsx("div", { className: "location-dropdown__skeleton-icon" }), _jsx("div", { className: "location-dropdown__skeleton-text" })] })); };
     // Render skeleton loading state
     var renderSkeletonLoading = function () { return (_jsx("div", { className: "location-dropdown__panel", children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: _jsx("div", { className: "location-dropdown__group", children: _jsx("div", { className: "location-dropdown__group-options", children: __spreadArray([], Array(5), true).map(function (_, index) { return (_jsx(SkeletonOption, {}, "skeleton-".concat(index))); }) }) }) }) }) })); };
     return (_jsxs("div", { ref: dropdownRef, className: "location-dropdown location-dropdown--".concat(type, " ").concat(disabled ? 'location-dropdown--disabled' : '', " ").concat(className), children: [label && (_jsx("div", { className: "location-dropdown__label", children: _jsx(Text, { size: "sm", variant: "medium", children: label }) })), _jsxs("div", { ref: inputRef, className: "location-dropdown__input location-dropdown__input--".concat(getDropdownState()), onClick: handleToggleDropdown, children: [_jsxs("div", { className: "location-dropdown__input-content", children: [_jsx(Icon, { name: getInputIcon(), size: "sm", className: "location-dropdown__input-icon ".concat(!selectedOption ? 'location-dropdown__input-icon--placeholder' : '') }), isOpen ? (_jsx("input", { ref: searchInputRef, type: "text", className: "location-dropdown__input-text ".concat(!selectedOption && !searchQuery ? 'location-dropdown__input-text--placeholder' : ''), placeholder: displayText, value: searchQuery, onChange: handleSearchChange, onClick: function (e) { return e.stopPropagation(); }, disabled: disabled, autoFocus: true })) : (_jsx("span", { className: "location-dropdown__input-text ".concat(!selectedOption ? 'location-dropdown__input-text--placeholder' : ''), children: displayText }))] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "location-dropdown__input-chevron" })] }), isOpen &&
-                (loading ? (renderSkeletonLoading()) : (_jsx("div", { className: "location-dropdown__panel", children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: allOptions.length === 0 ? (_jsx("div", { className: "location-dropdown__no-results", children: _jsx(Text, { size: "sm", variant: "medium", children: "No locations found" }) })) : (allOptions.map(function (group, groupIndex) { return (_jsxs("div", { className: "location-dropdown__group", children: [showGroupTitles && group.label && groups.length > 0 && (_jsxs(_Fragment, { children: [groupIndex > 0 && _jsx("div", { className: "location-dropdown__divider" }), _jsx("div", { className: "location-dropdown__group-header", children: _jsx(Text, { size: "xs", variant: "bold", children: group.label }) })] })), _jsx("div", { className: "location-dropdown__group-options", children: group.options.map(function (option) {
+                (loading ? (renderSkeletonLoading()) : (_jsx("div", { className: "location-dropdown__panel", ref: dropdownPanelRef, children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: allOptions.length === 0 ? (_jsx("div", { className: "location-dropdown__no-results", children: _jsx(Text, { size: "sm", variant: "medium", children: "No locations found" }) })) : (allOptions.map(function (group, groupIndex) { return (_jsxs("div", { className: "location-dropdown__group", children: [showGroupTitles && group.label && groups.length > 0 && (_jsxs(_Fragment, { children: [groupIndex > 0 && (_jsx("div", { className: "location-dropdown__divider" })), _jsx("div", { className: "location-dropdown__group-header", children: _jsx(Text, { size: "xs", variant: "bold", children: group.label }) })] })), _jsx("div", { className: "location-dropdown__group-options", children: group.options.map(function (option) {
                                             var isSelected = effectiveSelectedValue === option.id;
                                             var isDisabled = option.disabled || disabled;
                                             return (_jsxs("div", { className: "location-dropdown__option ".concat(isSelected ? 'location-dropdown__option--selected' : '', " ").concat(isDisabled ? 'location-dropdown__option--disabled' : ''), onClick: function () { return !isDisabled && handleOptionSelect(option); }, children: [_jsx(Icon, { name: getOptionIcon(option, isSelected), size: "sm", className: "location-dropdown__option-icon" }), _jsx("span", { className: "location-dropdown__option-text", children: option.label })] }, option.id));

package/dist/lib/utils.js

@@ -21,17 +21,22 @@ export function cn() {
 export function scrollIntoViewOnOpen(elementRef, isOpen, scrollOnOpen, offset) {
     if (offset === void 0) { offset = 20; }
     if (isOpen && scrollOnOpen && elementRef.current) {
+        var bodyBottom_1 = document.body.clientHeight;
         // Use setTimeout to ensure the dropdown is rendered before scrolling
         setTimeout(function () {
             if (elementRef.current) {
                 var elementTop = elementRef.current.getBoundingClientRect().top + window.pageYOffset;
+                var elementBottom = elementRef.current.getBoundingClientRect().bottom;
+                var realBottom = elementBottom + window.scrollY;
                 // Scroll to show the element with some padding from the top
-                window.scrollTo({
-                    top: elementTop - offset,
-                    behavior: 'smooth',
-                });
+                if (realBottom > bodyBottom_1) {
+                    window.scrollTo({
+                        top: elementTop - offset,
+                        behavior: 'smooth',
+                    });
+                }
             }
-        }, 0);
+        }, 350);
     }
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.103",
+  "version": "0.2.104",
   "private": false,
   "description": "Bibliothèque de composants Mautourco pour le redesign",
   "main": "dist/index.js",

package/src/components/molecules/LocationDropdown/LocationDropdown.tsx

@@ -64,6 +64,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownPanelRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
@@ -83,7 +84,11 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
 
   // Scroll to input when dropdown opens (if scrollOnOpen is true)
   useEffect(() => {
-    scrollIntoViewOnOpen(inputRef, isOpen, scrollOnOpen);
+    setTimeout(() => {
+      if (dropdownPanelRef.current) {
+        scrollIntoViewOnOpen(dropdownPanelRef, isOpen, scrollOnOpen);
+      }
+    }, 10);
   }, [isOpen, scrollOnOpen]);
 
   // Reset search when dropdown closes
@@ -129,11 +134,9 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   // Filter locations based on search query
   const filterOptions = (opts: LocationOption[]): LocationOption[] => {
     if (!searchQuery.trim()) return opts;
-    
+
     const query = searchQuery.toLowerCase();
-    return opts.filter((option) =>
-      option.label.toLowerCase().includes(query)
-    );
+    return opts.filter((option) => option.label.toLowerCase().includes(query));
   };
 
   const getSelectedOption = (): LocationOption | null => {
@@ -201,11 +204,14 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   const displayText = selectedOption ? selectedOption.label : placeholder;
 
   // Prepare all options (flat or grouped) and filter them
-  const allOptionsRaw = groups.length > 0 ? groups : [{ id: 'default', label: '', options }];
-  const allOptions = allOptionsRaw.map((group) => ({
-    ...group,
-    options: filterOptions(group.options),
-  })).filter((group) => group.options.length > 0);
+  const allOptionsRaw =
+    groups.length > 0 ? groups : [{ id: 'default', label: '', options }];
+  const allOptions = allOptionsRaw
+    .map((group) => ({
+      ...group,
+      options: filterOptions(group.options),
+    }))
+    .filter((group) => group.options.length > 0);
 
   // Skeleton loader component
   const SkeletonOption = () => (
@@ -284,7 +290,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
         (loading ? (
           renderSkeletonLoading()
         ) : (
-          <div className="location-dropdown__panel">
+          <div className="location-dropdown__panel" ref={dropdownPanelRef}>
             <div
               className="location-dropdown__content"
               style={{ maxHeight: `${maxHeight}px` }}>
@@ -297,41 +303,43 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
                   </div>
                 ) : (
                   allOptions.map((group, groupIndex) => (
-                  <div key={group.id} className="location-dropdown__group">
-                    {showGroupTitles && group.label && groups.length > 0 && (
-                      <>
-                        {groupIndex > 0 && <div className="location-dropdown__divider" />}
-                        <div className="location-dropdown__group-header">
-                          <Text size="xs" variant="bold">
-                            {group.label}
-                          </Text>
-                        </div>
-                      </>
-                    )}
-
-                    <div className="location-dropdown__group-options">
-                      {group.options.map((option) => {
-                        const isSelected = effectiveSelectedValue === option.id;
-                        const isDisabled = option.disabled || disabled;
-
-                        return (
-                          <div
-                            key={option.id}
-                            className={`location-dropdown__option ${isSelected ? 'location-dropdown__option--selected' : ''} ${isDisabled ? 'location-dropdown__option--disabled' : ''}`}
-                            onClick={() => !isDisabled && handleOptionSelect(option)}>
-                            <Icon
-                              name={getOptionIcon(option, isSelected)}
-                              size="sm"
-                              className="location-dropdown__option-icon"
-                            />
-                            <span className="location-dropdown__option-text">
-                              {option.label}
-                            </span>
+                    <div key={group.id} className="location-dropdown__group">
+                      {showGroupTitles && group.label && groups.length > 0 && (
+                        <>
+                          {groupIndex > 0 && (
+                            <div className="location-dropdown__divider" />
+                          )}
+                          <div className="location-dropdown__group-header">
+                            <Text size="xs" variant="bold">
+                              {group.label}
+                            </Text>
                           </div>
-                        );
-                      })}
+                        </>
+                      )}
+
+                      <div className="location-dropdown__group-options">
+                        {group.options.map((option) => {
+                          const isSelected = effectiveSelectedValue === option.id;
+                          const isDisabled = option.disabled || disabled;
+
+                          return (
+                            <div
+                              key={option.id}
+                              className={`location-dropdown__option ${isSelected ? 'location-dropdown__option--selected' : ''} ${isDisabled ? 'location-dropdown__option--disabled' : ''}`}
+                              onClick={() => !isDisabled && handleOptionSelect(option)}>
+                              <Icon
+                                name={getOptionIcon(option, isSelected)}
+                                size="sm"
+                                className="location-dropdown__option-icon"
+                              />
+                              <span className="location-dropdown__option-text">
+                                {option.label}
+                              </span>
+                            </div>
+                          );
+                        })}
+                      </div>
                     </div>
-                  </div>
                   ))
                 )}
               </div>