@pinuts/bsr-uikit-relaunch 0.2.23 → 0.2.26

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;;;;sBAwBC;;;;;;;kBAhCsD,OAAO;sBACxC,YAAY"}
+{"version":3,"file":"BSRAddressButtons.d.ts","sourceRoot":"","sources":["../../../src/items/BSRAddressSelector/BSRAddressButtons.jsx"],"names":[],"mappings":";AAQA;;;;sBAuBC;;;;;;;kBA/BsD,OAAO;sBACxC,YAAY"}

package/dist/items/BSRAddressSelector/BSRAddressButtons.js

@@ -39,8 +39,7 @@ const BSRAddressButtons = _ref => {
     inputProps: {
       ...inputProps,
       type: 'button'
-    },
-    color: "secondary"
+    }
   }));
 };
 BSRAddressButtons.propTypes = {
@@ -59,7 +58,6 @@ const FormBuilderAddressResetButton = _ref2 => {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(BSRAddressButtons, _extends({}, otherProps, {
-    color: "primary",
     config: config
   }));
 };
@@ -102,8 +100,7 @@ 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;;;sBAmKC;;;;;;;;;;;;;sBAnLqB,YAAY"}
+{"version":3,"file":"BSRAddressContext.d.ts","sourceRoot":"","sources":["../../../src/items/BSRAddressSelector/BSRAddressContext.js"],"names":[],"mappings":"AAeA,mDAAiD;;kBAf+B,OAAO;AAiBvF;;;sBA2KC;;;;;;;;;;;;;sBA3LqB,YAAY"}

package/dist/items/BSRAddressSelector/BSRAddressContext.js

@@ -100,6 +100,13 @@ const BSRAddressContextProvider = _ref => {
     setShowNoResultsError(false);
     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);
+    }
   }, [setFieldValue, setTriggerCancelCombox, fieldKeys, setShowNoResultsError]);
 
   // AdressePrüfenBtn anzeigen, wenn Straße und Hausnummer gesetzt sind

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

@@ -17,7 +17,6 @@ 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;;QAkRC;;;;;;;;;;;;;;;;;;;;sBAhUqB,YAAY"}
+{"version":3,"file":"BSRAutocompleteField.d.ts","sourceRoot":"","sources":["../../../src/items/BSRAddressSelector/BSRAutocompleteField.jsx"],"names":[],"mappings":";AA8CA;;QA2QC;;;;;;;;;;;;;;;;;;;sBAzTqB,YAAY"}

package/dist/items/BSRAddressSelector/BSRAutocompleteField.js

@@ -54,8 +54,7 @@ const BSRAutocompleteField = _ref => {
     viewMode,
     labelText,
     disabled,
-    readOnly,
-    suggestionsAmount = undefined
+    readOnly
   } = config;
   const {
     prevSelection,
@@ -101,20 +100,15 @@ const BSRAutocompleteField = _ref => {
     if (mountedRef) {
       const loadData = async () => {
         const searchQuery = selectedOptionId || searchInput;
-        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);
+        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);
           }
+        } catch (error) {
+          console.error(error);
         }
       };
       if (debounceTimeout) {
@@ -186,8 +180,10 @@ const BSRAutocompleteField = _ref => {
       }
     }, 50);
   }, [key, setFieldValue, labelFieldKey, groupKey, setSelectedOptionId, setPrevSelection]);
-  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 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 getPreviousSelectedItem = (0, _react.useCallback)(() => {
     return prevSelection?.value ? prevSelection.value : field.value;
   }, [prevSelection, field.value]);
@@ -263,8 +259,7 @@ BSRAutocompleteField.propTypes = {
     readOnly: _propTypes.default.bool,
     labelText: _propTypes.default.string,
     viewMode: _propTypes.default.bool,
-    disabled: _propTypes.default.bool,
-    suggestionsAmount: _propTypes.default.number
+    disabled: _propTypes.default.bool
   }).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":";AAgMA,iFAA6E;kBAhMtB,OAAO"}
+{"version":3,"file":"BSRStreetPlzSelector.d.ts","sourceRoot":"","sources":["../../../src/items/BSRAddressSelector/BSRStreetPlzSelector.jsx"],"names":[],"mappings":";AA+LA,iFAA6E;kBA/LtB,OAAO"}

package/dist/items/BSRAddressSelector/BSRStreetPlzSelector.js

@@ -140,8 +140,7 @@ 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,
-      color: "secondary"
+      onClick: onClickCheckAddressBtn
     }, 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 ps-3', formControlClassNames]),
+    className: getClassNames(['input mx-2 ps-4', formControlClassNames]),
     type: "number",
     step: step
   }, field, ariaAttributes, inputProps, {

package/dist/styles/_ariakit_combobox.scss

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

package/dist/styles/_form.scss

@@ -252,15 +252,6 @@ 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;
@@ -498,6 +489,7 @@ 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,83 +2,80 @@ $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, .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-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;
+    &.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;
+            }
+
+            &[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: 0.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: .4;
+                    cursor: not-allowed;
+                }
 
-        &.btn-outline-light {
-          background-color: transparent;
-          border-color: $value;
-          color: $value;
-          opacity: 0.4;
-          cursor: not-allowed;
-        }
-      } @else {
-        /*
+                &.btn-outline-light {
+                    background-color: transparent;
+                    border-color: $value;
+                    color: $value;
+                    opacity: .4;
+                    cursor: not-allowed;
+                }
+            } @else {
+                /*
                 &.btn-#{$color} {
                     background-color: shade-color($value, 100%) !important;
                     border-color: shade-color($value, 100%);
@@ -95,65 +92,67 @@ $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;
+    --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;
     }
-  }
-  &: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;
-  border-color: $secondary !important;
-  text-decoration: none;
-
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: $white !important;
-    color: $text-secondary !important;
+    padding: 0;
+    background-color: $secondary !important;
+    color: $light !important;
     border-color: $secondary !important;
-    text-decoration: underline;
-    border-width: $bsr-border-width-m !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;
+    }
 
-  &:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
 }

package/package.json

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