rbro-tat-uds 2.2.11 → 2.2.13

package/build/esm/components/CityPicker/CityPicker.js

@@ -8,6 +8,7 @@ import { colors } from '../../utils';
 import Button from '../Button/Button.js';
 import Icon from '../Icon/Icon.js';
 import { cities } from './cities.js';
+import { cities_extended } from './cities-extended.js';
 
 const _size = {
   medium: css`
@@ -37,6 +38,7 @@ const CityPickerStyled = styled.div`
   }
 
   & > input {
+    box-sizing: border-box;
     border-radius: 8px;
     border: none;
     outline: none;
@@ -210,6 +212,7 @@ const CityPicker = ({
   size = "medium",
   intent = "default",
   disabled = false,
+  extend = false,
   ...rest
 }) => {
   const wrapper_reference = useRef(null);
@@ -221,16 +224,19 @@ const CityPicker = ({
   const [clasificare, setClasificare] = useState("");
   const [labeled, setLabeled] = useState("");
   const isDirty = useRef(false);
+  const cityData = useMemo(() => {
+    return extend ? cities_extended : cities;
+  }, [extend]);
   const localitatiData = useMemo(() => {
     if (!judet || !isJudetPicked) return [];
-    return cities.find(
+    return cityData.find(
       (judetItem) => judetItem.title.toLowerCase() === judet.toLowerCase()
     )?.localitati ?? [];
   }, [judet, isJudetPicked]);
   const filteredItems = useMemo(() => {
     const searchTerm = searchField.toLowerCase();
-    if (!searchTerm) return isJudetPicked ? localitatiData : cities;
-    return (isJudetPicked ? localitatiData : cities).filter(
+    if (!searchTerm) return isJudetPicked ? localitatiData : cityData;
+    return (isJudetPicked ? localitatiData : cityData).filter(
       (item) => item.title.toLowerCase().includes(searchTerm)
     );
   }, [searchField, isJudetPicked, localitatiData]);