mautourco-components 0.2.45 → 0.2.47

package/src/components/molecules/AgeSelector/AgeSelector.tsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useRef, useState } from 'react';
+import '../../../styles/components/molecule/age-selector.css';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+
+export interface AgeSelectorProps {
+  /** Label for the selector */
+  label: string;
+  /** Current selected age value */
+  value: number | undefined;
+  /** Callback when age changes */
+  onChange: (age: number) => void;
+  /** Available age range */
+  ageRange: number[];
+  /** Whether the field is required */
+  required?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Placeholder text */
+  placeholder?: string;
+}
+
+const AgeSelector: React.FC<AgeSelectorProps> = ({
+  label,
+  value,
+  onChange,
+  ageRange,
+  required = false,
+  className = '',
+  placeholder = '--',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState<string>(
+    value !== undefined ? value.toString() : ''
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync input value when prop value changes
+  useEffect(() => {
+    setInputValue(value !== undefined ? value.toString() : '');
+  }, [value]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const 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
+      const numValue = parseInt(newValue, 10);
+      if (newValue === '') {
+        // Allow empty input - don't update onChange
+        return;
+      } else if (!isNaN(numValue) && ageRange.includes(numValue)) {
+        onChange(numValue);
+      }
+    }
+  };
+
+  const handleInputBlur = () => {
+    // Validate and set to valid value or clear if invalid
+    const 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());
+    }
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      inputRef.current?.blur();
+    }
+  };
+
+  const handleSelect = (age: string) => {
+    const numAge = parseInt(age, 10);
+    onChange(numAge);
+    setIsOpen(false);
+    setInputValue(age);
+  };
+
+  const handleDropdownToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const ageOptions = ageRange.map((age) => age.toString());
+
+  return (
+    <div className={`age-selector ${className}`} ref={containerRef}>
+      <Text size="sm" variant="regular" className="age-selector__label">
+        {label}
+        {required && <span className="age-selector__required"> *</span>}
+      </Text>
+      <div className="age-selector__container">
+        <div
+          className={`age-selector__input ${isOpen ? 'age-selector__input--open' : ''} ${value !== undefined ? 'age-selector__input--selected' : 'age-selector__input--default'}`}>
+          <input
+            ref={inputRef}
+            type="text"
+            inputMode="numeric"
+            className="age-selector__input-field"
+            value={inputValue}
+            onChange={handleInputChange}
+            onBlur={handleInputBlur}
+            onKeyDown={handleInputKeyDown}
+            onFocus={() => setIsOpen(false)}
+            placeholder={placeholder}
+            aria-label={`${label} age`}
+          />
+          <button
+            type="button"
+            className="age-selector__dropdown-btn"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleDropdownToggle();
+            }}
+            aria-expanded={isOpen}
+            aria-haspopup="listbox"
+            aria-label="Open age dropdown">
+            <Icon
+              name="chevron-down"
+              size="sm"
+              className={`age-selector__icon ${isOpen ? 'age-selector__icon--open' : ''}`}
+            />
+          </button>
+        </div>
+        {isOpen && (
+          <div className="age-selector__dropdown" role="listbox">
+            {ageOptions.map((age) => (
+              <div
+                key={age}
+                className={`age-selector__option ${value?.toString() === age ? 'age-selector__option--selected' : ''}`}
+                onClick={() => handleSelect(age)}
+                role="option"
+                aria-selected={value?.toString() === age}>
+                {age}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AgeSelector;

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

@@ -189,7 +189,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   return (
     <div
       ref={dropdownRef}
-      className={`location-dropdown location-dropdown--${type} ${className}`}>
+      className={`location-dropdown location-dropdown--${type} ${disabled ? 'location-dropdown--disabled' : ''} ${className}`}>
       {label && (
         <div className="location-dropdown__label">
           <Text size="sm" variant="medium">