@pinuts/bsr-uikit-relaunch 0.2.18 → 0.2.20

package/dist/items/BSRAddressSelector/BSRAutocompleteField.d.ts

@@ -17,6 +17,7 @@ declare namespace BSRAutocompleteField {
             labelText: PropTypes.Requireable<string>;
             viewMode: PropTypes.Requireable<boolean>;
             disabled: PropTypes.Requireable<boolean>;
+            suggestionsAmount: PropTypes.Requireable<number>;
         }>>>;
     }
 }

package/dist/items/BSRAddressSelector/BSRAutocompleteField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BSRAutocompleteField.d.ts","sourceRoot":"","sources":["../../../src/items/BSRAddressSelector/BSRAutocompleteField.jsx"],"names":[],"mappings":";AA8CA;;QA2QC;;;;;;;;;;;;;;;;;;;sBAzTqB,YAAY"}
+{"version":3,"file":"BSRAutocompleteField.d.ts","sourceRoot":"","sources":["../../../src/items/BSRAddressSelector/BSRAutocompleteField.jsx"],"names":[],"mappings":";AA8CA;;QAkRC;;;;;;;;;;;;;;;;;;;;sBAhUqB,YAAY"}

package/dist/items/BSRAddressSelector/BSRAutocompleteField.js

@@ -54,7 +54,8 @@ const BSRAutocompleteField = _ref => {
     viewMode,
     labelText,
     disabled,
-    readOnly
+    readOnly,
+    suggestionsAmount = undefined
   } = config;
   const {
     prevSelection,
@@ -100,15 +101,20 @@ const BSRAutocompleteField = _ref => {
     if (mountedRef) {
       const loadData = async () => {
         const searchQuery = selectedOptionId || searchInput;
-        const url = `${controllerPath}streetNames/?searchQuery=${encodeURIComponent(searchQuery)}`;
-        try {
-          const dataArr = await fetchOptions(url);
-          // Nur State verändern, wenn Komponente gemounted ist
-          if (mountedRef && dataArr) {
-            setFetchedOptions(dataArr);
+        if (searchQuery.length > 2) {
+          const url = `${controllerPath}streetNames/?searchQuery=${encodeURIComponent(searchQuery)}`;
+          try {
+            const dataArr = await fetchOptions(url);
+            // Nur State verändern, wenn Komponente gemounted ist
+            if (mountedRef && dataArr) {
+              if (suggestionsAmount && dataArr.length > suggestionsAmount) {
+                dataArr.length = suggestionsAmount;
+              }
+              setFetchedOptions(dataArr);
+            }
+          } catch (error) {
+            console.error(error);
           }
-        } catch (error) {
-          console.error(error);
         }
       };
       if (debounceTimeout) {
@@ -180,10 +186,8 @@ const BSRAutocompleteField = _ref => {
       }
     }, 50);
   }, [key, setFieldValue, labelFieldKey, groupKey, setSelectedOptionId, setPrevSelection]);
-  const className = (0, _react.useMemo)(() => [_BSRAddressSelectorModule.default.comboboxWrapper, 'ariakit-combobox', 'form-control px-2 py-1', isFocused && 'focused', isInvalid && 'is-invalid'].filter(Boolean).join(' '), [isFocused, isInvalid]);
-  const formControlClassNames = (0, _index.getFormControlClassNames)(disabled, readOnly, disabled, 'w-75',
-  // 'combobox w-75',
-  ['input', field.className].filter(Boolean));
+  const className = (0, _react.useMemo)(() => [_BSRAddressSelectorModule.default.comboboxWrapper, _BSRAddressSelectorModule.default.formControl, _BSRAddressSelectorModule.default.ariakitCombobox, 'ariakit-combobox', 'form-control py-1 px-0', isFocused && 'focused', isInvalid && 'is-invalid'].filter(Boolean).join(' '), [isFocused, isInvalid]);
+  const formControlClassNames = (0, _index.getFormControlClassNames)(disabled, readOnly, disabled, ['input', field.className].filter(Boolean));
   const getPreviousSelectedItem = (0, _react.useCallback)(() => {
     return prevSelection?.value ? prevSelection.value : field.value;
   }, [prevSelection, field.value]);
@@ -259,7 +263,8 @@ BSRAutocompleteField.propTypes = {
     readOnly: _propTypes.default.bool,
     labelText: _propTypes.default.string,
     viewMode: _propTypes.default.bool,
-    disabled: _propTypes.default.bool
+    disabled: _propTypes.default.bool,
+    suggestionsAmount: _propTypes.default.number
   }).isRequired
 };
 const HigherOrderAutocompleteField = (0, _withFieldGroup.default)(BSRAutocompleteField);

package/dist/styles/_ariakit_combobox.scss

@@ -85,6 +85,8 @@
 
 .comboboxPopoverWrapper {
   // popover darf kein outline haben
+  background: $bsr-white-100;
+
   :focus-visible {
     outline: 0;
     border: 0;
@@ -103,18 +105,16 @@
 
   div[role="listbox"] {
     overflow-x: hidden;
-    // border-radius: $border-radius;
+    background: $bsr-white-100;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     border-top: none;
-    // border-color: currentColor;
-    //max-height: min(var(--popover-available-height, $popover-max-height), $popover-max-height);
-    //max-height: $popover-max-height;
-    padding: 0.3rem;
-    transform: translatey(0.6rem) translatex(-1rem);
+    padding-inline: 0;
+    padding-block: 4px;
+    transform: translateY(0.6rem);
 
     div[role="option"] {
-      font-weight: $sub-headline-font-size;
+      font-weight: $fontweight-normal;
       white-space: normal;
 
       &:active,
@@ -135,17 +135,13 @@
       }
 
       &[aria-selected="true"].selected {
-        background-color: $primary !important;
-        color: $white;
+        background-color: $bsr-black-30 !important;
+        color: $bsr-black-90;
       }
       &.selected {
         box-shadow: none;
-        background-color: $primary !important;
-        color: $white;
-
-        &:hover {
-          color: $white !important;
-        }
+        background-color: $bsr-black-30 !important;
+        color: $bsr-black-90;
       }
     }
   }
@@ -255,7 +251,7 @@
 
     &:focus,
     &:hover {
-      background-color: $bsr-brown-100;
+      background-color: $bsr-black-10;
       color: $bsr-black-90;
       cursor: pointer;
     }
@@ -270,13 +266,6 @@
     &:not(:last-child) {
       margin-bottom: 0.25rem;
     }
-
-    &[aria-selected="true"].selected {
-      &::after {
-        content: "✔";
-        margin-inline-start: 0.5rem;
-      }
-    }
   }
 }
 

package/dist/styles/_form.scss

@@ -252,6 +252,15 @@ fieldset.formInput {
   }
 }
 
+#addressSelector .row .col div.form-control.ariakit-combobox {
+  padding: $base-gap * 2 0 $base-gap * 3 0 !important;
+
+  input[role="combobox"] {
+    padding-inline: $base-gap * 4 !important;
+    width: 100% !important;
+  }
+}
+
 /* RADIO INPUT */
 input[type="radio"] {
   display: flex;
@@ -489,7 +498,6 @@ form input[type="checkbox"] + label:before {
     &:focus {
       &:is(button):not(.disabled) {
         background-color: $secondary;
-        color: $text-light;
 
         .closeBtn {
           color: $text-light;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinuts/bsr-uikit-relaunch",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "private": false,
   "description": "BSR UI-KIT Relaunch",
   "main": "dist/index.js",