mautourco-components 0.2.4 → 0.2.7

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

@@ -1,120 +1,120 @@
-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);
-};
-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';
-import '../../../styles/components/molecule/location-dropdown.css';
-var LocationDropdown = function (_a) {
-    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.className, className = _h === void 0 ? '' : _h, _j = _a.type, type = _j === void 0 ? 'airport-port' : _j, _k = _a.maxHeight, maxHeight = _k === void 0 ? 240 : _k, _l = _a.direction, direction = _l === void 0 ? undefined : _l, _m = _a.showGroupTitles, showGroupTitles = _m === void 0 ? true : _m;
-    var _o = useState(false), isOpen = _o[0], setIsOpen = _o[1];
-    var dropdownRef = useRef(null);
-    // Close dropdown when clicking outside
-    useEffect(function () {
-        var handleClickOutside = function (event) {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, []);
-    var handleToggleDropdown = function () {
-        if (!disabled) {
-            setIsOpen(!isOpen);
-        }
-    };
-    var handleOptionSelect = function (option) {
-        if (disabled)
-            return;
-        var locationData = {
-            id: option.id,
-            locationName: option.label,
-        };
-        onSelectionChange(locationData);
-        setIsOpen(false);
-    };
-    var getSelectedOption = function () {
-        if (!selectedValue)
-            return null;
-        // Search in flat options
-        var flatOption = options.find(function (opt) { return opt.id === selectedValue; });
-        if (flatOption)
-            return flatOption;
-        // Search in groups
-        for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
-            var group = groups_1[_i];
-            var groupOption = group.options.find(function (opt) { return opt.id === selectedValue; });
-            if (groupOption)
-                return groupOption;
-        }
-        return null;
-    };
-    var getIconForType = function (optionType) {
-        switch (optionType) {
-            case 'airport':
-                return 'plane';
-            case 'port':
-                return 'ship';
-            case 'accommodation':
-                return 'map-pin';
-            default:
-                return 'map-pin';
-        }
-    };
-    var getInputIcon = function () {
-        if (selectedOption) {
-            // For airports, show arrival/departure based on direction
-            console.log({ direction: direction });
-            if (selectedOption.type === 'airport' && direction) {
-                return direction === 'pickup' ? 'arrival' : 'departure';
-            }
-            return getIconForType(selectedOption.type);
-        }
-        // Use arrival/departure icons based on direction for pickup/dropoff types
-        if ((type === 'pickup-dropoff' || type === 'airport-port') && direction) {
-            return direction === 'pickup' ? 'arrival' : 'departure';
-        }
-        return 'map-pin';
-    };
-    var getOptionIcon = function (option, isSelected) {
-        // For selected airports, show arrival/departure based on direction
-        if (isSelected && option.type === 'airport' && direction) {
-            return direction === 'pickup' ? 'arrival' : 'departure';
-        }
-        // For other types (port, accommodation), show their specific icon
-        return getIconForType(option.type);
-    };
-    var getDropdownState = function () {
-        if (disabled)
-            return 'disabled';
-        if (error)
-            return 'error';
-        if (isOpen)
-            return 'open';
-        if (selectedValue)
-            return 'selected';
-        return 'default';
-    };
-    var selectedOption = getSelectedOption();
-    var displayText = selectedOption ? selectedOption.label : placeholder;
-    // Prepare all options (flat or grouped)
-    var allOptions = groups.length > 0 ? groups : [{ id: 'default', label: '', options: options }];
-    return (_jsxs("div", __assign({ ref: dropdownRef, className: "location-dropdown location-dropdown--".concat(type, " ").concat(className) }, { children: [label && (_jsx("div", __assign({ className: "location-dropdown__label" }, { children: _jsx(Text, __assign({ size: "sm", variant: "medium" }, { children: label })) }))), _jsxs("div", __assign({ className: "location-dropdown__input location-dropdown__input--".concat(getDropdownState()), onClick: handleToggleDropdown }, { children: [_jsxs("div", __assign({ className: "location-dropdown__input-content" }, { children: [_jsx(Icon, { name: getInputIcon(), size: "sm", className: "location-dropdown__input-icon ".concat(!selectedOption ? 'location-dropdown__input-icon--placeholder' : '') }), _jsx("span", __assign({ 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 && (_jsx("div", __assign({ className: "location-dropdown__panel" }, { children: _jsx("div", __assign({ className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") } }, { children: _jsx("div", __assign({ className: "location-dropdown__options-wrapper" }, { children: allOptions.map(function (group, groupIndex) { return (_jsxs("div", __assign({ className: "location-dropdown__group" }, { children: [showGroupTitles && group.label && groups.length > 0 && (_jsxs(_Fragment, { children: [groupIndex > 0 && _jsx("div", { className: "location-dropdown__divider" }), _jsx("div", __assign({ className: "location-dropdown__group-header" }, { children: _jsx(Text, __assign({ size: "xs", variant: "bold" }, { children: group.label })) }))] })), _jsx("div", __assign({ className: "location-dropdown__group-options" }, { children: group.options.map(function (option) {
-                                        var isSelected = selectedValue === option.id;
-                                        var isDisabled = option.disabled || disabled;
-                                        return (_jsxs("div", __assign({ 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", __assign({ className: "location-dropdown__option-text" }, { children: option.label }))] }), option.id));
-                                    }) }))] }), group.id)); }) })) })) })))] })));
-};
-export default LocationDropdown;
+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);
+};
+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';
+import '../../../styles/components/molecule/location-dropdown.css';
+var LocationDropdown = function (_a) {
+    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.className, className = _h === void 0 ? '' : _h, _j = _a.type, type = _j === void 0 ? 'airport-port' : _j, _k = _a.maxHeight, maxHeight = _k === void 0 ? 240 : _k, _l = _a.direction, direction = _l === void 0 ? undefined : _l, _m = _a.showGroupTitles, showGroupTitles = _m === void 0 ? true : _m;
+    var _o = useState(false), isOpen = _o[0], setIsOpen = _o[1];
+    var dropdownRef = useRef(null);
+    // Close dropdown when clicking outside
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    var handleToggleDropdown = function () {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    var handleOptionSelect = function (option) {
+        if (disabled)
+            return;
+        var locationData = {
+            id: option.id,
+            locationName: option.label,
+        };
+        onSelectionChange(locationData);
+        setIsOpen(false);
+    };
+    var getSelectedOption = function () {
+        if (!selectedValue)
+            return null;
+        // Search in flat options
+        var flatOption = options.find(function (opt) { return opt.id === selectedValue; });
+        if (flatOption)
+            return flatOption;
+        // Search in groups
+        for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
+            var group = groups_1[_i];
+            var groupOption = group.options.find(function (opt) { return opt.id === selectedValue; });
+            if (groupOption)
+                return groupOption;
+        }
+        return null;
+    };
+    var getIconForType = function (optionType) {
+        switch (optionType) {
+            case 'airport':
+                return 'plane';
+            case 'port':
+                return 'ship';
+            case 'accommodation':
+                return 'map-pin';
+            default:
+                return 'map-pin';
+        }
+    };
+    var getInputIcon = function () {
+        if (selectedOption) {
+            // For airports, show arrival/departure based on direction
+            console.log({ direction: direction });
+            if (selectedOption.type === 'airport' && direction) {
+                return direction === 'pickup' ? 'arrival' : 'departure';
+            }
+            return getIconForType(selectedOption.type);
+        }
+        // Use arrival/departure icons based on direction for pickup/dropoff types
+        if ((type === 'pickup-dropoff' || type === 'airport-port') && direction) {
+            return direction === 'pickup' ? 'arrival' : 'departure';
+        }
+        return 'map-pin';
+    };
+    var getOptionIcon = function (option, isSelected) {
+        // For selected airports, show arrival/departure based on direction
+        if (isSelected && option.type === 'airport' && direction) {
+            return direction === 'pickup' ? 'arrival' : 'departure';
+        }
+        // For other types (port, accommodation), show their specific icon
+        return getIconForType(option.type);
+    };
+    var getDropdownState = function () {
+        if (disabled)
+            return 'disabled';
+        if (error)
+            return 'error';
+        if (isOpen)
+            return 'open';
+        if (selectedValue)
+            return 'selected';
+        return 'default';
+    };
+    var selectedOption = getSelectedOption();
+    var displayText = selectedOption ? selectedOption.label : placeholder;
+    // Prepare all options (flat or grouped)
+    var allOptions = groups.length > 0 ? groups : [{ id: 'default', label: '', options: options }];
+    return (_jsxs("div", __assign({ ref: dropdownRef, className: "location-dropdown location-dropdown--".concat(type, " ").concat(className) }, { children: [label && (_jsx("div", __assign({ className: "location-dropdown__label" }, { children: _jsx(Text, __assign({ size: "sm", variant: "medium" }, { children: label })) }))), _jsxs("div", __assign({ className: "location-dropdown__input location-dropdown__input--".concat(getDropdownState()), onClick: handleToggleDropdown }, { children: [_jsxs("div", __assign({ className: "location-dropdown__input-content" }, { children: [_jsx(Icon, { name: getInputIcon(), size: "sm", className: "location-dropdown__input-icon ".concat(!selectedOption ? 'location-dropdown__input-icon--placeholder' : '') }), _jsx("span", __assign({ 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 && (_jsx("div", __assign({ className: "location-dropdown__panel" }, { children: _jsx("div", __assign({ className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") } }, { children: _jsx("div", __assign({ className: "location-dropdown__options-wrapper" }, { children: allOptions.map(function (group, groupIndex) { return (_jsxs("div", __assign({ className: "location-dropdown__group" }, { children: [showGroupTitles && group.label && groups.length > 0 && (_jsxs(_Fragment, { children: [groupIndex > 0 && _jsx("div", { className: "location-dropdown__divider" }), _jsx("div", __assign({ className: "location-dropdown__group-header" }, { children: _jsx(Text, __assign({ size: "xs", variant: "bold" }, { children: group.label })) }))] })), _jsx("div", __assign({ className: "location-dropdown__group-options" }, { children: group.options.map(function (option) {
+                                        var isSelected = selectedValue === option.id;
+                                        var isDisabled = option.disabled || disabled;
+                                        return (_jsxs("div", __assign({ 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", __assign({ className: "location-dropdown__option-text" }, { children: option.label }))] }), option.id));
+                                    }) }))] }), group.id)); }) })) })) })))] })));
+};
+export default LocationDropdown;

package/dist/components/molecules/LocationDropdown/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './LocationDropdown';
-export type { LocationDropdownProps, LocationOption, LocationGroup } from './LocationDropdown';
+export { default } from './LocationDropdown';
+export type { LocationDropdownProps, LocationOption, LocationGroup } from './LocationDropdown';

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

@@ -1 +1 @@
-export { default } from './LocationDropdown';
+export { default } from './LocationDropdown';

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

@@ -1,29 +1,29 @@
-import React from 'react';
-export interface MultiSelectOption {
-    id: string;
-    label: string;
-    disabled?: boolean;
-    imageUrl?: string;
-}
-export interface MultiSelectGroup {
-    id: string;
-    label: string;
-    options: MultiSelectOption[];
-    imageUrl?: string;
-}
-export interface MultiSelectDropdownProps {
-    options: MultiSelectOption[];
-    selectedValues: string[];
-    placeholder?: string;
-    onSelectionChange: (selectedIds: string[]) => void;
-    disabled?: boolean;
-    error?: boolean;
-    className?: string;
-    maxDisplayedChips?: number;
-    selectedValueVariant?: 'filled' | 'text';
-    searchable?: boolean;
-    searchPlaceholder?: string;
-    groups?: MultiSelectGroup[];
-}
-declare const MultiSelectDropdown: React.FC<MultiSelectDropdownProps>;
-export default MultiSelectDropdown;
+import React from 'react';
+export interface MultiSelectOption {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    imageUrl?: string;
+}
+export interface MultiSelectGroup {
+    id: string;
+    label: string;
+    options: MultiSelectOption[];
+    imageUrl?: string;
+}
+export interface MultiSelectDropdownProps {
+    options: MultiSelectOption[];
+    selectedValues: string[];
+    placeholder?: string;
+    onSelectionChange: (selectedIds: string[]) => void;
+    disabled?: boolean;
+    error?: boolean;
+    className?: string;
+    maxDisplayedChips?: number;
+    selectedValueVariant?: 'filled' | 'text';
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    groups?: MultiSelectGroup[];
+}
+declare const MultiSelectDropdown: React.FC<MultiSelectDropdownProps>;
+export default MultiSelectDropdown;

package/dist/components/molecules/MultiSelectDropdown/MultiSelectDropdown.js

@@ -1,106 +1,106 @@
-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 } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
-import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
-import Input from '../../atoms/Inputs/Input/Input';
-import Checkbox from '../../atoms/Checkbox/Checkbox';
-import SelectedValue from '../../atoms/SelectedValue/SelectedValue';
-import { Text } from '../../atoms/Typography/Typography';
-var MultiSelectDropdown = function (_a) {
-    var options = _a.options, selectedValues = _a.selectedValues, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select items' : _b, onSelectionChange = _a.onSelectionChange, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.maxDisplayedChips, maxDisplayedChips = _f === void 0 ? 3 : _f, _g = _a.selectedValueVariant, selectedValueVariant = _g === void 0 ? 'filled' : _g, _h = _a.searchable, searchable = _h === void 0 ? false : _h, _j = _a.searchPlaceholder, searchPlaceholder = _j === void 0 ? 'Search' : _j, groups = _a.groups;
-    var _k = useState(false), isOpen = _k[0], setIsOpen = _k[1];
-    var _l = useState(''), query = _l[0], setQuery = _l[1];
-    var dropdownRef = useRef(null);
-    // Close dropdown when clicking outside
-    useEffect(function () {
-        var handleClickOutside = function (event) {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, []);
-    var handleToggleDropdown = function () {
-        if (!disabled) {
-            setIsOpen(!isOpen);
-        }
-    };
-    var handleOptionToggle = function (optionId) {
-        if (disabled)
-            return;
-        var isSelected = selectedValues.includes(optionId);
-        var newSelectedValues;
-        if (isSelected) {
-            newSelectedValues = selectedValues.filter(function (id) { return id !== optionId; });
-        }
-        else {
-            newSelectedValues = __spreadArray(__spreadArray([], selectedValues, true), [optionId], false);
-        }
-        onSelectionChange(newSelectedValues);
-    };
-    var handleRemoveChip = function (optionId) {
-        if (disabled)
-            return;
-        var newSelectedValues = selectedValues.filter(function (id) { return id !== optionId; });
-        onSelectionChange(newSelectedValues);
-    };
-    var getSelectedOptions = function () {
-        return options.filter(function (option) { return selectedValues.includes(option.id); });
-    };
-    var getFilteredOptions = function () {
-        if (!searchable || query.trim() === '')
-            return options;
-        var q = query.toLowerCase();
-        return options.filter(function (o) { return o.label.toLowerCase().includes(q); });
-    };
-    var getDisplayedChips = function () {
-        var selectedOptions = getSelectedOptions();
-        return selectedOptions.slice(0, maxDisplayedChips);
-    };
-    var getHiddenCount = function () {
-        return Math.max(0, selectedValues.length - maxDisplayedChips);
-    };
-    var getDropdownState = function () {
-        if (disabled)
-            return 'disabled';
-        if (error)
-            return 'error';
-        if (selectedValues.length > 0)
-            return 'selected';
-        return 'default';
-    };
-    return (_jsxs("div", __assign({ ref: dropdownRef, className: "multiselect-dropdown ".concat(className) }, { children: [_jsxs("div", __assign({ className: "multiselect-dropdown__input-container" }, { children: [_jsx(DropdownInput, { placeholder: selectedValues.length === 0 ? placeholder : '', state: getDropdownState(), onClick: handleToggleDropdown, className: "multiselect-dropdown__input" }), selectedValues.length > 0 && (_jsxs("div", __assign({ className: "multiselect-dropdown__chips" }, { children: [getDisplayedChips().map(function (option) { return (_jsx(SelectedValue, { value: option.label, onRemove: function () { return handleRemoveChip(option.id); }, className: "multiselect-dropdown__chip", size: "xs", iconSize: "xs", variant: selectedValueVariant }, option.id)); }), getHiddenCount() > 0 && (_jsxs("div", __assign({ className: "multiselect-dropdown__hidden-count" }, { children: ["+", getHiddenCount()] })))] })))] })), isOpen && (_jsxs("div", __assign({ className: "multiselect-dropdown__panel" }, { children: [_jsxs("div", __assign({ className: "multiselect-dropdown__menu" }, { children: [searchable && (_jsx("div", __assign({ className: "multiselect-dropdown__search" }, { children: _jsx(Input, { placeholder: searchPlaceholder, value: query, onChange: function (e) { return setQuery(e.target.value); }, icon: "search", iconPosition: "trailing" }) }))), _jsx("div", __assign({ className: "multiselect-dropdown__options" }, { children: groups && groups.length > 0 ? (groups.map(function (group) { return (_jsxs("div", __assign({ className: "multiselect-dropdown__group" }, { children: [_jsxs("div", __assign({ className: "multiselect-dropdown__group-header" }, { children: [group.imageUrl && (_jsx("span", __assign({ className: "multiselect-dropdown__group-icon", "aria-hidden": "true" }, { children: _jsx("img", { src: group.imageUrl, alt: "" }) }))), _jsx(Text, __assign({ size: "sm", variant: "medium" }, { children: group.label }))] })), _jsx("div", __assign({ className: "multiselect-dropdown__group-options" }, { children: getFilteredOptions()
-                                                .filter(function (o) { return group.options.some(function (go) { return go.id === o.id; }); })
-                                                .map(function (option) { return (_jsx("div", __assign({ className: "multiselect-dropdown__option" }, { children: _jsx(Checkbox, { checked: selectedValues.includes(option.id), disabled: option.disabled || disabled, label: option.label, leadingContent: option.imageUrl ? (_jsx("span", __assign({ className: "multiselect-dropdown__option-icon", "aria-hidden": "true" }, { children: _jsx("img", { src: option.imageUrl, alt: "" }) }))) : undefined, onChange: function (checked) {
-                                                        if (checked !== selectedValues.includes(option.id)) {
-                                                            handleOptionToggle(option.id);
-                                                        }
-                                                    } }) }), option.id)); }) }))] }), group.id)); })) : (getFilteredOptions().map(function (option) { return (_jsx("div", __assign({ className: "multiselect-dropdown__option" }, { children: _jsx(Checkbox, { checked: selectedValues.includes(option.id), disabled: option.disabled || disabled, label: option.label, leadingContent: option.imageUrl ? (_jsx("span", __assign({ className: "multiselect-dropdown__option-icon", "aria-hidden": "true" }, { children: _jsx("img", { src: option.imageUrl, alt: "" }) }))) : undefined, onChange: function (checked) {
-                                            if (checked !== selectedValues.includes(option.id)) {
-                                                handleOptionToggle(option.id);
-                                            }
-                                        } }) }), option.id)); })) }))] })), _jsx("div", __assign({ className: "multiselect-dropdown__footer" }, { children: _jsxs(Text, __assign({ size: "sm", variant: "regular", leading: "5", className: "multiselect-dropdown__footer-text" }, { children: [selectedValues.length, " item selected"] })) }))] })))] })));
-};
-export default MultiSelectDropdown;
+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 } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
+import Input from '../../atoms/Inputs/Input/Input';
+import Checkbox from '../../atoms/Checkbox/Checkbox';
+import SelectedValue from '../../atoms/SelectedValue/SelectedValue';
+import { Text } from '../../atoms/Typography/Typography';
+var MultiSelectDropdown = function (_a) {
+    var options = _a.options, selectedValues = _a.selectedValues, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select items' : _b, onSelectionChange = _a.onSelectionChange, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.maxDisplayedChips, maxDisplayedChips = _f === void 0 ? 3 : _f, _g = _a.selectedValueVariant, selectedValueVariant = _g === void 0 ? 'filled' : _g, _h = _a.searchable, searchable = _h === void 0 ? false : _h, _j = _a.searchPlaceholder, searchPlaceholder = _j === void 0 ? 'Search' : _j, groups = _a.groups;
+    var _k = useState(false), isOpen = _k[0], setIsOpen = _k[1];
+    var _l = useState(''), query = _l[0], setQuery = _l[1];
+    var dropdownRef = useRef(null);
+    // Close dropdown when clicking outside
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    var handleToggleDropdown = function () {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    var handleOptionToggle = function (optionId) {
+        if (disabled)
+            return;
+        var isSelected = selectedValues.includes(optionId);
+        var newSelectedValues;
+        if (isSelected) {
+            newSelectedValues = selectedValues.filter(function (id) { return id !== optionId; });
+        }
+        else {
+            newSelectedValues = __spreadArray(__spreadArray([], selectedValues, true), [optionId], false);
+        }
+        onSelectionChange(newSelectedValues);
+    };
+    var handleRemoveChip = function (optionId) {
+        if (disabled)
+            return;
+        var newSelectedValues = selectedValues.filter(function (id) { return id !== optionId; });
+        onSelectionChange(newSelectedValues);
+    };
+    var getSelectedOptions = function () {
+        return options.filter(function (option) { return selectedValues.includes(option.id); });
+    };
+    var getFilteredOptions = function () {
+        if (!searchable || query.trim() === '')
+            return options;
+        var q = query.toLowerCase();
+        return options.filter(function (o) { return o.label.toLowerCase().includes(q); });
+    };
+    var getDisplayedChips = function () {
+        var selectedOptions = getSelectedOptions();
+        return selectedOptions.slice(0, maxDisplayedChips);
+    };
+    var getHiddenCount = function () {
+        return Math.max(0, selectedValues.length - maxDisplayedChips);
+    };
+    var getDropdownState = function () {
+        if (disabled)
+            return 'disabled';
+        if (error)
+            return 'error';
+        if (selectedValues.length > 0)
+            return 'selected';
+        return 'default';
+    };
+    return (_jsxs("div", __assign({ ref: dropdownRef, className: "multiselect-dropdown ".concat(className) }, { children: [_jsxs("div", __assign({ className: "multiselect-dropdown__input-container" }, { children: [_jsx(DropdownInput, { placeholder: selectedValues.length === 0 ? placeholder : '', state: getDropdownState(), onClick: handleToggleDropdown, className: "multiselect-dropdown__input" }), selectedValues.length > 0 && (_jsxs("div", __assign({ className: "multiselect-dropdown__chips" }, { children: [getDisplayedChips().map(function (option) { return (_jsx(SelectedValue, { value: option.label, onRemove: function () { return handleRemoveChip(option.id); }, className: "multiselect-dropdown__chip", size: "xs", iconSize: "xs", variant: selectedValueVariant }, option.id)); }), getHiddenCount() > 0 && (_jsxs("div", __assign({ className: "multiselect-dropdown__hidden-count" }, { children: ["+", getHiddenCount()] })))] })))] })), isOpen && (_jsxs("div", __assign({ className: "multiselect-dropdown__panel" }, { children: [_jsxs("div", __assign({ className: "multiselect-dropdown__menu" }, { children: [searchable && (_jsx("div", __assign({ className: "multiselect-dropdown__search" }, { children: _jsx(Input, { placeholder: searchPlaceholder, value: query, onChange: function (e) { return setQuery(e.target.value); }, icon: "search", iconPosition: "trailing" }) }))), _jsx("div", __assign({ className: "multiselect-dropdown__options" }, { children: groups && groups.length > 0 ? (groups.map(function (group) { return (_jsxs("div", __assign({ className: "multiselect-dropdown__group" }, { children: [_jsxs("div", __assign({ className: "multiselect-dropdown__group-header" }, { children: [group.imageUrl && (_jsx("span", __assign({ className: "multiselect-dropdown__group-icon", "aria-hidden": "true" }, { children: _jsx("img", { src: group.imageUrl, alt: "" }) }))), _jsx(Text, __assign({ size: "sm", variant: "medium" }, { children: group.label }))] })), _jsx("div", __assign({ className: "multiselect-dropdown__group-options" }, { children: getFilteredOptions()
+                                                .filter(function (o) { return group.options.some(function (go) { return go.id === o.id; }); })
+                                                .map(function (option) { return (_jsx("div", __assign({ className: "multiselect-dropdown__option" }, { children: _jsx(Checkbox, { checked: selectedValues.includes(option.id), disabled: option.disabled || disabled, label: option.label, leadingContent: option.imageUrl ? (_jsx("span", __assign({ className: "multiselect-dropdown__option-icon", "aria-hidden": "true" }, { children: _jsx("img", { src: option.imageUrl, alt: "" }) }))) : undefined, onChange: function (checked) {
+                                                        if (checked !== selectedValues.includes(option.id)) {
+                                                            handleOptionToggle(option.id);
+                                                        }
+                                                    } }) }), option.id)); }) }))] }), group.id)); })) : (getFilteredOptions().map(function (option) { return (_jsx("div", __assign({ className: "multiselect-dropdown__option" }, { children: _jsx(Checkbox, { checked: selectedValues.includes(option.id), disabled: option.disabled || disabled, label: option.label, leadingContent: option.imageUrl ? (_jsx("span", __assign({ className: "multiselect-dropdown__option-icon", "aria-hidden": "true" }, { children: _jsx("img", { src: option.imageUrl, alt: "" }) }))) : undefined, onChange: function (checked) {
+                                            if (checked !== selectedValues.includes(option.id)) {
+                                                handleOptionToggle(option.id);
+                                            }
+                                        } }) }), option.id)); })) }))] })), _jsx("div", __assign({ className: "multiselect-dropdown__footer" }, { children: _jsxs(Text, __assign({ size: "sm", variant: "regular", leading: "5", className: "multiselect-dropdown__footer-text" }, { children: [selectedValues.length, " item selected"] })) }))] })))] })));
+};
+export default MultiSelectDropdown;

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

@@ -1,39 +1,39 @@
-import React from 'react';
-export interface RatingTabProps {
-    /**
-     * Label displayed next to the checkbox (e.g. "5 stars").
-     */
-    label: string;
-    /**
-     * Rating value displayed in the star row (0–max, typically 1–5).
-     */
-    ratingValue: number;
-    /**
-     * Maximum number of stars.
-     */
-    maxStars?: number;
-    /**
-     * Whether this tab is selected.
-     */
-    checked?: boolean;
-    /**
-     * Whether the tab is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Called when the selection state changes.
-     */
-    onChange?: (checked: boolean) => void;
-    /**
-     * Additional CSS classes for the container.
-     */
-    className?: string;
-}
-/**
- * RatingTab molecule
- *
- * Combines a checkbox-like selector, a label and the RatingStar atom.
- * Used for filters like "5 stars", "4 stars", etc.
- */
-declare const RatingTab: React.FC<RatingTabProps>;
-export default RatingTab;
+import React from 'react';
+export interface RatingTabProps {
+    /**
+     * Label displayed next to the checkbox (e.g. "5 stars").
+     */
+    label: string;
+    /**
+     * Rating value displayed in the star row (0–max, typically 1–5).
+     */
+    ratingValue: number;
+    /**
+     * Maximum number of stars.
+     */
+    maxStars?: number;
+    /**
+     * Whether this tab is selected.
+     */
+    checked?: boolean;
+    /**
+     * Whether the tab is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Called when the selection state changes.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Additional CSS classes for the container.
+     */
+    className?: string;
+}
+/**
+ * RatingTab molecule
+ *
+ * Combines a checkbox-like selector, a label and the RatingStar atom.
+ * Used for filters like "5 stars", "4 stars", etc.
+ */
+declare const RatingTab: React.FC<RatingTabProps>;
+export default RatingTab;