mautourco-components 0.2.4 → 0.2.7

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

@@ -1,402 +1,402 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
-import Icon from '../../atoms/Icon/Icon';
-import { Text } from '../../atoms/Typography/Typography';
-var DEFAULT_PAX_DATA = {
-    adults: 0,
-    teens: 0,
-    children: 0,
-    infants: 0,
-    teenAges: [],
-    childAges: [],
-    infantAges: [],
-    clientType: 'Standard client',
-};
-export var DEFAULT_PAX_DATA_WITH_ADULTS = {
-    adults: 2,
-    teens: 0,
-    children: 0,
-    infants: 0,
-    teenAges: [],
-    childAges: [],
-    infantAges: [],
-    clientType: 'Standard client',
-};
-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", __assign({ className: "pax-selector__age-selector", ref: containerRef }, { children: [_jsxs(Text, __assign({ size: "sm", variant: "regular", className: "pax-selector__age-label" }, { children: [label, required && _jsx("span", __assign({ className: "pax-selector__age-required" }, { children: " *" }))] })), _jsxs("div", __assign({ className: "dropdown-container pax-selector__age-dropdown-container" }, { children: [_jsxs("div", __assign({ 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", __assign({ 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", __assign({ className: "dropdown-menu", role: "listbox" }, { children: ageOptions.map(function (age) { return (_jsx("div", __assign({ 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)); }) })))] }))] })));
-};
-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 () {
-        if (value > min) {
-            onChange(value - 1);
-        }
-    };
-    var handleIncrement = function () {
-        if (value < max) {
-            onChange(value + 1);
-        }
-    };
-    return (_jsxs("div", __assign({ className: "pax-selector__stepper" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", className: "pax-selector__stepper-label" }, { children: label })), _jsxs("div", __assign({ className: "pax-selector__stepper-controls" }, { children: [_jsx("button", __assign({ type: "button", className: "pax-selector__stepper-btn", onClick: handleDecrement, disabled: value <= min, "aria-label": "Decrease ".concat(label) }, { children: _jsx(Icon, { name: "minus", size: "sm" }) })), _jsx("span", __assign({ className: "pax-selector__stepper-count" }, { children: value })), _jsx("button", __assign({ type: "button", className: "pax-selector__stepper-btn", onClick: handleIncrement, disabled: value >= max, "aria-label": "Increase ".concat(label) }, { children: _jsx(Icon, { name: "plus", size: "sm" }) }))] }))] })));
-};
-var ClientTypeSelector = function (_a) {
-    var value = _a.value, onChange = _a.onChange;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var containerRef = useRef(null);
-    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 handleSelect = function (type) {
-        onChange(type);
-        setIsOpen(false);
-    };
-    return (_jsxs("div", __assign({ className: "pax-selector__client-type" }, { children: [_jsx(Text, __assign({ size: "sm", variant: "regular", className: "pax-selector__client-type-label" }, { children: "Client type" })), _jsxs("div", __assign({ className: "pax-selector__client-type-select", ref: containerRef }, { children: [_jsxs("button", __assign({ type: "button", className: "pax-selector__client-type-trigger", onClick: function () { return setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "listbox" }, { children: [_jsxs("div", __assign({ className: "pax-selector__client-type-content" }, { children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__client-type-icon" }), _jsx("span", __assign({ 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", __assign({ className: "pax-selector__client-type-dropdown", role: "listbox" }, { children: CLIENT_TYPES.map(function (type) { return (_jsxs("button", __assign({ 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 handleFieldChange = function (field, value) {
-        var _a;
-        onChange(__assign(__assign({}, room), (_a = {}, _a[field] = value, _a)));
-    };
-    var handleAgeChange = function (category, index, age) {
-        var ages = __spreadArray([], (room[category] || []), true);
-        ages[index] = age;
-        handleFieldChange(category, ages);
-    };
-    // Generate age arrays based on counts
-    useEffect(function () {
-        var teenAges = room.teenAges || [];
-        var childAges = room.childAges || [];
-        var infantAges = room.infantAges || [];
-        // Adjust teen ages array
-        if (teenAges.length < room.teens) {
-            handleFieldChange('teenAges', __spreadArray(__spreadArray([], teenAges, true), Array(room.teens - teenAges.length).fill(undefined), true));
-        }
-        else if (teenAges.length > room.teens) {
-            handleFieldChange('teenAges', teenAges.slice(0, room.teens));
-        }
-        // Adjust child ages array
-        if (childAges.length < room.children) {
-            handleFieldChange('childAges', __spreadArray(__spreadArray([], childAges, true), Array(room.children - childAges.length).fill(undefined), true));
-        }
-        else if (childAges.length > room.children) {
-            handleFieldChange('childAges', childAges.slice(0, room.children));
-        }
-        // Adjust infant ages array
-        if (infantAges.length < room.infants) {
-            handleFieldChange('infantAges', __spreadArray(__spreadArray([], infantAges, true), Array(room.infants - infantAges.length).fill(undefined), true));
-        }
-        else if (infantAges.length > room.infants) {
-            handleFieldChange('infantAges', infantAges.slice(0, room.infants));
-        }
-    }, [room.teens, room.children, room.infants]);
-    // Chunk ages into groups of 2 for layout
-    var chunkAges = function (ages, category) {
-        var chunks = [];
-        for (var i = 0; i < ages.length; i += 2) {
-            chunks.push(ages.slice(i, i + 2));
-        }
-        return chunks;
-    };
-    var teenAgeChunks = chunkAges(room.teenAges || [], 'Teen');
-    var childAgeChunks = chunkAges(room.childAges || [], 'Child');
-    var infantAgeChunks = chunkAges(room.infantAges || [], 'Infant');
-    return (_jsxs("div", __assign({ className: "pax-selector__room-container" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-header" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-title" }, { children: [_jsxs(Text, __assign({ size: "lg", variant: "bold", className: "pax-selector__room-name" }, { children: ["Room ", roomNumber] })), _jsx(Icon, { name: "home", size: "md", className: "pax-selector__room-icon" })] })), showRemove && (_jsxs("button", __assign({ 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", __assign({ className: "pax-selector__room-remove-text" }, { children: "Remove" }))] })))] })), _jsxs("div", __assign({ className: "pax-selector__room-content" }, { children: [_jsxs("div", __assign({ 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", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsxs("div", __assign({ className: "pax-selector__age-groups" }, { children: [room.teens > 0 && teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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)));
-                                        }) }), "teen-chunk-".concat(chunkIndex))); }), room.children > 0 && childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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)));
-                                        }) }), "child-chunk-".concat(chunkIndex))); }), room.infants > 0 && infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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)));
-                                        }) }), "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;
-    var _m = useState(false), isOpen = _m[0], setIsOpen = _m[1];
-    var _o = useState(value || defaultPaxData || DEFAULT_PAX_DATA), internalData = _o[0], setInternalData = _o[1];
-    var _p = useState(defaultRooms || [__assign(__assign({}, DEFAULT_PAX_DATA), { roomId: '1' })]), rooms = _p[0], setRooms = _p[1];
-    var containerRef = useRef(null);
-    var hasInitialized = useRef(false);
-    // Sync internal data with external value prop
-    useEffect(function () {
-        if (value && !multipleRooms) {
-            setInternalData(value);
-        }
-    }, [value, multipleRooms]);
-    // Initialize with default pax data and trigger onChange on mount
-    useEffect(function () {
-        if (!hasInitialized.current && !value && defaultPaxData && !multipleRooms && onChange) {
-            hasInitialized.current = true;
-            onChange(defaultPaxData);
-        }
-    }, [defaultPaxData, value, multipleRooms, onChange]);
-    // Manage age arrays in single mode when counts change
-    useEffect(function () {
-        if (!multipleRooms) {
-            var teenAges = internalData.teenAges || [];
-            var childAges = internalData.childAges || [];
-            var infantAges = internalData.infantAges || [];
-            var needsUpdate = false;
-            var updatedData = __assign({}, internalData);
-            // Adjust teen ages array
-            if (teenAges.length < internalData.teens) {
-                updatedData.teenAges = __spreadArray(__spreadArray([], teenAges, true), Array(internalData.teens - teenAges.length).fill(undefined), true);
-                needsUpdate = true;
-            }
-            else if (teenAges.length > internalData.teens) {
-                updatedData.teenAges = teenAges.slice(0, internalData.teens);
-                needsUpdate = true;
-            }
-            // Adjust child ages array
-            if (childAges.length < internalData.children) {
-                updatedData.childAges = __spreadArray(__spreadArray([], childAges, true), Array(internalData.children - childAges.length).fill(undefined), true);
-                needsUpdate = true;
-            }
-            else if (childAges.length > internalData.children) {
-                updatedData.childAges = childAges.slice(0, internalData.children);
-                needsUpdate = true;
-            }
-            // Adjust infant ages array
-            if (infantAges.length < internalData.infants) {
-                updatedData.infantAges = __spreadArray(__spreadArray([], infantAges, true), Array(internalData.infants - infantAges.length).fill(undefined), true);
-                needsUpdate = true;
-            }
-            else if (infantAges.length > internalData.infants) {
-                updatedData.infantAges = infantAges.slice(0, internalData.infants);
-                needsUpdate = true;
-            }
-            if (needsUpdate) {
-                setInternalData(updatedData);
-                onChange === null || onChange === void 0 ? void 0 : onChange(updatedData);
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [internalData.teens, internalData.children, internalData.infants, multipleRooms]);
-    // Handle clicks outside the dropdown
-    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 handleDataChange = function (field, newValue) {
-        var _a;
-        var newData = __assign(__assign({}, internalData), (_a = {}, _a[field] = newValue, _a));
-        setInternalData(newData);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newData);
-    };
-    var handleClear = function () {
-        if (multipleRooms) {
-            var clearedRooms = rooms.map(function (room) { return (__assign(__assign({}, DEFAULT_PAX_DATA), { roomId: room.roomId })); });
-            setRooms(clearedRooms);
-            onRoomsChange === null || onRoomsChange === void 0 ? void 0 : onRoomsChange(clearedRooms);
-        }
-        else {
-            var clearedData = __assign({}, DEFAULT_PAX_DATA);
-            setInternalData(clearedData);
-            onChange === null || onChange === void 0 ? void 0 : onChange(clearedData);
-        }
-    };
-    var handleDone = function () {
-        setIsOpen(false);
-        onDone === null || onDone === void 0 ? void 0 : onDone(multipleRooms ? rooms : internalData);
-    };
-    var handleAddRoom = function () {
-        var newRoom = __assign(__assign({}, DEFAULT_PAX_DATA), { roomId: "".concat(rooms.length + 1) });
-        var updatedRooms = __spreadArray(__spreadArray([], rooms, true), [newRoom], false);
-        setRooms(updatedRooms);
-        onRoomsChange === null || onRoomsChange === void 0 ? void 0 : onRoomsChange(updatedRooms);
-        onAddRoom === null || onAddRoom === void 0 ? void 0 : onAddRoom();
-    };
-    var handleRemoveRoom = function (roomId) {
-        var updatedRooms = rooms.filter(function (room) { return room.roomId !== roomId; });
-        setRooms(updatedRooms);
-        onRoomsChange === null || onRoomsChange === void 0 ? void 0 : onRoomsChange(updatedRooms);
-        onRemoveRoom === null || onRemoveRoom === void 0 ? void 0 : onRemoveRoom(roomId);
-    };
-    var handleRoomChange = function (roomId, updatedRoom) {
-        var updatedRooms = rooms.map(function (room) {
-            return room.roomId === roomId ? updatedRoom : room;
-        });
-        setRooms(updatedRooms);
-        onRoomsChange === null || onRoomsChange === void 0 ? void 0 : onRoomsChange(updatedRooms);
-    };
-    var getTotalPax = function () {
-        if (multipleRooms) {
-            return rooms.reduce(function (total, room) {
-                return total + room.adults + room.teens + room.children + room.infants;
-            }, 0);
-        }
-        var adults = internalData.adults, teens = internalData.teens, children = internalData.children, infants = internalData.infants;
-        return adults + teens + children + infants;
-    };
-    var getDisplayText = function () {
-        var total = getTotalPax();
-        if (total === 0) {
-            return placeholder;
-        }
-        return "".concat(total, " pax");
-    };
-    var hasPax = getTotalPax() > 0;
-    return (_jsxs("div", __assign({ className: "pax-selector ".concat(className), ref: containerRef }, { children: [_jsxs("button", __assign({ type: "button", className: "pax-selector__trigger", onClick: function () { return setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "true" }, { children: [_jsx(Text, __assign({ size: "sm", variant: "regular", className: "pax-selector__label" }, { children: label })), _jsxs("div", __assign({ className: "pax-selector__input ".concat(isOpen ? 'pax-selector__input--active' : '') }, { children: [_jsxs("div", __assign({ className: "pax-selector__input-content" }, { children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__input-icon" }), _jsx("span", __assign({ 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", __assign({ className: "pax-selector__dropdown" }, { children: [multipleRooms ? (_jsxs(_Fragment, { children: [showAddRoom && (_jsxs("button", __assign({ 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", __assign({ 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)); }) }))] })) : (
-                    /* Single Room Mode */
-                    _jsxs(_Fragment, { children: [_jsxs("div", __assign({ 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", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsx("div", __assign({ className: "pax-selector__age-groups" }, { children: (function () {
-                                            var chunkAges = function (ages, category) {
-                                                var chunks = [];
-                                                for (var i = 0; i < ages.length; i += 2) {
-                                                    chunks.push(ages.slice(i, i + 2));
-                                                }
-                                                return chunks;
-                                            };
-                                            var teenAgeChunks = chunkAges(internalData.teenAges || [], 'Teen');
-                                            var childAgeChunks = chunkAges(internalData.childAges || [], 'Child');
-                                            var infantAgeChunks = chunkAges(internalData.infantAges || [], 'Infant');
-                                            var handleAgeChange = function (category, index, age) {
-                                                var ages = __spreadArray([], (internalData[category] || []), true);
-                                                ages[index] = age;
-                                                handleDataChange(category, ages);
-                                            };
-                                            return (_jsxs(_Fragment, { children: [internalData.teens > 0 && teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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)));
-                                                        }) }), "teen-chunk-".concat(chunkIndex))); }), internalData.children > 0 && childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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)));
-                                                        }) }), "child-chunk-".concat(chunkIndex))); }), internalData.infants > 0 && infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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)));
-                                                        }) }), "infant-chunk-".concat(chunkIndex))); })] }));
-                                        })() }))] }))), _jsx(ClientTypeSelector, { value: internalData.clientType, onChange: function (val) { return handleDataChange('clientType', val); } })] })), _jsxs("div", __assign({ className: "pax-selector__actions" }, { children: [_jsx("button", __assign({ type: "button", className: "pax-selector__clear-btn", onClick: handleClear }, { children: "Clear Pax" })), _jsx("button", __assign({ type: "button", className: "pax-selector__done-btn", onClick: handleDone }, { children: "Done" }))] }))] })))] })));
-};
-export default PaxSelector;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+var DEFAULT_PAX_DATA = {
+    adults: 0,
+    teens: 0,
+    children: 0,
+    infants: 0,
+    teenAges: [],
+    childAges: [],
+    infantAges: [],
+    clientType: 'Standard client',
+};
+export var DEFAULT_PAX_DATA_WITH_ADULTS = {
+    adults: 2,
+    teens: 0,
+    children: 0,
+    infants: 0,
+    teenAges: [],
+    childAges: [],
+    infantAges: [],
+    clientType: 'Standard client',
+};
+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", __assign({ className: "pax-selector__age-selector", ref: containerRef }, { children: [_jsxs(Text, __assign({ size: "sm", variant: "regular", className: "pax-selector__age-label" }, { children: [label, required && _jsx("span", __assign({ className: "pax-selector__age-required" }, { children: " *" }))] })), _jsxs("div", __assign({ className: "dropdown-container pax-selector__age-dropdown-container" }, { children: [_jsxs("div", __assign({ 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", __assign({ 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", __assign({ className: "dropdown-menu", role: "listbox" }, { children: ageOptions.map(function (age) { return (_jsx("div", __assign({ 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)); }) })))] }))] })));
+};
+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 () {
+        if (value > min) {
+            onChange(value - 1);
+        }
+    };
+    var handleIncrement = function () {
+        if (value < max) {
+            onChange(value + 1);
+        }
+    };
+    return (_jsxs("div", __assign({ className: "pax-selector__stepper" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", className: "pax-selector__stepper-label" }, { children: label })), _jsxs("div", __assign({ className: "pax-selector__stepper-controls" }, { children: [_jsx("button", __assign({ type: "button", className: "pax-selector__stepper-btn", onClick: handleDecrement, disabled: value <= min, "aria-label": "Decrease ".concat(label) }, { children: _jsx(Icon, { name: "minus", size: "sm" }) })), _jsx("span", __assign({ className: "pax-selector__stepper-count" }, { children: value })), _jsx("button", __assign({ type: "button", className: "pax-selector__stepper-btn", onClick: handleIncrement, disabled: value >= max, "aria-label": "Increase ".concat(label) }, { children: _jsx(Icon, { name: "plus", size: "sm" }) }))] }))] })));
+};
+var ClientTypeSelector = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var containerRef = useRef(null);
+    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 handleSelect = function (type) {
+        onChange(type);
+        setIsOpen(false);
+    };
+    return (_jsxs("div", __assign({ className: "pax-selector__client-type" }, { children: [_jsx(Text, __assign({ size: "sm", variant: "regular", className: "pax-selector__client-type-label" }, { children: "Client type" })), _jsxs("div", __assign({ className: "pax-selector__client-type-select", ref: containerRef }, { children: [_jsxs("button", __assign({ type: "button", className: "pax-selector__client-type-trigger", onClick: function () { return setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "listbox" }, { children: [_jsxs("div", __assign({ className: "pax-selector__client-type-content" }, { children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__client-type-icon" }), _jsx("span", __assign({ 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", __assign({ className: "pax-selector__client-type-dropdown", role: "listbox" }, { children: CLIENT_TYPES.map(function (type) { return (_jsxs("button", __assign({ 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 handleFieldChange = function (field, value) {
+        var _a;
+        onChange(__assign(__assign({}, room), (_a = {}, _a[field] = value, _a)));
+    };
+    var handleAgeChange = function (category, index, age) {
+        var ages = __spreadArray([], (room[category] || []), true);
+        ages[index] = age;
+        handleFieldChange(category, ages);
+    };
+    // Generate age arrays based on counts
+    useEffect(function () {
+        var teenAges = room.teenAges || [];
+        var childAges = room.childAges || [];
+        var infantAges = room.infantAges || [];
+        // Adjust teen ages array
+        if (teenAges.length < room.teens) {
+            handleFieldChange('teenAges', __spreadArray(__spreadArray([], teenAges, true), Array(room.teens - teenAges.length).fill(undefined), true));
+        }
+        else if (teenAges.length > room.teens) {
+            handleFieldChange('teenAges', teenAges.slice(0, room.teens));
+        }
+        // Adjust child ages array
+        if (childAges.length < room.children) {
+            handleFieldChange('childAges', __spreadArray(__spreadArray([], childAges, true), Array(room.children - childAges.length).fill(undefined), true));
+        }
+        else if (childAges.length > room.children) {
+            handleFieldChange('childAges', childAges.slice(0, room.children));
+        }
+        // Adjust infant ages array
+        if (infantAges.length < room.infants) {
+            handleFieldChange('infantAges', __spreadArray(__spreadArray([], infantAges, true), Array(room.infants - infantAges.length).fill(undefined), true));
+        }
+        else if (infantAges.length > room.infants) {
+            handleFieldChange('infantAges', infantAges.slice(0, room.infants));
+        }
+    }, [room.teens, room.children, room.infants]);
+    // Chunk ages into groups of 2 for layout
+    var chunkAges = function (ages, category) {
+        var chunks = [];
+        for (var i = 0; i < ages.length; i += 2) {
+            chunks.push(ages.slice(i, i + 2));
+        }
+        return chunks;
+    };
+    var teenAgeChunks = chunkAges(room.teenAges || [], 'Teen');
+    var childAgeChunks = chunkAges(room.childAges || [], 'Child');
+    var infantAgeChunks = chunkAges(room.infantAges || [], 'Infant');
+    return (_jsxs("div", __assign({ className: "pax-selector__room-container" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-header" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-title" }, { children: [_jsxs(Text, __assign({ size: "lg", variant: "bold", className: "pax-selector__room-name" }, { children: ["Room ", roomNumber] })), _jsx(Icon, { name: "home", size: "md", className: "pax-selector__room-icon" })] })), showRemove && (_jsxs("button", __assign({ 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", __assign({ className: "pax-selector__room-remove-text" }, { children: "Remove" }))] })))] })), _jsxs("div", __assign({ className: "pax-selector__room-content" }, { children: [_jsxs("div", __assign({ 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", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsxs("div", __assign({ className: "pax-selector__age-groups" }, { children: [room.teens > 0 && teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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)));
+                                        }) }), "teen-chunk-".concat(chunkIndex))); }), room.children > 0 && childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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)));
+                                        }) }), "child-chunk-".concat(chunkIndex))); }), room.infants > 0 && infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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)));
+                                        }) }), "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;
+    var _m = useState(false), isOpen = _m[0], setIsOpen = _m[1];
+    var _o = useState(value || defaultPaxData || DEFAULT_PAX_DATA), internalData = _o[0], setInternalData = _o[1];
+    var _p = useState(defaultRooms || [__assign(__assign({}, DEFAULT_PAX_DATA), { roomId: '1' })]), rooms = _p[0], setRooms = _p[1];
+    var containerRef = useRef(null);
+    var hasInitialized = useRef(false);
+    // Sync internal data with external value prop
+    useEffect(function () {
+        if (value && !multipleRooms) {
+            setInternalData(value);
+        }
+    }, [value, multipleRooms]);
+    // Initialize with default pax data and trigger onChange on mount
+    useEffect(function () {
+        if (!hasInitialized.current && !value && defaultPaxData && !multipleRooms && onChange) {
+            hasInitialized.current = true;
+            onChange(defaultPaxData);
+        }
+    }, [defaultPaxData, value, multipleRooms, onChange]);
+    // Manage age arrays in single mode when counts change
+    useEffect(function () {
+        if (!multipleRooms) {
+            var teenAges = internalData.teenAges || [];
+            var childAges = internalData.childAges || [];
+            var infantAges = internalData.infantAges || [];
+            var needsUpdate = false;
+            var updatedData = __assign({}, internalData);
+            // Adjust teen ages array
+            if (teenAges.length < internalData.teens) {
+                updatedData.teenAges = __spreadArray(__spreadArray([], teenAges, true), Array(internalData.teens - teenAges.length).fill(undefined), true);
+                needsUpdate = true;
+            }
+            else if (teenAges.length > internalData.teens) {
+                updatedData.teenAges = teenAges.slice(0, internalData.teens);
+                needsUpdate = true;
+            }
+            // Adjust child ages array
+            if (childAges.length < internalData.children) {
+                updatedData.childAges = __spreadArray(__spreadArray([], childAges, true), Array(internalData.children - childAges.length).fill(undefined), true);
+                needsUpdate = true;
+            }
+            else if (childAges.length > internalData.children) {
+                updatedData.childAges = childAges.slice(0, internalData.children);
+                needsUpdate = true;
+            }
+            // Adjust infant ages array
+            if (infantAges.length < internalData.infants) {
+                updatedData.infantAges = __spreadArray(__spreadArray([], infantAges, true), Array(internalData.infants - infantAges.length).fill(undefined), true);
+                needsUpdate = true;
+            }
+            else if (infantAges.length > internalData.infants) {
+                updatedData.infantAges = infantAges.slice(0, internalData.infants);
+                needsUpdate = true;
+            }
+            if (needsUpdate) {
+                setInternalData(updatedData);
+                onChange === null || onChange === void 0 ? void 0 : onChange(updatedData);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [internalData.teens, internalData.children, internalData.infants, multipleRooms]);
+    // Handle clicks outside the dropdown
+    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 handleDataChange = function (field, newValue) {
+        var _a;
+        var newData = __assign(__assign({}, internalData), (_a = {}, _a[field] = newValue, _a));
+        setInternalData(newData);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newData);
+    };
+    var handleClear = function () {
+        if (multipleRooms) {
+            var clearedRooms = rooms.map(function (room) { return (__assign(__assign({}, DEFAULT_PAX_DATA), { roomId: room.roomId })); });
+            setRooms(clearedRooms);
+            onRoomsChange === null || onRoomsChange === void 0 ? void 0 : onRoomsChange(clearedRooms);
+        }
+        else {
+            var clearedData = __assign({}, DEFAULT_PAX_DATA);
+            setInternalData(clearedData);
+            onChange === null || onChange === void 0 ? void 0 : onChange(clearedData);
+        }
+    };
+    var handleDone = function () {
+        setIsOpen(false);
+        onDone === null || onDone === void 0 ? void 0 : onDone(multipleRooms ? rooms : internalData);
+    };
+    var handleAddRoom = function () {
+        var newRoom = __assign(__assign({}, DEFAULT_PAX_DATA), { roomId: "".concat(rooms.length + 1) });
+        var updatedRooms = __spreadArray(__spreadArray([], rooms, true), [newRoom], false);
+        setRooms(updatedRooms);
+        onRoomsChange === null || onRoomsChange === void 0 ? void 0 : onRoomsChange(updatedRooms);
+        onAddRoom === null || onAddRoom === void 0 ? void 0 : onAddRoom();
+    };
+    var handleRemoveRoom = function (roomId) {
+        var updatedRooms = rooms.filter(function (room) { return room.roomId !== roomId; });
+        setRooms(updatedRooms);
+        onRoomsChange === null || onRoomsChange === void 0 ? void 0 : onRoomsChange(updatedRooms);
+        onRemoveRoom === null || onRemoveRoom === void 0 ? void 0 : onRemoveRoom(roomId);
+    };
+    var handleRoomChange = function (roomId, updatedRoom) {
+        var updatedRooms = rooms.map(function (room) {
+            return room.roomId === roomId ? updatedRoom : room;
+        });
+        setRooms(updatedRooms);
+        onRoomsChange === null || onRoomsChange === void 0 ? void 0 : onRoomsChange(updatedRooms);
+    };
+    var getTotalPax = function () {
+        if (multipleRooms) {
+            return rooms.reduce(function (total, room) {
+                return total + room.adults + room.teens + room.children + room.infants;
+            }, 0);
+        }
+        var adults = internalData.adults, teens = internalData.teens, children = internalData.children, infants = internalData.infants;
+        return adults + teens + children + infants;
+    };
+    var getDisplayText = function () {
+        var total = getTotalPax();
+        if (total === 0) {
+            return placeholder;
+        }
+        return "".concat(total, " pax");
+    };
+    var hasPax = getTotalPax() > 0;
+    return (_jsxs("div", __assign({ className: "pax-selector ".concat(className), ref: containerRef }, { children: [_jsxs("button", __assign({ type: "button", className: "pax-selector__trigger", onClick: function () { return setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "true" }, { children: [_jsx(Text, __assign({ size: "sm", variant: "regular", className: "pax-selector__label" }, { children: label })), _jsxs("div", __assign({ className: "pax-selector__input ".concat(isOpen ? 'pax-selector__input--active' : '') }, { children: [_jsxs("div", __assign({ className: "pax-selector__input-content" }, { children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__input-icon" }), _jsx("span", __assign({ 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", __assign({ className: "pax-selector__dropdown" }, { children: [multipleRooms ? (_jsxs(_Fragment, { children: [showAddRoom && (_jsxs("button", __assign({ 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", __assign({ 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)); }) }))] })) : (
+                    /* Single Room Mode */
+                    _jsxs(_Fragment, { children: [_jsxs("div", __assign({ 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", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsx("div", __assign({ className: "pax-selector__age-groups" }, { children: (function () {
+                                            var chunkAges = function (ages, category) {
+                                                var chunks = [];
+                                                for (var i = 0; i < ages.length; i += 2) {
+                                                    chunks.push(ages.slice(i, i + 2));
+                                                }
+                                                return chunks;
+                                            };
+                                            var teenAgeChunks = chunkAges(internalData.teenAges || [], 'Teen');
+                                            var childAgeChunks = chunkAges(internalData.childAges || [], 'Child');
+                                            var infantAgeChunks = chunkAges(internalData.infantAges || [], 'Infant');
+                                            var handleAgeChange = function (category, index, age) {
+                                                var ages = __spreadArray([], (internalData[category] || []), true);
+                                                ages[index] = age;
+                                                handleDataChange(category, ages);
+                                            };
+                                            return (_jsxs(_Fragment, { children: [internalData.teens > 0 && teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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)));
+                                                        }) }), "teen-chunk-".concat(chunkIndex))); }), internalData.children > 0 && childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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)));
+                                                        }) }), "child-chunk-".concat(chunkIndex))); }), internalData.infants > 0 && infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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)));
+                                                        }) }), "infant-chunk-".concat(chunkIndex))); })] }));
+                                        })() }))] }))), _jsx(ClientTypeSelector, { value: internalData.clientType, onChange: function (val) { return handleDataChange('clientType', val); } })] })), _jsxs("div", __assign({ className: "pax-selector__actions" }, { children: [_jsx("button", __assign({ type: "button", className: "pax-selector__clear-btn", onClick: handleClear }, { children: "Clear Pax" })), _jsx("button", __assign({ type: "button", className: "pax-selector__done-btn", onClick: handleDone }, { children: "Done" }))] }))] })))] })));
+};
+export default PaxSelector;