@pinuts/bsr-uikit-relaunch 0.2.26 → 0.2.27

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

@@ -1 +1 @@
-{"version":3,"file":"BSRAddressButtons.d.ts","sourceRoot":"","sources":["../../../src/items/BSRAddressSelector/BSRAddressButtons.jsx"],"names":[],"mappings":";AAQA;;;;sBAuBC;;;;;;;kBA/BsD,OAAO;sBACxC,YAAY"}
+{"version":3,"file":"BSRAddressButtons.d.ts","sourceRoot":"","sources":["../../../src/items/BSRAddressSelector/BSRAddressButtons.jsx"],"names":[],"mappings":";AAQA;;;;sBAwBC;;;;;;;kBAhCsD,OAAO;sBACxC,YAAY"}

package/dist/items/BSRAddressSelector/BSRAddressButtons.js

@@ -39,7 +39,8 @@ const BSRAddressButtons = _ref => {
     inputProps: {
       ...inputProps,
       type: 'button'
-    }
+    },
+    color: "secondary"
   }));
 };
 BSRAddressButtons.propTypes = {
@@ -58,6 +59,7 @@ const FormBuilderAddressResetButton = _ref2 => {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(BSRAddressButtons, _extends({}, otherProps, {
+    color: "primary",
     config: config
   }));
 };
@@ -100,7 +102,8 @@ const BSRAddressPLZSelectButton = _ref3 => {
       ...inputProps,
       type: 'button',
       disabled: showPlzSelectButton
-    }
+    },
+    color: "secondary"
   }));
 };
 BSRAddressPLZSelectButton.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"BSRAddressContext.d.ts","sourceRoot":"","sources":["../../../src/items/BSRAddressSelector/BSRAddressContext.js"],"names":[],"mappings":"AAeA,mDAAiD;;kBAf+B,OAAO;AAiBvF;;;sBA2KC;;;;;;;;;;;;;sBA3LqB,YAAY"}
+{"version":3,"file":"BSRAddressContext.d.ts","sourceRoot":"","sources":["../../../src/items/BSRAddressSelector/BSRAddressContext.js"],"names":[],"mappings":"AAeA,mDAAiD;;kBAf+B,OAAO;AAiBvF;;;sBAsKC;;;;;;;;;;;;;sBAtLqB,YAAY"}

package/dist/items/BSRAddressSelector/BSRAddressContext.js

@@ -101,13 +101,9 @@ const BSRAddressContextProvider = _ref => {
     setSelectedStreetList(null);
     setSelectedRadioValue(null);
     if (addressContext.doSubmitOnChange) {
-      window.setTimeout(() => {
-        // need a thread change to wait the form is re-rendered before submitting
-        // ==> react-dom.development.js:86 Warning: Cannot update a component (`Vr`) while rendering a different component
-        submitForm();
-      }, 1);
+      submitForm();
     }
-  }, [setFieldValue, setTriggerCancelCombox, fieldKeys, setShowNoResultsError]);
+  }, [setFieldValue, setTriggerCancelCombox, fieldKeys, setShowNoResultsError, submitForm, addressContext.doSubmitOnChange]);
 
   // AdressePrüfenBtn anzeigen, wenn Straße und Hausnummer gesetzt sind
 

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/items/BSRAddressSelector/BSRStreetPlzSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BSRStreetPlzSelector.d.ts","sourceRoot":"","sources":["../../../src/items/BSRAddressSelector/BSRStreetPlzSelector.jsx"],"names":[],"mappings":";AA+LA,iFAA6E;kBA/LtB,OAAO"}
+{"version":3,"file":"BSRStreetPlzSelector.d.ts","sourceRoot":"","sources":["../../../src/items/BSRAddressSelector/BSRStreetPlzSelector.jsx"],"names":[],"mappings":";AAgMA,iFAA6E;kBAhMtB,OAAO"}

package/dist/items/BSRAddressSelector/BSRStreetPlzSelector.js

@@ -140,7 +140,8 @@ const BSRStreetPlzSelector = props => {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, noResultsError, /*#__PURE__*/_react.default.createElement("div", {
       className: 'checkAddressBtn'
     }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: onClickCheckAddressBtn
+      onClick: onClickCheckAddressBtn,
+      color: "secondary"
     }, checkAddressStr)));
   }
   if (showNoResultsError) {

package/dist/items/NumberInputField/NumberInputField.js

@@ -107,7 +107,7 @@ const NumberInputField = _ref => {
     stroke: "white",
     fill: "white"
   })), /*#__PURE__*/_react.default.createElement("input", _extends({
-    className: getClassNames(['input mx-2 ps-4', formControlClassNames]),
+    className: getClassNames(['input ps-3', formControlClassNames]),
     type: "number",
     step: step
   }, field, ariaAttributes, inputProps, {

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/dist/styles/variables/_buttons.scss

@@ -2,80 +2,83 @@ $btn-border-radius: $border-radius-lg;
 $btn-padding-x: $base-gap * 6;
 $btn-padding-y: calc($base-gap * 2 - 1px);
 
-.btn, .pi-form-button button {
-    text-decoration: underline;
-    text-decoration-color: transparent;
-    transition-duration: 0.15s;
-    transition-timing-function: ease-in-out;
-    display: inline-flex;
-    align-items: center;
-    border-width: $bsr-border-width-m;
-
-    &[class*="btn-outline-"]:not([class*="btn-outline-light"]){
-        --bs-btn-bg: #{$bsr-white-100};
-
-        &:hover:not([aria-disabled="true"]){
-            border-color: $bsr-white-100;
-        }
-    }
-    &.btn-outline-light:hover {
-        background-color: $bsr-white-100;;
-        color: $text-secondary;
-        border-color: $bsr-white-100;
+.btn,
+.pi-form-button button {
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition-duration: 0.15s;
+  transition-timing-function: ease-in-out;
+  display: inline-flex;
+  align-items: center;
+  border-width: $bsr-border-width-m;
+
+  &[class*="btn-outline-"]:not([class*="btn-outline-light"]) {
+    --bs-btn-bg: #{$bsr-white-100};
+
+    &:hover:not([aria-disabled="true"]) {
+      border-color: $bsr-white-100;
     }
-    &.btn-outline-light:focus-visible {
+  }
+  &.btn-outline-light:hover {
+    background-color: $bsr-white-100;
+    color: $text-secondary;
+    border-color: $bsr-white-100;
+  }
+  &.btn-outline-light:focus-visible {
+    color: $bsr-white-100;
+  }
+
+  &:hover {
+    text-decoration-color: currentColor;
+
+    &:not([class*="btn-outline-"]):not([class*="teaserBtnAtom"]):not(
+        [class*="editingBtnAtom"]
+      ):not([class*="iconOnlyBtnAtom"]) {
+      background-color: $bsr-white-100;
+      color: $bsr-brick-100;
+      border-color: var(--bs-btn-bg);
+
+      &[class*="btn-light"] {
+        background-color: $bsr-brick-100;
         color: $bsr-white-100;
-    }
-
-    &:hover {
-        text-decoration-color: currentColor;
-        
-        &:not([class*="btn-outline-"]):not([class*="teaserBtnAtom"]):not([class*="editingBtnAtom"]):not([class*="iconOnlyBtnAtom"]) {
-
-            background-color: $bsr-white-100;
-            color: $bsr-brick-100;
-            border-color: var(--bs-btn-bg);
-            
-            &[class*="btn-light"] {
-                background-color: $bsr-brick-100;
-                color: $bsr-white-100;
-            }
-
-            &[aria-disabled="true"]:not([class*="btn-outline-light"]) {
-                background-color: $bsr-black-90;
-                color: $bsr-white-100;
-                border-color: $bsr-black-90;
-            }
-        }
+      }
 
+      &[aria-disabled="true"]:not([class*="btn-outline-light"]) {
+        background-color: $bsr-black-90;
+        color: $bsr-white-100;
+        border-color: $bsr-black-90;
+      }
     }
+  }
 
-    &:active {
-        text-decoration: none;
-    }
+  &:active {
+    text-decoration: none;
+  }
 
-    &[aria-disabled="true"], .disabled, &:disabled {
-        text-decoration: none;
+  &[aria-disabled="true"],
+  .disabled,
+  &:disabled {
+    text-decoration: none;
 
-        @each $color, $value in $theme-colors {
-            @if $color == "light" {
-                &.btn-light {
-                    background-color: $value;
-                    border-color: currentColor;
-                    color: $bsr-brick-100;
-                    opacity: .4;
-                    cursor: not-allowed;
-                }
+    @each $color, $value in $theme-colors {
+      @if $color == "light" {
+        &.btn-light {
+          background-color: $value;
+          border-color: currentColor;
+          color: $bsr-brick-100;
+          opacity: 0.4;
+          cursor: not-allowed;
+        }
 
-                &.btn-outline-light {
-                    background-color: transparent;
-                    border-color: $value;
-                    color: $value;
-                    opacity: .4;
-                    cursor: not-allowed;
-                }
-            } @else {
-                /*
+        &.btn-outline-light {
+          background-color: transparent;
+          border-color: $value;
+          color: $value;
+          opacity: 0.4;
+          cursor: not-allowed;
+        }
+      } @else {
+        /*
                 &.btn-#{$color} {
                     background-color: shade-color($value, 100%) !important;
                     border-color: shade-color($value, 100%);
@@ -92,67 +95,65 @@ $btn-padding-y: calc($base-gap * 2 - 1px);
                     cursor: not-allowed;
                 }
                 */
-            }
-        }
-
+      }
     }
+  }
 }
 
 .btn.btn-light {
-    --bs-btn-color: #{$bsr-brick-100};
-    &:hover {
-        &[aria-disabled="true"]{
-            background-color: $bsr-white-100 !important;
-            color: $bsr-brick-100 !important;
-            border-color: $bsr-brick-100 !important;
-        }
-    }
-    &:focus {
-        background-color: $bsr-white-100 !important;
-        color: $bsr-black-90!important;
-        box-shadow: 0 0 0 0.25rem rgba($bsr-white-100, .5)!important;
+  --bs-btn-color: #{$bsr-brick-100};
+  &:hover {
+    &[aria-disabled="true"] {
+      background-color: $bsr-white-100 !important;
+      color: $bsr-brick-100 !important;
+      border-color: $bsr-brick-100 !important;
     }
+  }
+  &:focus {
+    background-color: $bsr-white-100 !important;
+    color: $bsr-black-90 !important;
+    box-shadow: 0 0 0 0.25rem rgba($bsr-white-100, 0.5) !important;
+  }
 }
 
 .btn.btn-outline-light {
-    --bs-btn-hover-color: #{$bsr-brick-100} !important;
-    background: $bsr-brick-100;
+  --bs-btn-hover-color: #{$bsr-brick-100} !important;
+  background: $bsr-brick-100;
 
-    &.btn:active {
-        --bs-btn-active-color: #{$bsr-brick-100};
-    }
+  &.btn:active {
+    --bs-btn-active-color: #{$bsr-brick-100};
+  }
 }
 
 .btn[class*="editingBtnAtom"] {
-    font-size: $editingBtn-font-size;
-    line-height: $editingBtnAtom-line-height;
-    letter-spacing: $letter-spacing-xs;
-    font-weight: $fontweight-bold;
-    &[aria-disabled="true"] {
-        opacity: 0.4;
-    }
+  font-size: $editingBtn-font-size;
+  line-height: $editingBtnAtom-line-height;
+  letter-spacing: $letter-spacing-xs;
+  font-weight: $fontweight-bold;
+  &[aria-disabled="true"] {
+    opacity: 0.4;
+  }
 }
 
 .btn[class*="iconOnlyBtnAtom"]:not([class*="btn-outline-brick"]) {
-    padding: 0;
-    background-color: $secondary !important;
-    color: $light !important;
+  padding: 0;
+  background-color: $secondary !important;
+  color: $light !important;
+  border-color: $secondary !important;
+  text-decoration: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $white !important;
+    color: $text-secondary !important;
     border-color: $secondary !important;
-    text-decoration: none;
-
-    &:hover,
-    &:focus,
-    &:active {
-        background-color: $white !important;
-        color: $text-secondary !important;
-        border-color: $secondary !important;
-        text-decoration: underline;
-        border-width: $bsr-border-width-m !important;
-    }
-
-    &:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
+    text-decoration: underline;
+    border-width: $bsr-border-width-m !important;
+  }
 
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 }

package/package.json

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