mautourco-components 0.2.46 → 0.2.47

package/dist/components/molecules/AgeSelector/AgeSelector.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import '../../../styles/components/molecule/age-selector.css';
+export interface AgeSelectorProps {
+    /** Label for the selector */
+    label: string;
+    /** Current selected age value */
+    value: number | undefined;
+    /** Callback when age changes */
+    onChange: (age: number) => void;
+    /** Available age range */
+    ageRange: number[];
+    /** Whether the field is required */
+    required?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Placeholder text */
+    placeholder?: string;
+}
+declare const AgeSelector: React.FC<AgeSelectorProps>;
+export default AgeSelector;

package/dist/components/molecules/AgeSelector/AgeSelector.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import '../../../styles/components/molecule/age-selector.css';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+var AgeSelector = function (_a) {
+    var label = _a.label, value = _a.value, onChange = _a.onChange, ageRange = _a.ageRange, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.placeholder, placeholder = _d === void 0 ? '--' : _d;
+    var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = useState(value !== undefined ? value.toString() : ''), inputValue = _f[0], setInputValue = _f[1];
+    var containerRef = useRef(null);
+    var inputRef = useRef(null);
+    // Sync input value when prop value changes
+    useEffect(function () {
+        setInputValue(value !== undefined ? value.toString() : '');
+    }, [value]);
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    var handleInputChange = function (e) {
+        var newValue = e.target.value;
+        // Only allow numeric input or empty string
+        if (newValue === '' || /^\d+$/.test(newValue)) {
+            setInputValue(newValue);
+            // Only update if it's a valid number within range
+            var numValue = parseInt(newValue, 10);
+            if (newValue === '') {
+                // Allow empty input - don't update onChange
+                return;
+            }
+            else if (!isNaN(numValue) && ageRange.includes(numValue)) {
+                onChange(numValue);
+            }
+        }
+    };
+    var handleInputBlur = function () {
+        // Validate and set to valid value or clear if invalid
+        var numValue = parseInt(inputValue, 10);
+        if (inputValue === '') {
+            // Keep empty if user cleared it
+            return;
+        }
+        else if (isNaN(numValue) || !ageRange.includes(numValue)) {
+            // Reset to current value if invalid
+            setInputValue(value !== undefined ? value.toString() : '');
+        }
+        else {
+            // Ensure the input value matches the validated value
+            setInputValue(numValue.toString());
+        }
+    };
+    var handleInputKeyDown = function (e) {
+        var _a;
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+    };
+    var handleSelect = function (age) {
+        var numAge = parseInt(age, 10);
+        onChange(numAge);
+        setIsOpen(false);
+        setInputValue(age);
+    };
+    var handleDropdownToggle = function () {
+        setIsOpen(!isOpen);
+    };
+    var ageOptions = ageRange.map(function (age) { return age.toString(); });
+    return (_jsxs("div", { className: "age-selector ".concat(className), ref: containerRef, children: [_jsxs(Text, { size: "sm", variant: "regular", className: "age-selector__label", children: [label, required && _jsx("span", { className: "age-selector__required", children: " *" })] }), _jsxs("div", { className: "age-selector__container", children: [_jsxs("div", { className: "age-selector__input ".concat(isOpen ? 'age-selector__input--open' : '', " ").concat(value !== undefined ? 'age-selector__input--selected' : 'age-selector__input--default'), children: [_jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", className: "age-selector__input-field", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, onFocus: function () { return setIsOpen(false); }, placeholder: placeholder, "aria-label": "".concat(label, " age") }), _jsx("button", { type: "button", className: "age-selector__dropdown-btn", onClick: function (e) {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleDropdownToggle();
+                                }, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-label": "Open age dropdown", children: _jsx(Icon, { name: "chevron-down", size: "sm", className: "age-selector__icon ".concat(isOpen ? 'age-selector__icon--open' : '') }) })] }), isOpen && (_jsx("div", { className: "age-selector__dropdown", role: "listbox", children: ageOptions.map(function (age) { return (_jsx("div", { className: "age-selector__option ".concat((value === null || value === void 0 ? void 0 : value.toString()) === age ? 'age-selector__option--selected' : ''), onClick: function () { return handleSelect(age); }, role: "option", "aria-selected": (value === null || value === void 0 ? void 0 : value.toString()) === age, children: age }, age)); }) }))] })] }));
+};
+export default AgeSelector;

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

@@ -115,7 +115,7 @@ var LocationDropdown = function (_a) {
     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(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' : '') }), _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 &&
+    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' : '') }), _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.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 = selectedValue === option.id;
                                             var isDisabled = option.disabled || disabled;

package/dist/components/organisms/PaxSelector/PaxSelector.d.ts

@@ -58,9 +58,14 @@ export interface PaxSelectorProps {
     onRemoveRoom?: (roomId: string) => void;
     /** Default pax data for single room mode (will trigger onChange on mount) */
     defaultPaxData?: PaxData;
+    /** Whether the selector is disabled */
+    disabled?: boolean;
     /** Whether to scroll to the input when the dropdown opens */
     scrollOnOpen?: boolean;
+    /** Age range for child categories */
+    ageRange?: number[];
 }
 export declare const DEFAULT_PAX_DATA_WITH_ADULTS: PaxData;
+export declare const CHILD_CATEGORY_AGES: number[];
 declare const PaxSelector: React.FC<PaxSelectorProps>;
 export default PaxSelector;

package/dist/components/organisms/PaxSelector/PaxSelector.js

@@ -19,10 +19,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { scrollIntoViewOnOpen } from '../../../lib/utils';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
+import AgeSelector from '../../molecules/AgeSelector/AgeSelector';
 var DEFAULT_PAX_DATA = {
     adults: 0,
     teens: 0,
@@ -45,99 +46,7 @@ export var DEFAULT_PAX_DATA_WITH_ADULTS = {
 };
 var CLIENT_TYPES = ['Standard client', 'VIP', 'VVIP', 'Honeymooners'];
 // Age range for all child categories (teens, children, infants)
-var CHILD_CATEGORY_AGES = Array.from({ length: 18 }, function (_, i) { return i + 1; }); // 1-18 years
-var AgeSelector = function (_a) {
-    var label = _a.label, value = _a.value, onChange = _a.onChange, ageRange = _a.ageRange, required = _a.required;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var _c = useState(value !== undefined ? value.toString() : ''), inputValue = _c[0], setInputValue = _c[1];
-    var containerRef = useRef(null);
-    var inputRef = useRef(null);
-    // Sync input value when prop value changes
-    useEffect(function () {
-        setInputValue(value !== undefined ? value.toString() : '');
-    }, [value]);
-    useEffect(function () {
-        var handleClickOutside = function (event) {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isOpen]);
-    var handleInputChange = function (e) {
-        var newValue = e.target.value;
-        // Only allow numeric input or empty string
-        if (newValue === '' || /^\d+$/.test(newValue)) {
-            setInputValue(newValue);
-            // Only update if it's a valid number within range
-            var numValue = parseInt(newValue, 10);
-            if (newValue === '') {
-                // Allow empty input - don't update onChange
-                return;
-            }
-            else if (!isNaN(numValue) && ageRange.includes(numValue)) {
-                onChange(numValue);
-            }
-        }
-    };
-    var handleInputBlur = function () {
-        // Validate and set to valid value or clear if invalid
-        var numValue = parseInt(inputValue, 10);
-        if (inputValue === '') {
-            // Keep empty if user cleared it
-            return;
-        }
-        else if (isNaN(numValue) || !ageRange.includes(numValue)) {
-            // Reset to current value if invalid
-            setInputValue(value !== undefined ? value.toString() : '');
-        }
-        else {
-            // Ensure the input value matches the validated value
-            setInputValue(numValue.toString());
-        }
-    };
-    var handleInputKeyDown = function (e) {
-        var _a;
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-        }
-    };
-    var handleSelect = function (age) {
-        var numAge = parseInt(age, 10);
-        onChange(numAge);
-        setIsOpen(false);
-        setInputValue(age);
-    };
-    var handleDropdownToggle = function () {
-        setIsOpen(!isOpen);
-    };
-    var ageOptions = ageRange.map(function (age) { return age.toString(); });
-    var displayValue = inputValue || undefined;
-    return (_jsxs("div", { className: "pax-selector__age-selector", ref: containerRef, children: [_jsxs(Text, { size: "sm", variant: "regular", className: "pax-selector__age-label", children: [label, required && _jsx("span", { className: "pax-selector__age-required", children: " *" })] }), _jsxs("div", { className: "dropdown-container pax-selector__age-dropdown-container", children: [_jsxs("div", { className: "dropdown-input ".concat(isOpen ? 'dropdown-input--open pax-selector__age-dropdown-input--open' : '', " ").concat(value !== undefined ? 'dropdown-input--selected' : 'dropdown-input--default', " pax-selector__age-dropdown-input"), children: [_jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", className: "dropdown-input__text pax-selector__age-input-text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, onFocus: function () { return setIsOpen(false); }, placeholder: "--", "aria-label": "".concat(label, " age"), style: {
-                                    background: 'transparent',
-                                    border: 'none',
-                                    outline: 'none',
-                                    width: '100%',
-                                    cursor: 'text',
-                                } }), _jsx("button", { type: "button", className: "pax-selector__age-dropdown-btn", onClick: function (e) {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    handleDropdownToggle();
-                                }, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-label": "Open age dropdown", style: {
-                                    background: 'transparent',
-                                    border: 'none',
-                                    cursor: 'pointer',
-                                    padding: 0,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                }, children: _jsx(Icon, { name: "chevron-down", size: "sm", className: "dropdown-input__icon dropdown-input__icon--chevron" }) })] }), isOpen && (_jsx("div", { className: "dropdown-menu", role: "listbox", children: ageOptions.map(function (age) { return (_jsx("div", { className: "dropdown-option ".concat((value === null || value === void 0 ? void 0 : value.toString()) === age ? 'dropdown-option--selected' : ''), onClick: function () { return handleSelect(age); }, role: "option", "aria-selected": (value === null || value === void 0 ? void 0 : value.toString()) === age, children: age }, age)); }) }))] })] }));
-};
+export var CHILD_CATEGORY_AGES = Array.from({ length: 18 }, function (_, i) { return i + 1; }); // 1-18 years
 var StepperRow = function (_a) {
     var label = _a.label, value = _a.value, _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 99 : _c, onChange = _a.onChange;
     var handleDecrement = function () {
@@ -176,7 +85,9 @@ var ClientTypeSelector = function (_a) {
     return (_jsxs("div", { className: "pax-selector__client-type", children: [_jsx(Text, { size: "sm", variant: "regular", className: "pax-selector__client-type-label", children: "Client type" }), _jsxs("div", { className: "pax-selector__client-type-select", ref: containerRef, children: [_jsxs("button", { type: "button", className: "pax-selector__client-type-trigger", onClick: function () { return setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "listbox", children: [_jsxs("div", { className: "pax-selector__client-type-content", children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__client-type-icon" }), _jsx("span", { className: "pax-selector__client-type-text", children: value })] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "pax-selector__client-type-chevron ".concat(isOpen ? 'pax-selector__client-type-chevron--open' : '') })] }), isOpen && (_jsx("div", { className: "pax-selector__client-type-dropdown", role: "listbox", children: CLIENT_TYPES.map(function (type) { return (_jsxs("button", { type: "button", className: "pax-selector__client-type-option ".concat(value === type ? 'pax-selector__client-type-option--selected' : ''), onClick: function () { return handleSelect(type); }, role: "option", "aria-selected": value === type, children: [_jsx(Icon, { name: "user-icon", size: "sm" }), type] }, type)); }) }))] })] }));
 };
 var RoomEditor = function (_a) {
-    var room = _a.room, roomNumber = _a.roomNumber, showRemove = _a.showRemove, maxAdults = _a.maxAdults, maxTeens = _a.maxTeens, maxChildren = _a.maxChildren, maxInfants = _a.maxInfants, onChange = _a.onChange, onRemove = _a.onRemove;
+    var room = _a.room, roomNumber = _a.roomNumber, showRemove = _a.showRemove, maxAdults = _a.maxAdults, maxTeens = _a.maxTeens, maxChildren = _a.maxChildren, maxInfants = _a.maxInfants, onChange = _a.onChange, onRemove = _a.onRemove, scrollToRef = _a.scrollToRef, ageRange = _a.ageRange;
+    var roomAgesSectionRef = useRef(null);
+    var previousRoomCounts = useRef({ teens: 0, children: 0, infants: 0 });
     var handleFieldChange = function (field, value) {
         var _a;
         onChange(__assign(__assign({}, room), (_a = {}, _a[field] = value, _a)));
@@ -186,6 +97,33 @@ var RoomEditor = function (_a) {
         ages[index] = age;
         handleFieldChange(category, ages);
     };
+    // Scroll to age section when new age inputs are added in this room
+    useEffect(function () {
+        var prev = previousRoomCounts.current;
+        var curr = {
+            teens: room.teens,
+            children: room.children,
+            infants: room.infants,
+        };
+        // Check if any count increased
+        var hasIncrease = curr.teens > prev.teens ||
+            curr.children > prev.children ||
+            curr.infants > prev.infants;
+        if (hasIncrease && roomAgesSectionRef.current) {
+            // Scroll to the age section after a short delay to ensure DOM is updated
+            setTimeout(function () {
+                if (roomAgesSectionRef.current) {
+                    roomAgesSectionRef.current.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                        inline: 'nearest',
+                    });
+                }
+            }, 100);
+        }
+        // Update previous counts
+        previousRoomCounts.current = curr;
+    }, [room.teens, room.children, room.infants]);
     // Generate age arrays based on counts
     useEffect(function () {
         var teenAges = room.teenAges || [];
@@ -224,34 +162,37 @@ var RoomEditor = function (_a) {
     var teenAgeChunks = chunkAges(room.teenAges || [], 'Teen');
     var childAgeChunks = chunkAges(room.childAges || [], 'Child');
     var infantAgeChunks = chunkAges(room.infantAges || [], 'Infant');
-    return (_jsxs("div", { className: "pax-selector__room-container", children: [_jsxs("div", { className: "pax-selector__room-header", children: [_jsxs("div", { className: "pax-selector__room-title", children: [_jsxs(Text, { size: "lg", variant: "bold", color: "accent", className: "pax-selector__room-name", children: ["Room ", roomNumber] }), _jsx(Icon, { name: "home", size: "md", className: "pax-selector__room-icon" })] }), showRemove && (_jsxs("button", { type: "button", className: "pax-selector__room-remove", onClick: onRemove, "aria-label": "Remove room ".concat(roomNumber), children: [_jsx(Icon, { name: "close", size: "sm", className: "pax-selector__room-remove-icon" }), _jsx("span", { className: "pax-selector__room-remove-text", children: "Remove" })] }))] }), _jsxs("div", { className: "pax-selector__room-content", children: [_jsxs("div", { className: "pax-selector__steppers", children: [_jsx(StepperRow, { label: "Adult", value: room.adults, max: maxAdults, onChange: function (val) { return handleFieldChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: room.teens, max: maxTeens, onChange: function (val) { return handleFieldChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: room.children, max: maxChildren, onChange: function (val) { return handleFieldChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: room.infants, max: maxInfants, onChange: function (val) { return handleFieldChange('infants', val); } })] }), (room.teens > 0 || room.children > 0 || room.infants > 0) && (_jsxs("div", { className: "pax-selector__age-section", children: [_jsx(Text, { size: "base", variant: "bold", color: "default", className: "pax-selector__age-section-title", children: "Please specify the age :" }), _jsxs("div", { className: "pax-selector__age-groups", children: [room.teens > 0 &&
-                                        teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", { className: "pax-selector__age-row", children: chunk.map(function (age, ageIndex) {
+    return (_jsxs("div", { className: "pax-selector__room-container", ref: scrollToRef, children: [_jsxs("div", { className: "pax-selector__room-header", children: [_jsxs("div", { className: "pax-selector__room-title", children: [_jsxs(Text, { size: "lg", variant: "bold", color: "accent", className: "pax-selector__room-name", children: ["Room ", roomNumber] }), _jsx(Icon, { name: "home", size: "md", className: "pax-selector__room-icon" })] }), showRemove && (_jsxs("button", { type: "button", className: "pax-selector__room-remove", onClick: onRemove, "aria-label": "Remove room ".concat(roomNumber), children: [_jsx(Icon, { name: "close", size: "sm", className: "pax-selector__room-remove-icon" }), _jsx("span", { className: "pax-selector__room-remove-text", children: "Remove" })] }))] }), _jsxs("div", { className: "pax-selector__room-content", children: [_jsxs("div", { className: "pax-selector__steppers", children: [_jsx(StepperRow, { label: "Adult", value: room.adults, max: maxAdults, onChange: function (val) { return handleFieldChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: room.teens, max: maxTeens, onChange: function (val) { return handleFieldChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: room.children, max: maxChildren, onChange: function (val) { return handleFieldChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: room.infants, max: maxInfants, onChange: function (val) { return handleFieldChange('infants', val); } })] }), (room.teens > 0 || room.children > 0 || room.infants > 0) && (_jsxs("div", { className: "pax-selector__age-section", ref: roomAgesSectionRef, children: [_jsx(Text, { size: "base", variant: "bold", color: "default", className: "pax-selector__age-section-title", children: "Please specify the age :" }), _jsxs("div", { className: "pax-selector__age-groups", children: [room.teens > 0 &&
+                                        teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                 return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) {
                                                         return handleAgeChange('teenAges', actualIndex, selectedAge);
-                                                    }, ageRange: CHILD_CATEGORY_AGES, required: true }, "teen-".concat(actualIndex)));
+                                                    }, ageRange: ageRange, required: true }, "teen-".concat(actualIndex)));
                                             }) }, "teen-chunk-".concat(chunkIndex))); }), room.children > 0 &&
-                                        childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", { className: "pax-selector__age-row", children: chunk.map(function (age, ageIndex) {
+                                        childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                 return (_jsx(AgeSelector, { label: "Child", value: age, onChange: function (selectedAge) {
                                                         return handleAgeChange('childAges', actualIndex, selectedAge);
-                                                    }, ageRange: CHILD_CATEGORY_AGES, required: true }, "child-".concat(actualIndex)));
+                                                    }, ageRange: ageRange, required: true }, "child-".concat(actualIndex)));
                                             }) }, "child-chunk-".concat(chunkIndex))); }), room.infants > 0 &&
-                                        infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", { className: "pax-selector__age-row", children: chunk.map(function (age, ageIndex) {
+                                        infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                 return (_jsx(AgeSelector, { label: "Infant", value: age, onChange: function (selectedAge) {
                                                         return handleAgeChange('infantAges', actualIndex, selectedAge);
-                                                    }, ageRange: CHILD_CATEGORY_AGES, required: true }, "infant-".concat(actualIndex)));
+                                                    }, ageRange: ageRange, required: true }, "infant-".concat(actualIndex)));
                                             }) }, "infant-chunk-".concat(chunkIndex))); })] })] })), _jsx(ClientTypeSelector, { value: room.clientType, onChange: function (val) { return handleFieldChange('clientType', val); } })] })] }));
 };
 var PaxSelector = function (_a) {
-    var _b = _a.label, label = _b === void 0 ? 'Number of pax' : _b, value = _a.value, onChange = _a.onChange, onAddRoom = _a.onAddRoom, onDone = _a.onDone, _c = _a.placeholder, placeholder = _c === void 0 ? 'Select pax' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.maxAdults, maxAdults = _e === void 0 ? 10 : _e, _f = _a.maxTeens, maxTeens = _f === void 0 ? 10 : _f, _g = _a.maxChildren, maxChildren = _g === void 0 ? 10 : _g, _h = _a.maxInfants, maxInfants = _h === void 0 ? 10 : _h, _j = _a.showAddRoom, showAddRoom = _j === void 0 ? true : _j, _k = _a.multipleRooms, multipleRooms = _k === void 0 ? false : _k, defaultRooms = _a.defaultRooms, onRoomsChange = _a.onRoomsChange, onRemoveRoom = _a.onRemoveRoom, _l = _a.defaultPaxData, defaultPaxData = _l === void 0 ? DEFAULT_PAX_DATA_WITH_ADULTS : _l, _m = _a.scrollOnOpen, scrollOnOpen = _m === void 0 ? false : _m;
-    var _o = useState(false), isOpen = _o[0], setIsOpen = _o[1];
-    var _p = useState(value || defaultPaxData || DEFAULT_PAX_DATA), internalData = _p[0], setInternalData = _p[1];
-    var _q = useState(defaultRooms || [__assign(__assign({}, DEFAULT_PAX_DATA), { roomId: '1' })]), rooms = _q[0], setRooms = _q[1];
+    var _b = _a.label, label = _b === void 0 ? 'Number of pax' : _b, value = _a.value, onChange = _a.onChange, onAddRoom = _a.onAddRoom, onDone = _a.onDone, _c = _a.placeholder, placeholder = _c === void 0 ? 'Select pax' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.maxAdults, maxAdults = _e === void 0 ? 10 : _e, _f = _a.maxTeens, maxTeens = _f === void 0 ? 10 : _f, _g = _a.maxChildren, maxChildren = _g === void 0 ? 10 : _g, _h = _a.maxInfants, maxInfants = _h === void 0 ? 10 : _h, _j = _a.showAddRoom, showAddRoom = _j === void 0 ? true : _j, _k = _a.multipleRooms, multipleRooms = _k === void 0 ? false : _k, defaultRooms = _a.defaultRooms, onRoomsChange = _a.onRoomsChange, onRemoveRoom = _a.onRemoveRoom, _l = _a.defaultPaxData, defaultPaxData = _l === void 0 ? DEFAULT_PAX_DATA_WITH_ADULTS : _l, _m = _a.ageRange, ageRange = _m === void 0 ? CHILD_CATEGORY_AGES : _m, _o = _a.scrollOnOpen, scrollOnOpen = _o === void 0 ? false : _o, _p = _a.disabled, disabled = _p === void 0 ? false : _p;
+    var _q = useState(false), isOpen = _q[0], setIsOpen = _q[1];
+    var _r = useState(value || defaultPaxData || DEFAULT_PAX_DATA), internalData = _r[0], setInternalData = _r[1];
+    var _s = useState(defaultRooms || [__assign(__assign({}, DEFAULT_PAX_DATA), { roomId: '1' })]), rooms = _s[0], setRooms = _s[1];
     var containerRef = useRef(null);
     var triggerRef = useRef(null);
     var hasInitialized = useRef(false);
+    var lastRoomRef = useRef(null);
+    var agesSectionRef = useRef(null);
+    var previousCounts = useRef({ teens: 0, children: 0, infants: 0 });
     // Sync internal data with external value prop
     useEffect(function () {
         if (value && !multipleRooms) {
@@ -329,6 +270,41 @@ var PaxSelector = function (_a) {
     useEffect(function () {
         scrollIntoViewOnOpen(triggerRef, isOpen, scrollOnOpen);
     }, [isOpen, scrollOnOpen]);
+    // Scroll to age section when new age inputs are added (single room mode)
+    useEffect(function () {
+        if (!multipleRooms && isOpen) {
+            var prev = previousCounts.current;
+            var curr = {
+                teens: internalData.teens,
+                children: internalData.children,
+                infants: internalData.infants,
+            };
+            // Check if any count increased
+            var hasIncrease = curr.teens > prev.teens ||
+                curr.children > prev.children ||
+                curr.infants > prev.infants;
+            if (hasIncrease && agesSectionRef.current) {
+                // Scroll to the age section after a short delay to ensure DOM is updated
+                setTimeout(function () {
+                    if (agesSectionRef.current) {
+                        agesSectionRef.current.scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'nearest',
+                            inline: 'nearest',
+                        });
+                    }
+                }, 100);
+            }
+            // Update previous counts
+            previousCounts.current = curr;
+        }
+    }, [
+        internalData.teens,
+        internalData.children,
+        internalData.infants,
+        multipleRooms,
+        isOpen,
+    ]);
     var handleDataChange = function (field, newValue) {
         var _a;
         var newData = __assign(__assign({}, internalData), (_a = {}, _a[field] = newValue, _a));
@@ -357,6 +333,16 @@ var PaxSelector = function (_a) {
         setRooms(updatedRooms);
         onRoomsChange === null || onRoomsChange === void 0 ? void 0 : onRoomsChange(updatedRooms);
         onAddRoom === null || onAddRoom === void 0 ? void 0 : onAddRoom();
+        // Scroll to the newly added room after a short delay
+        setTimeout(function () {
+            if (lastRoomRef.current) {
+                lastRoomRef.current.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'nearest',
+                });
+            }
+        }, 100);
     };
     var handleRemoveRoom = function (roomId) {
         var updatedRooms = rooms.filter(function (room) { return room.roomId !== roomId; });
@@ -386,11 +372,11 @@ var PaxSelector = function (_a) {
         return "".concat(total, " pax");
     };
     var hasPax = getTotalPax() > 0;
-    return (_jsxs("div", { className: "pax-selector ".concat(className), ref: containerRef, children: [_jsxs("button", { ref: triggerRef, type: "button", className: "pax-selector__trigger", onClick: function () { return setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "true", children: [_jsx(Text, { size: "sm", variant: "regular", className: "pax-selector__label", children: label }), _jsxs("div", { className: "pax-selector__input ".concat(isOpen ? 'pax-selector__input--active' : ''), children: [_jsxs("div", { className: "pax-selector__input-content", children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__input-icon" }), _jsx("span", { className: "pax-selector__input-text ".concat(!hasPax ? 'pax-selector__input-placeholder' : ''), children: getDisplayText() })] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "pax-selector__chevron ".concat(isOpen ? 'pax-selector__chevron--open' : '') })] })] }), isOpen && (_jsxs("div", { className: "pax-selector__dropdown", children: [multipleRooms ? (_jsxs(_Fragment, { children: [showAddRoom && (_jsxs("button", { type: "button", className: "pax-selector__add-room", onClick: handleAddRoom, children: [_jsx(Icon, { name: "home", size: "sm", className: "pax-selector__add-room-icon" }), "Add a room", _jsx(Icon, { name: "plus", size: "sm", className: "pax-selector__add-room-icon" })] })), _jsx("div", { className: "pax-selector__rooms", children: rooms.map(function (room, index) { return (_jsx(RoomEditor, { room: room, roomNumber: index + 1, showRemove: rooms.length > 1, maxAdults: maxAdults, maxTeens: maxTeens, maxChildren: maxChildren, maxInfants: maxInfants, onChange: function (updatedRoom) { return handleRoomChange(room.roomId, updatedRoom); }, onRemove: function () { return handleRemoveRoom(room.roomId); } }, room.roomId)); }) })] })) : (
+    return (_jsxs("div", { className: "pax-selector ".concat(disabled ? 'pax-selector--disabled' : '', " ").concat(className), ref: containerRef, children: [_jsxs("button", { ref: triggerRef, type: "button", className: "pax-selector__trigger", onClick: function () { return !disabled && setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "true", disabled: disabled, children: [_jsx(Text, { size: "sm", variant: "regular", className: "pax-selector__label", children: label }), _jsxs("div", { className: "pax-selector__input ".concat(isOpen ? 'pax-selector__input--active' : '', " ").concat(disabled ? 'pax-selector__input--disabled' : ''), children: [_jsxs("div", { className: "pax-selector__input-content", children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__input-icon" }), _jsx("span", { className: "pax-selector__input-text ".concat(!hasPax ? 'pax-selector__input-placeholder' : ''), children: getDisplayText() })] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "pax-selector__chevron ".concat(isOpen ? 'pax-selector__chevron--open' : '') })] })] }), isOpen && (_jsxs("div", { className: "pax-selector__dropdown", children: [multipleRooms ? (_jsxs(_Fragment, { children: [showAddRoom && (_jsxs("button", { type: "button", className: "pax-selector__add-room", onClick: handleAddRoom, children: [_jsx(Icon, { name: "home", size: "sm", className: "pax-selector__add-room-icon" }), "Add a room", _jsx(Icon, { name: "plus", size: "sm", className: "pax-selector__add-room-icon" })] })), _jsx("div", { className: "pax-selector__rooms", children: rooms.map(function (room, index) { return (_jsx(RoomEditor, { room: room, roomNumber: index + 1, showRemove: rooms.length > 1, maxAdults: maxAdults, maxTeens: maxTeens, maxChildren: maxChildren, maxInfants: maxInfants, onChange: function (updatedRoom) { return handleRoomChange(room.roomId, updatedRoom); }, onRemove: function () { return handleRemoveRoom(room.roomId); }, scrollToRef: index === rooms.length - 1 ? lastRoomRef : undefined, ageRange: ageRange }, room.roomId)); }) })] })) : (
                     /* Single Room Mode */
                     _jsxs(_Fragment, { children: [_jsxs("div", { className: "pax-selector__steppers", children: [_jsx(StepperRow, { label: "Adult", value: internalData.adults, max: maxAdults, onChange: function (val) { return handleDataChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: internalData.teens, max: maxTeens, onChange: function (val) { return handleDataChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: internalData.children, max: maxChildren, onChange: function (val) { return handleDataChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: internalData.infants, max: maxInfants, onChange: function (val) { return handleDataChange('infants', val); } })] }), (internalData.teens > 0 ||
                                 internalData.children > 0 ||
-                                internalData.infants > 0) && (_jsxs("div", { className: "pax-selector__age-section", children: [_jsx(Text, { size: "base", variant: "bold", color: "default", className: "pax-selector__age-section-title", children: "Please specify the age :" }), _jsx("div", { className: "pax-selector__age-groups", children: (function () {
+                                internalData.infants > 0) && (_jsxs("div", { className: "pax-selector__age-section", ref: agesSectionRef, children: [_jsx(Text, { size: "base", variant: "bold", color: "default", className: "pax-selector__age-section-title", children: "Please specify the age :" }), _jsx("div", { className: "pax-selector__age-groups", children: (function () {
                                             var chunkAges = function (ages, category) {
                                                 var chunks = [];
                                                 for (var i = 0; i < ages.length; i += 2) {
@@ -407,23 +393,23 @@ var PaxSelector = function (_a) {
                                                 handleDataChange(category, ages);
                                             };
                                             return (_jsxs(_Fragment, { children: [internalData.teens > 0 &&
-                                                        teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", { className: "pax-selector__age-row", children: chunk.map(function (age, ageIndex) {
+                                                        teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
                                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                                 return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) {
                                                                         return handleAgeChange('teenAges', actualIndex, selectedAge);
-                                                                    }, ageRange: CHILD_CATEGORY_AGES, required: true }, "teen-".concat(actualIndex)));
+                                                                    }, ageRange: ageRange, required: true }, "teen-".concat(actualIndex)));
                                                             }) }, "teen-chunk-".concat(chunkIndex))); }), internalData.children > 0 &&
-                                                        childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", { className: "pax-selector__age-row", children: chunk.map(function (age, ageIndex) {
+                                                        childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
                                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                                 return (_jsx(AgeSelector, { label: "Child", value: age, onChange: function (selectedAge) {
                                                                         return handleAgeChange('childAges', actualIndex, selectedAge);
-                                                                    }, ageRange: CHILD_CATEGORY_AGES, required: true }, "child-".concat(actualIndex)));
+                                                                    }, ageRange: ageRange, required: true }, "child-".concat(actualIndex)));
                                                             }) }, "child-chunk-".concat(chunkIndex))); }), internalData.infants > 0 &&
-                                                        infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", { className: "pax-selector__age-row", children: chunk.map(function (age, ageIndex) {
+                                                        infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
                                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                                 return (_jsx(AgeSelector, { label: "Infant", value: age, onChange: function (selectedAge) {
                                                                         return handleAgeChange('infantAges', actualIndex, selectedAge);
-                                                                    }, ageRange: CHILD_CATEGORY_AGES, required: true }, "infant-".concat(actualIndex)));
+                                                                    }, ageRange: ageRange, required: true }, "infant-".concat(actualIndex)));
                                                             }) }, "infant-chunk-".concat(chunkIndex))); })] }));
                                         })() })] })), _jsx(ClientTypeSelector, { value: internalData.clientType, onChange: function (val) { return handleDataChange('clientType', val); } })] })), _jsxs("div", { className: "pax-selector__actions", children: [_jsx("button", { type: "button", className: "pax-selector__clear-btn", onClick: handleClear, children: "Clear Pax" }), _jsx("button", { type: "button", className: "pax-selector__done-btn", onClick: handleDone, children: "Done" })] })] }))] }));
 };

package/dist/components/organisms/RoundTrip/RoundTrip.d.ts

@@ -51,6 +51,8 @@ export interface RoundTripProps {
     className?: string;
     /** Whether to check if inputs are empty */
     checkEmpty?: boolean;
+    /** Whether to scroll to the input when the calendar opens */
+    scrollOnOpen?: boolean;
 }
 declare const RoundTrip: React.FC<RoundTripProps>;
 export default RoundTrip;

package/dist/components/organisms/RoundTrip/RoundTrip.js

@@ -26,12 +26,12 @@ import LocationDropdown from "../../molecules/LocationDropdown/LocationDropdown"
 import DateTimePicker from "../DateTimePicker/DateTimePicker";
 import PaxSelector from "../PaxSelector/PaxSelector";
 var RoundTrip = function (_a) {
-    var id = _a.id, paxData = _a.paxData, arrivalDate = _a.arrivalDate, departureDate = _a.departureDate, pickupDropoffPoint = _a.pickupDropoffPoint, accommodation = _a.accommodation, _b = _a.locations, locations = _b === void 0 ? { options: [], groups: [] } : _b, onPaxChange = _a.onPaxChange, onDatesChange = _a.onDatesChange, onPickupDropoffChange = _a.onPickupDropoffChange, onAccommodationChange = _a.onAccommodationChange, onChange = _a.onChange, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.checkEmpty, checkEmpty = _d === void 0 ? false : _d;
-    var _e = useState(paxData), internalPaxData = _e[0], setInternalPaxData = _e[1];
-    var _f = useState(arrivalDate), internalArrivalDate = _f[0], setInternalArrivalDate = _f[1];
-    var _g = useState(departureDate), internalDepartureDate = _g[0], setInternalDepartureDate = _g[1];
-    var _h = useState(null), internalPickupDropoffPoint = _h[0], setInternalPickupDropoffPoint = _h[1];
-    var _j = useState(null), internalAccommodation = _j[0], setInternalAccommodation = _j[1];
+    var id = _a.id, paxData = _a.paxData, arrivalDate = _a.arrivalDate, departureDate = _a.departureDate, pickupDropoffPoint = _a.pickupDropoffPoint, accommodation = _a.accommodation, _b = _a.locations, locations = _b === void 0 ? { options: [], groups: [] } : _b, onPaxChange = _a.onPaxChange, onDatesChange = _a.onDatesChange, onPickupDropoffChange = _a.onPickupDropoffChange, onAccommodationChange = _a.onAccommodationChange, onChange = _a.onChange, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.checkEmpty, checkEmpty = _d === void 0 ? false : _d, _e = _a.scrollOnOpen, scrollOnOpen = _e === void 0 ? false : _e;
+    var _f = useState(paxData), internalPaxData = _f[0], setInternalPaxData = _f[1];
+    var _g = useState(arrivalDate), internalArrivalDate = _g[0], setInternalArrivalDate = _g[1];
+    var _h = useState(departureDate), internalDepartureDate = _h[0], setInternalDepartureDate = _h[1];
+    var _j = useState(null), internalPickupDropoffPoint = _j[0], setInternalPickupDropoffPoint = _j[1];
+    var _k = useState(null), internalAccommodation = _k[0], setInternalAccommodation = _k[1];
     // Helper function to get all locations (from options and groups)
     var getAllLocations = function (options, groups) {
         var groupOptions = groups.flatMap(function (group) { return group.options; });
@@ -184,6 +184,6 @@ var RoundTrip = function (_a) {
     var isAccommodationEmpty = checkEmpty && !internalAccommodation;
     var pickupDropoffOptions = getPickupDropoffOptions();
     var accommodationOptions = getAccommodationOptions();
-    return (_jsx("div", { className: "round-trip ".concat(className), "data-round-trip-id": id, children: _jsxs("div", { className: "round-trip__content", children: [_jsx("div", { className: "round-trip__field round-trip__field--pax ".concat(isPaxEmpty ? 'round-trip__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '' }) }), _jsxs("div", { className: "round-trip__field round-trip__field--dates", children: [_jsx(Text, { size: "sm", variant: "regular", className: "round-trip__field-label", children: "Arrival date - Departure date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY - DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 2, iconBGFull: false, showChevron: true, onValueChange: handleDateRangeChange, selectionMode: "range", defaultValue: internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined, inputClassName: "round-trip__date-picker--input", state: isDateEmpty ? 'error' : undefined })] }), _jsx("div", { className: "round-trip__field round-trip__field--pickup-dropoff", children: _jsx(LocationDropdown, { label: "Pick up / Drop-off point", options: pickupDropoffOptions.options, groups: pickupDropoffOptions.groups, selectedValue: (internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) || null, onSelectionChange: handlePickupDropoffChange, placeholder: "Select pick-up / drop-off point", direction: undefined, type: "airport-port", showGroupTitles: true, error: isPickupDropoffEmpty }) }), _jsx("div", { className: "round-trip__field round-trip__field--accommodation", children: _jsx(LocationDropdown, { label: "Accommodation", options: accommodationOptions.options, groups: accommodationOptions.groups, selectedValue: (internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) || null, onSelectionChange: handleAccommodationChange, placeholder: "Select accommodation", direction: "dropoff", type: "accommodation", showGroupTitles: false, error: isAccommodationEmpty }) })] }) }));
+    return (_jsx("div", { className: "round-trip ".concat(className), "data-round-trip-id": id, children: _jsxs("div", { className: "round-trip__content", children: [_jsx("div", { className: "round-trip__field round-trip__field--pax ".concat(isPaxEmpty ? 'round-trip__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', scrollOnOpen: scrollOnOpen }) }), _jsxs("div", { className: "round-trip__field round-trip__field--dates", children: [_jsx(Text, { size: "sm", variant: "regular", className: "round-trip__field-label", children: "Arrival date - Departure date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY - DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 2, iconBGFull: false, showChevron: true, onValueChange: handleDateRangeChange, selectionMode: "range", defaultValue: internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined, inputClassName: "round-trip__date-picker--input", state: isDateEmpty ? 'error' : undefined, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "round-trip__field round-trip__field--pickup-dropoff", children: _jsx(LocationDropdown, { label: "Pick up / Drop-off point", options: pickupDropoffOptions.options, groups: pickupDropoffOptions.groups, selectedValue: (internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) || null, onSelectionChange: handlePickupDropoffChange, placeholder: "Select pick-up / drop-off point", direction: undefined, type: "airport-port", showGroupTitles: true, error: isPickupDropoffEmpty, scrollOnOpen: scrollOnOpen }) }), _jsx("div", { className: "round-trip__field round-trip__field--accommodation", children: _jsx(LocationDropdown, { label: "Accommodation", options: accommodationOptions.options, groups: accommodationOptions.groups, selectedValue: (internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) || null, onSelectionChange: handleAccommodationChange, placeholder: "Select accommodation", direction: "dropoff", type: "accommodation", showGroupTitles: false, error: isAccommodationEmpty, scrollOnOpen: scrollOnOpen }) })] }) }));
 };
 export default RoundTrip;

package/dist/components/organisms/SearchBarTransfer/SearchBarTransfer.d.ts

@@ -28,8 +28,12 @@ export interface SearchBarTransferProps {
     onSearch?: (data: SearchBarTransferData) => void;
     /** Callback when data changes */
     onChange?: (data: SearchBarTransferData) => void;
+    /** Callback when a transfer line is removed */
+    onRemove?: (index: number, transferLine: TransferLineData) => void;
     /** Additional CSS classes */
     className?: string;
+    /** Whether to scroll to the input when the calendar opens */
+    scrollOnOpen?: boolean;
 }
 declare const SearchBarTransfer: React.FC<SearchBarTransferProps>;
 export default SearchBarTransfer;