mautourco-components 0.2.85 → 0.2.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -32,6 +32,8 @@ export interface LocationDropdownProps {
32
32
  showGroupTitles?: boolean;
33
33
  /** Whether to scroll to the input when the dropdown opens */
34
34
  scrollOnOpen?: boolean;
35
+ /** Default location option to use when no value is selected */
36
+ defaultValue?: LocationOption;
35
37
  }
36
38
  declare const LocationDropdown: React.FC<LocationDropdownProps>;
37
39
  export default LocationDropdown;
@@ -25,7 +25,7 @@ import '../../../styles/components/molecule/location-dropdown.css';
25
25
  import Icon from '../../atoms/Icon/Icon';
26
26
  import { Text } from '../../atoms/Typography/Typography';
27
27
  var LocationDropdown = function (_a) {
28
- var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.groups, groups = _c === void 0 ? [] : _c, _d = _a.selectedValue, selectedValue = _d === void 0 ? null : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'Select a location' : _e, label = _a.label, onSelectionChange = _a.onSelectionChange, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.type, type = _k === void 0 ? 'airport-port' : _k, _l = _a.maxHeight, maxHeight = _l === void 0 ? 240 : _l, _m = _a.direction, direction = _m === void 0 ? undefined : _m, _o = _a.showGroupTitles, showGroupTitles = _o === void 0 ? true : _o, _p = _a.scrollOnOpen, scrollOnOpen = _p === void 0 ? false : _p;
28
+ var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.groups, groups = _c === void 0 ? [] : _c, _d = _a.selectedValue, selectedValue = _d === void 0 ? null : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'Select a location' : _e, label = _a.label, onSelectionChange = _a.onSelectionChange, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.type, type = _k === void 0 ? 'airport-port' : _k, _l = _a.maxHeight, maxHeight = _l === void 0 ? 240 : _l, _m = _a.direction, direction = _m === void 0 ? undefined : _m, _o = _a.showGroupTitles, showGroupTitles = _o === void 0 ? true : _o, _p = _a.scrollOnOpen, scrollOnOpen = _p === void 0 ? false : _p, defaultValue = _a.defaultValue;
29
29
  var _q = useState(false), isOpen = _q[0], setIsOpen = _q[1];
30
30
  var _r = useState(''), searchQuery = _r[0], setSearchQuery = _r[1];
31
31
  var dropdownRef = useRef(null);
@@ -53,6 +53,17 @@ var LocationDropdown = function (_a) {
53
53
  setSearchQuery('');
54
54
  }
55
55
  }, [isOpen]);
56
+ // Initialize default value if provided and no selected value
57
+ useEffect(function () {
58
+ if (!selectedValue && defaultValue && !disabled) {
59
+ var defaultLocationData = {
60
+ id: defaultValue.id,
61
+ locationName: defaultValue.label,
62
+ };
63
+ onSelectionChange(defaultLocationData);
64
+ }
65
+ // eslint-disable-next-line react-hooks/exhaustive-deps
66
+ }, [defaultValue]);
56
67
  var handleToggleDropdown = function () {
57
68
  if (!disabled) {
58
69
  setIsOpen(!isOpen);
@@ -82,20 +93,21 @@ var LocationDropdown = function (_a) {
82
93
  });
83
94
  };
84
95
  var getSelectedOption = function () {
85
- if (!selectedValue)
86
- return null;
87
- // Search in flat options
88
- var flatOption = options.find(function (opt) { return opt.id === selectedValue; });
89
- if (flatOption)
90
- return flatOption;
91
- // Search in groups
92
- for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
93
- var group = groups_1[_i];
94
- var groupOption = group.options.find(function (opt) { return opt.id === selectedValue; });
95
- if (groupOption)
96
- return groupOption;
96
+ if (selectedValue) {
97
+ // Search in flat options
98
+ var flatOption = options.find(function (opt) { return opt.id === selectedValue; });
99
+ if (flatOption)
100
+ return flatOption;
101
+ // Search in groups
102
+ for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
103
+ var group = groups_1[_i];
104
+ var groupOption = group.options.find(function (opt) { return opt.id === selectedValue; });
105
+ if (groupOption)
106
+ return groupOption;
107
+ }
97
108
  }
98
- return null;
109
+ // Return default value if no selected value
110
+ return defaultValue || null;
99
111
  };
100
112
  var getIconForType = function (optionType) {
101
113
  switch (optionType) {
@@ -128,6 +140,8 @@ var LocationDropdown = function (_a) {
128
140
  // For other types (port, accommodation), show their specific icon
129
141
  return getIconForType(option.type);
130
142
  };
143
+ var selectedOption = getSelectedOption();
144
+ var effectiveSelectedValue = selectedValue || (defaultValue ? defaultValue.id : null);
131
145
  var getDropdownState = function () {
132
146
  if (disabled)
133
147
  return 'disabled';
@@ -135,11 +149,10 @@ var LocationDropdown = function (_a) {
135
149
  return 'error';
136
150
  if (isOpen)
137
151
  return 'open';
138
- if (selectedValue)
152
+ if (effectiveSelectedValue)
139
153
  return 'selected';
140
154
  return 'default';
141
155
  };
142
- var selectedOption = getSelectedOption();
143
156
  var displayText = selectedOption ? selectedOption.label : placeholder;
144
157
  // Prepare all options (flat or grouped) and filter them
145
158
  var allOptionsRaw = groups.length > 0 ? groups : [{ id: 'default', label: '', options: options }];
@@ -150,7 +163,7 @@ var LocationDropdown = function (_a) {
150
163
  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))); }) }) }) }) }) })); };
151
164
  return (_jsxs("div", { ref: dropdownRef, className: "location-dropdown location-dropdown--".concat(type, " ").concat(disabled ? 'location-dropdown--disabled' : '', " ").concat(className), children: [label && (_jsx("div", { className: "location-dropdown__label", children: _jsx(Text, { size: "sm", variant: "medium", children: label }) })), _jsxs("div", { ref: inputRef, className: "location-dropdown__input location-dropdown__input--".concat(getDropdownState()), onClick: handleToggleDropdown, children: [_jsxs("div", { className: "location-dropdown__input-content", children: [_jsx(Icon, { name: getInputIcon(), size: "sm", className: "location-dropdown__input-icon ".concat(!selectedOption ? 'location-dropdown__input-icon--placeholder' : '') }), isOpen ? (_jsx("input", { ref: searchInputRef, type: "text", className: "location-dropdown__input-text ".concat(!selectedOption && !searchQuery ? 'location-dropdown__input-text--placeholder' : ''), placeholder: displayText, value: searchQuery, onChange: handleSearchChange, onClick: function (e) { return e.stopPropagation(); }, disabled: disabled, autoFocus: true })) : (_jsx("span", { className: "location-dropdown__input-text ".concat(!selectedOption ? 'location-dropdown__input-text--placeholder' : ''), children: displayText }))] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "location-dropdown__input-chevron" })] }), isOpen &&
152
165
  (loading ? (renderSkeletonLoading()) : (_jsx("div", { className: "location-dropdown__panel", children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: allOptions.length === 0 ? (_jsx("div", { className: "location-dropdown__no-results", children: _jsx(Text, { size: "sm", variant: "medium", children: "No locations found" }) })) : (allOptions.map(function (group, groupIndex) { return (_jsxs("div", { className: "location-dropdown__group", children: [showGroupTitles && group.label && groups.length > 0 && (_jsxs(_Fragment, { children: [groupIndex > 0 && _jsx("div", { className: "location-dropdown__divider" }), _jsx("div", { className: "location-dropdown__group-header", children: _jsx(Text, { size: "xs", variant: "bold", children: group.label }) })] })), _jsx("div", { className: "location-dropdown__group-options", children: group.options.map(function (option) {
153
- var isSelected = selectedValue === option.id;
166
+ var isSelected = effectiveSelectedValue === option.id;
154
167
  var isDisabled = option.disabled || disabled;
155
168
  return (_jsxs("div", { className: "location-dropdown__option ".concat(isSelected ? 'location-dropdown__option--selected' : '', " ").concat(isDisabled ? 'location-dropdown__option--disabled' : ''), onClick: function () { return !isDisabled && handleOptionSelect(option); }, children: [_jsx(Icon, { name: getOptionIcon(option, isSelected), size: "sm", className: "location-dropdown__option-icon" }), _jsx("span", { className: "location-dropdown__option-text", children: option.label })] }, option.id));
156
169
  }) })] }, group.id)); })) }) }) })))] }));
@@ -46,6 +46,6 @@ export var TransferDocket = function (_a) {
46
46
  }
47
47
  return (_jsx("div", { className: "transfer-docket__children", children: childGroups.map(function (group, index) { return (_jsxs(React.Fragment, { children: [index > 0 && _jsx("div", { className: "transfer-docket__divider-vertical" }), _jsxs("span", { className: "transfer-docket__child-info", children: [_jsxs(Text, { size: "sm", variant: "medium", color: "default", children: [group.count, " Child", group.count > 1 ? 'ren' : ''] }), group.age > 0 ? (_jsxs(Text, { size: "sm", variant: "medium", className: "transfer-docket__child-age", children: [' ', "(", group.age, " y.o)"] })) : null] })] }, "child-".concat(index))); }) }));
48
48
  };
49
- return (_jsxs("div", { className: "transfer-docket", children: [_jsxs("div", { className: "transfer-docket__header", children: [_jsxs("div", { className: "transfer-docket__title-section", children: [_jsx("div", { className: "transfer-docket__title-bar" }), _jsx(Icon, { name: "bus", size: "sm" }), _jsx(Text, { variant: "bold", size: "sm", color: "accent", children: "Transfer" })] }), removeMode ? (_jsx(Button, { variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "transfer-docket__remove-button", children: "Remove" })) : (TotalPrice && Currency && _jsx(PriceDisplay, { currency: Currency, price: TotalPrice }))] }), _jsxs("div", { className: "transfer-docket__details", children: [TransferDate && (_jsx(DateDisplay, { date: TransferDate, calendarSize: "sm", textSize: "sm", colorMode: "green" })), (LocationFromName || LocationToName) && (_jsxs("div", { className: "transfer-docket__transfer-point", children: [_jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: LocationFromName || 'From' }), _jsx(Icon, { name: "arrow-down-outline", size: "sm" }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: LocationToName || 'To' })] })), _jsxs("div", { className: "transfer-docket__guests", children: [AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, { icon: "user", textSize: "sm", color: "subtle", children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] })), ((ChildCount && ChildCount > 0) || (TeenCount && TeenCount > 0)) || (InfantCount && InfantCount > 0) ? (_jsxs("div", { className: "transfer-docket__children-wrapper", children: [_jsx(Icon, { name: "user", size: "sm", color: "var(--color-text-subtle, #303642)" }), formatChildrenInfo()] })) : null] }), VehicleTypeName && (_jsx(TextWithIcon, { icon: "car", textSize: "sm", color: "subtle", textLeading: "none", children: VehicleTypeName })), showBabySeat && (_jsxs("div", { className: "transfer-docket__supplements", children: [_jsx(Text, { variant: "medium", size: "sm", color: "default", leading: "none", children: "Supplement :" }), _jsxs(TextWithIcon, { icon: "stroller", textSize: "sm", color: "subtle", children: ["Baby seat x", baby_seat_count] })] }))] })] }));
49
+ return (_jsxs("div", { className: "transfer-docket", children: [_jsxs("div", { className: "transfer-docket__header", children: [_jsxs("div", { className: "transfer-docket__title-section", children: [_jsx("div", { className: "transfer-docket__title-bar" }), _jsx(Icon, { name: "bus", size: "sm" }), _jsx(Text, { variant: "bold", size: "sm", color: "accent", children: "Transfer" })] }), removeMode ? (_jsx(Button, { variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "transfer-docket__remove-button", children: "Remove" })) : (TotalPrice && Currency && _jsx(PriceDisplay, { currency: Currency, price: TotalPrice }))] }), _jsxs("div", { className: "transfer-docket__details", children: [TransferDate && (_jsx(DateDisplay, { date: TransferDate, calendarSize: "sm", textSize: "sm", colorMode: "green" })), (LocationFromName || LocationToName) && (_jsxs("div", { className: "transfer-docket__transfer-point", children: [_jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: LocationFromName || 'From' }), _jsx(Icon, { name: "arrow-down-outline", size: "sm" }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: LocationToName || 'To' })] })), _jsxs("div", { className: "transfer-docket__guests", children: [AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, { icon: "user", textSize: "sm", color: "subtle", children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] })), ((ChildCount && ChildCount > 0) || (TeenCount && TeenCount > 0)) || (InfantCount && InfantCount > 0) ? (_jsxs("div", { className: "transfer-docket__children-wrapper", children: [_jsx(Icon, { name: "user", size: "sm", color: "var(--color-text-subtle, #303642)" }), formatChildrenInfo()] })) : null] }), VehicleTypeName && (_jsx(TextWithIcon, { icon: "car", textSize: "sm", color: "subtle", textLeading: "none", children: VehicleTypeName })), !!showBabySeat && (_jsxs("div", { className: "transfer-docket__supplements", children: [_jsx(Text, { variant: "medium", size: "sm", color: "default", leading: "none", children: "Supplement :" }), _jsxs(TextWithIcon, { icon: "stroller", textSize: "sm", color: "subtle", children: ["Baby seat x", baby_seat_count] })] }))] })] }));
50
50
  };
51
51
  export default TransferDocket;
@@ -184,6 +184,16 @@ var RoundTrip = function (_a) {
184
184
  var isAccommodationEmpty = checkEmpty && !internalAccommodation;
185
185
  var pickupDropoffOptions = getPickupDropoffOptions();
186
186
  var accommodationOptions = getAccommodationOptions();
187
- 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, checkEmpty: checkEmpty }) }), _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 }) })] }) }));
187
+ // Helper function to find LocationOption from ID for defaultValue
188
+ var findLocationOption = function (id, locationType) {
189
+ if (!id)
190
+ return undefined;
191
+ var _a = locationType === 'pickup-dropoff' ? getPickupDropoffOptions() : getAccommodationOptions(), options = _a.options, groups = _a.groups;
192
+ var allLocations = getAllLocations(options, groups);
193
+ return allLocations.find(function (loc) { return loc.id === id; });
194
+ };
195
+ var defaultPickupDropoffOption = findLocationOption(pickupDropoffPoint, 'pickup-dropoff');
196
+ var defaultAccommodationOption = findLocationOption(accommodation, 'accommodation');
197
+ 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, checkEmpty: checkEmpty }) }), _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, defaultValue: defaultPickupDropoffOption }) }), _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, defaultValue: defaultAccommodationOption }) })] }) }));
188
198
  };
189
199
  export default RoundTrip;
@@ -192,14 +192,24 @@ var TransferLine = function (_a) {
192
192
  var isDateEmpty = checkEmpty && (!internalTransferDate || internalTransferDate === '');
193
193
  var isPickupEmpty = checkEmpty && !internalPickupPoint;
194
194
  var isDropoffEmpty = checkEmpty && !internalDropoffPoint;
195
+ // Helper function to find LocationOption from ID for defaultValue
196
+ var findLocationOption = function (id, position) {
197
+ if (!id)
198
+ return undefined;
199
+ var _a = filterLocations(position), options = _a.options, groups = _a.groups;
200
+ var allLocations = getAllLocations(options, groups);
201
+ return allLocations.find(function (loc) { return loc.id === id; });
202
+ };
203
+ var defaultPickupOption = findLocationOption(pickupPoint, 'pickup');
204
+ var defaultDropoffOption = findLocationOption(dropoffPoint, 'dropoff');
195
205
  return (_jsxs("div", { className: "transfer-line transfer-line--".concat(type, " ").concat(disabled ? 'transfer-line--disabled' : '', " ").concat(className), "data-transfer-id": id, children: [showTitle && (_jsxs("div", { className: "transfer-line__header", children: [_jsx(Icon, { name: getTypeIcon(), size: "sm", className: "transfer-line__header-icon" }), _jsx(Text, { size: "sm", variant: "medium", className: "transfer-line__header-label", children: getTypeLabel() })] })), _jsxs("div", { className: "transfer-line__content-container", children: [_jsxs("div", { className: "transfer-line__content", children: [_jsx("div", { className: "transfer-line__field transfer-line__field--pax ".concat(isPaxEmpty ? 'transfer-line__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', disabled: disabled, scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty }) }), _jsxs("div", { className: "transfer-line__field transfer-line__field--date", children: [_jsx(Text, { size: "sm", variant: "regular", className: "transfer-line__field-label", children: "Transfer date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 1, iconBGFull: false, showChevron: true, onValueChange: handleDateChange, selectionMode: "single", defaultValue: internalTransferDate, inputClassName: "transfer-line__date-picker", state: isDateEmpty ? 'error' : undefined, disabled: disabled, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "transfer-line__field transfer-line__field--pickup", children: _jsx(LocationDropdown, { label: "Pick-up point", options: filterLocations('pickup').options, groups: filterLocations('pickup').groups, selectedValue: (internalPickupPoint === null || internalPickupPoint === void 0 ? void 0 : internalPickupPoint.id) || null, onSelectionChange: handlePickupChange, placeholder: "Select a pick-up point", direction: "pickup", type: type === 'inter-hotel'
196
206
  ? 'accommodation'
197
207
  : type === 'arrival'
198
208
  ? 'airport-port'
199
- : 'accommodation', showGroupTitles: false, error: isPickupEmpty, disabled: disabled, scrollOnOpen: scrollOnOpen }) }), _jsx("div", { className: "transfer-line__field transfer-line__field--dropoff", children: _jsx(LocationDropdown, { label: "Drop-off point", options: filterLocations('dropoff').options, groups: filterLocations('dropoff').groups, selectedValue: (internalDropoffPoint === null || internalDropoffPoint === void 0 ? void 0 : internalDropoffPoint.id) || null, onSelectionChange: handleDropoffChange, placeholder: "Select a drop-off point", direction: "dropoff", type: type === 'inter-hotel'
209
+ : 'accommodation', showGroupTitles: false, error: isPickupEmpty, disabled: disabled, scrollOnOpen: scrollOnOpen, defaultValue: defaultPickupOption }) }), _jsx("div", { className: "transfer-line__field transfer-line__field--dropoff", children: _jsx(LocationDropdown, { label: "Drop-off point", options: filterLocations('dropoff').options, groups: filterLocations('dropoff').groups, selectedValue: (internalDropoffPoint === null || internalDropoffPoint === void 0 ? void 0 : internalDropoffPoint.id) || null, onSelectionChange: handleDropoffChange, placeholder: "Select a drop-off point", direction: "dropoff", type: type === 'inter-hotel'
200
210
  ? 'accommodation'
201
211
  : type === 'departure'
202
212
  ? 'airport-port'
203
- : 'accommodation', showGroupTitles: false, error: isDropoffEmpty, disabled: disabled, scrollOnOpen: scrollOnOpen }) })] }), showDelete && !disabled && (_jsx("div", { className: "transfer-line__delete", children: _jsx("button", { type: "button", className: "transfer-line__delete-btn", onClick: onDelete, "aria-label": "Delete transfer line", children: _jsx(Icon, { name: "delete", size: "sm", className: "transfer-line__delete-icon" }) }) }))] })] }));
213
+ : 'accommodation', showGroupTitles: false, error: isDropoffEmpty, disabled: disabled, scrollOnOpen: scrollOnOpen, defaultValue: defaultDropoffOption }) })] }), showDelete && !disabled && (_jsx("div", { className: "transfer-line__delete", children: _jsx("button", { type: "button", className: "transfer-line__delete-btn", onClick: onDelete, "aria-label": "Delete transfer line", children: _jsx(Icon, { name: "delete", size: "sm", className: "transfer-line__delete-icon" }) }) }))] })] }));
204
214
  };
205
215
  export default TransferLine;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mautourco-components",
3
- "version": "0.2.85",
3
+ "version": "0.2.86",
4
4
  "private": false,
5
5
  "description": "Bibliothèque de composants Mautourco pour le redesign",
6
6
  "main": "dist/index.js",
@@ -39,6 +39,8 @@ export interface LocationDropdownProps {
39
39
  showGroupTitles?: boolean;
40
40
  /** Whether to scroll to the input when the dropdown opens */
41
41
  scrollOnOpen?: boolean;
42
+ /** Default location option to use when no value is selected */
43
+ defaultValue?: LocationOption;
42
44
  }
43
45
 
44
46
  const LocationDropdown: React.FC<LocationDropdownProps> = ({
@@ -57,6 +59,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
57
59
  direction = undefined,
58
60
  showGroupTitles = true,
59
61
  scrollOnOpen = false,
62
+ defaultValue,
60
63
  }) => {
61
64
  const [isOpen, setIsOpen] = useState(false);
62
65
  const [searchQuery, setSearchQuery] = useState('');
@@ -90,6 +93,18 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
90
93
  }
91
94
  }, [isOpen]);
92
95
 
96
+ // Initialize default value if provided and no selected value
97
+ useEffect(() => {
98
+ if (!selectedValue && defaultValue && !disabled) {
99
+ const defaultLocationData: LocationData = {
100
+ id: defaultValue.id,
101
+ locationName: defaultValue.label,
102
+ };
103
+ onSelectionChange(defaultLocationData);
104
+ }
105
+ // eslint-disable-next-line react-hooks/exhaustive-deps
106
+ }, [defaultValue]);
107
+
93
108
  const handleToggleDropdown = () => {
94
109
  if (!disabled) {
95
110
  setIsOpen(!isOpen);
@@ -122,19 +137,20 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
122
137
  };
123
138
 
124
139
  const getSelectedOption = (): LocationOption | null => {
125
- if (!selectedValue) return null;
126
-
127
- // Search in flat options
128
- const flatOption = options.find((opt) => opt.id === selectedValue);
129
- if (flatOption) return flatOption;
140
+ if (selectedValue) {
141
+ // Search in flat options
142
+ const flatOption = options.find((opt) => opt.id === selectedValue);
143
+ if (flatOption) return flatOption;
130
144
 
131
- // Search in groups
132
- for (const group of groups) {
133
- const groupOption = group.options.find((opt) => opt.id === selectedValue);
134
- if (groupOption) return groupOption;
145
+ // Search in groups
146
+ for (const group of groups) {
147
+ const groupOption = group.options.find((opt) => opt.id === selectedValue);
148
+ if (groupOption) return groupOption;
149
+ }
135
150
  }
136
151
 
137
- return null;
152
+ // Return default value if no selected value
153
+ return defaultValue || null;
138
154
  };
139
155
 
140
156
  const getIconForType = (optionType: 'airport' | 'port' | 'accommodation') => {
@@ -171,15 +187,17 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
171
187
  return getIconForType(option.type);
172
188
  };
173
189
 
190
+ const selectedOption = getSelectedOption();
191
+ const effectiveSelectedValue = selectedValue || (defaultValue ? defaultValue.id : null);
192
+
174
193
  const getDropdownState = () => {
175
194
  if (disabled) return 'disabled';
176
195
  if (error) return 'error';
177
196
  if (isOpen) return 'open';
178
- if (selectedValue) return 'selected';
197
+ if (effectiveSelectedValue) return 'selected';
179
198
  return 'default';
180
199
  };
181
200
 
182
- const selectedOption = getSelectedOption();
183
201
  const displayText = selectedOption ? selectedOption.label : placeholder;
184
202
 
185
203
  // Prepare all options (flat or grouped) and filter them
@@ -293,7 +311,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
293
311
 
294
312
  <div className="location-dropdown__group-options">
295
313
  {group.options.map((option) => {
296
- const isSelected = selectedValue === option.id;
314
+ const isSelected = effectiveSelectedValue === option.id;
297
315
  const isDisabled = option.disabled || disabled;
298
316
 
299
317
  return (
@@ -170,7 +170,7 @@ export const TransferDocket: React.FC<TransferDocketProps> = ({
170
170
  </TextWithIcon>
171
171
  )}
172
172
 
173
- {showBabySeat && (
173
+ {!!showBabySeat && (
174
174
  <div className="transfer-docket__supplements">
175
175
  <Text variant="medium" size="sm" color="default" leading="none">
176
176
  Supplement :
@@ -292,6 +292,17 @@ const RoundTrip: React.FC<RoundTripProps> = ({
292
292
  const pickupDropoffOptions = getPickupDropoffOptions();
293
293
  const accommodationOptions = getAccommodationOptions();
294
294
 
295
+ // Helper function to find LocationOption from ID for defaultValue
296
+ const findLocationOption = (id: string | undefined, locationType: 'pickup-dropoff' | 'accommodation'): LocationOption | undefined => {
297
+ if (!id) return undefined;
298
+ const { options, groups } = locationType === 'pickup-dropoff' ? getPickupDropoffOptions() : getAccommodationOptions();
299
+ const allLocations = getAllLocations(options, groups);
300
+ return allLocations.find((loc) => loc.id === id);
301
+ };
302
+
303
+ const defaultPickupDropoffOption = findLocationOption(pickupDropoffPoint, 'pickup-dropoff');
304
+ const defaultAccommodationOption = findLocationOption(accommodation, 'accommodation');
305
+
295
306
  return (
296
307
  <div className={`round-trip ${className}`} data-round-trip-id={id}>
297
308
  <div className="round-trip__content">
@@ -339,6 +350,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
339
350
  showGroupTitles={true}
340
351
  error={isPickupDropoffEmpty}
341
352
  scrollOnOpen={scrollOnOpen}
353
+ defaultValue={defaultPickupDropoffOption}
342
354
  />
343
355
  </div>
344
356
 
@@ -355,6 +367,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
355
367
  showGroupTitles={false}
356
368
  error={isAccommodationEmpty}
357
369
  scrollOnOpen={scrollOnOpen}
370
+ defaultValue={defaultAccommodationOption}
358
371
  />
359
372
  </div>
360
373
  </div>
@@ -292,6 +292,17 @@ const TransferLine: React.FC<TransferLineProps> = ({
292
292
 
293
293
  const isDropoffEmpty = checkEmpty && !internalDropoffPoint;
294
294
 
295
+ // Helper function to find LocationOption from ID for defaultValue
296
+ const findLocationOption = (id: string | number | undefined, position: 'pickup' | 'dropoff'): LocationOption | undefined => {
297
+ if (!id) return undefined;
298
+ const { options, groups } = filterLocations(position);
299
+ const allLocations = getAllLocations(options, groups);
300
+ return allLocations.find((loc) => loc.id === id);
301
+ };
302
+
303
+ const defaultPickupOption = findLocationOption(pickupPoint, 'pickup');
304
+ const defaultDropoffOption = findLocationOption(dropoffPoint, 'dropoff');
305
+
295
306
  return (
296
307
  <div
297
308
  className={`transfer-line transfer-line--${type} ${disabled ? 'transfer-line--disabled' : ''} ${className}`}
@@ -367,6 +378,7 @@ const TransferLine: React.FC<TransferLineProps> = ({
367
378
  error={isPickupEmpty}
368
379
  disabled={disabled}
369
380
  scrollOnOpen={scrollOnOpen}
381
+ defaultValue={defaultPickupOption}
370
382
  />
371
383
  </div>
372
384
 
@@ -391,6 +403,7 @@ const TransferLine: React.FC<TransferLineProps> = ({
391
403
  error={isDropoffEmpty}
392
404
  disabled={disabled}
393
405
  scrollOnOpen={scrollOnOpen}
406
+ defaultValue={defaultDropoffOption}
394
407
  />
395
408
  </div>
396
409
  </div>