@sapudex/web-components 0.111.0 → 0.114.2

package/src/themes/AccordionItem.css

@@ -1,10 +1,10 @@
 :host {
-  --udex-accordion-icon-color: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));
-  --udex-accordion-headline-color: var(--sapTextColor, var(--udexCoreTextDark));
-  --udex-accordion-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));
-  --udex-accordion-title-font-weight: var(--udexTypographyFontWeightMedium, 500);
-  --udex-accordion-border-color: var(--sapList_BorderColor, var(--udexColorGrey4));
-  --udex-accordion-border-width: .5px;
+  --udex-accordion-item-icon-color: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));
+  --udex-accordion-item-headline-color: var(--sapTextColor, var(--udexCoreTextDark));
+  --udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));
+  --udex-accordion-item-title-font-weight: var(--udexTypographyFontWeightMedium, 500);
+  --udex-accordion-item-border-color: var(--sapList_BorderColor, var(--udexColorGrey4));
+  --udex-accordion-item-border-width: .5px;
   --udex-accordion-item-header-padding: 12px 12px 12px 8px;
   --udex-accordion-item-content-margin: var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);
   font-family: var(--sapFontFamily, sans-serif);
@@ -17,26 +17,26 @@
 
 .udex-accordion-item__header {
   align-items: center;
-  color: var(--udex-accordion-headline-color);
+  color: var(--udex-accordion-item-headline-color);
   display: flex;
-  font-size: var(--udex-accordion-headline-font-size);
+  font-size: var(--udex-accordion-item-headline-font-size);
   gap: var(--udexSpacer12, 12px);
   padding: var(--udex-accordion-item-header-padding);
   line-height: var(--udexTypographyHeadingLineHeight, 1.1);
-  border-bottom: var(--udex-accordion-border-width) solid var(--udex-accordion-border-color);
+  border-bottom: var(--udex-accordion-item-border-width) solid var(--udex-accordion-item-border-color);
   cursor: pointer;
 }
 
 :host([desktop]) .udex-accordion-item__header:focus,
 .udex-accordion-item__header:focus-visible {
-  outline: 2px solid #002A86;
-  border-radius: 8px;
+  outline: 2px solid var(--udexColorBlue10, #002A86);
+  border-radius: var(--udexRadiusM, 8px);
 }
 
 .udex-accordion-item__icon {
   height: var(--udex-button-icon-l-size, 18px);
   width: var(--udex-button-icon-l-size, 18px);
-  color: var(--udex-accordion-icon-color);
+  color: var(--udex-accordion-item-icon-color);
   transform: rotate(0);
 }
 
@@ -61,9 +61,9 @@
 }
 
 .udex-accordion-item__title {
-  margin: 0;
-  font-weight: var(--udex-accordion-title-font-weight);
-  flex: 1;
+  font-weight: var(--udex-accordion-item-title-font-weight);
+  align-items: center;
+  display: flex;
 }
 
 .udex-accordion-item__content {
@@ -78,3 +78,8 @@
 .active .udex-accordion-item__content {
   display: block;
 }
+
+.udex-accordion-item__badge {
+  display: inline-flex;
+  margin-inline-start: var(--udexSpacer8);
+}

package/src/themes/Breadcrumbs.css

@@ -1,7 +1,7 @@
 :host {
   --udex-breadcrumbs-item-color: var(--sapNeutralElementColor, var(--udexColorGrey6, #5B738B ));
   --udex-breadcrumbs-item-font-size: var(--udexTypographyBodyXXSFontSize, 12px);
-  --udex-breadcrumbs_margin: 0;
+  --udex-breadcrumbs-margin: 0;
 }
 
 .udex-breadcrumbs {
@@ -22,6 +22,7 @@
 
 .udex-breadcrumbs > ol > li {
   display: inline-flex;
+  align-items: baseline;
 }
 
 .udex-breadcrumbs__separator::after {
@@ -120,6 +121,7 @@
   padding-left: 0;
 }
 
-.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon]:after, .udex-breadcrumbs__arrow-wrapper:hover [ui5-icon]:after {
+.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon]:after,
+.udex-breadcrumbs__arrow-wrapper:hover [ui5-icon]:after {
   border-bottom: 0;
 }

package/src/themes/CountrySelector.css

@@ -2,6 +2,9 @@
   --udex-country-selector-flag-width: 30px;
   --udex-country-selector-flag-height: 20px;
   --udex-country-selector-input-disabled-opacity: var(--sapContent_DisabledOpacity, 0.4);
+  --udex-country-selector-min-width: 320px;
+  --udex-country-selector-max-width: 100%;
+  --udex-country-selector-min-width-xs-and-s: 100%;
 }
 
 .udex-country-selector__text {
@@ -18,11 +21,19 @@
   right: var(--udexSpacer32);
 }
 
+@media (width < 640px) {
+  .udex-country-selector__trigger{
+    min-width: var(--udex-country-selector-min-width-xs-and-s);
+  }
+}
+
 .udex-country-selector__trigger {
   display: flex;
   align-items: center;
   position: relative;
-  width: max-content;
+  max-width: var(--udex-country-selector-max-width);
+  min-width: var(--udex-country-selector-min-width);
+  width: 100%;
 }
 
 :host(:not([disabled]):not([displayonly]):not([readonly])) .udex-country-selector__trigger {

package/src/themes/DatePicker.css

@@ -10,7 +10,7 @@
 }
 
 .udex-date-picker__calendar {
-  min-width: var(--udex-date-picker-width, 354px);
+  min-width: var(--udex-date-picker-width);
   background-color: var(--udexNeutralColorWhite, #ffffff);
   border-radius: 8px;
   box-shadow: 0 2px 8px 0 #2236494D;

package/src/themes/Dropdown.css

@@ -6,8 +6,8 @@
   --udex-dropdown-default-background-color: var(--udexColorNeutralWhite, #fff);
   --udex-dropdown-horizontal-distance: 0;
   --udex-dropdown-vertical-distance: 0;
-  --udex-dropdown-pane-max-width: 640px;
   --udex-dropdown-pane-min-width: 320px;
+  --udex-dropdown-pane-width: fit-content;
   --udex-dropdown-pane-max-height: none;
   --udex-dropdown-pane-overflow: visible;
   --udex-dropdown-pane-content-overflow: auto;
@@ -19,7 +19,7 @@
   border-radius: var(--udex-dropdown-border-radius);
   background: var(--udex-dropdown-default-background-color);
   min-width: var(--udex-dropdown-pane-min-width);
-  max-width: var(--udex-dropdown-pane-max-width);
+  width: var(--udex-dropdown-pane-width);
   max-height: var(--udex-dropdown-pane-max-height);
   margin: var(--udex-dropdown-vertical-distance) var(--udex-dropdown-horizontal-distance);
   overflow: var(--udex-dropdown-pane-overflow);

package/src/themes/InputGroup.css

@@ -0,0 +1,19 @@
+.udex-input-group__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udexSpacer4);
+}
+
+:host([orientation="Horizontal"]) .udex-input-group__content {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--udexSpacer12);
+}
+
+.udex-input-group__content {
+  padding-bottom: var(--udexSpacer4);
+}
+
+.hidden-text {
+  display: none;
+}

package/src/themes/MastheadItem.css

@@ -153,6 +153,8 @@
   border-radius: var(--udex-masthead-item-border-radius);
 }
 
+:host(:active) .udex-masthead-item.udex-masthead-item__button--icon:after,
+:host([selected]) .udex-masthead-item.udex-masthead-item__button--icon:after,
 :host(:active) .udex-masthead-item.udex-masthead-item__button--profile:after,
 :host([selected]) .udex-masthead-item.udex-masthead-item__button--profile:after {
   bottom: -14px;
@@ -165,13 +167,6 @@
   color:var(--udex-masthead-item-color-active);
 }
 
-:host(:active) .udex-masthead-item.udex-masthead-item__button--icon:after,
-:host([selected]) .udex-masthead-item.udex-masthead-item__button--icon:after{
-  bottom: -20px;
-  left: -7px;
-  right: -7px;
-}
-
 .udex-masthead-item__icon-container {
   display: flex;
   align-items: center;

package/src/themes/MastheadMenuItem.css

@@ -160,10 +160,6 @@ button.udex-masthead-menu-item {
 }
 
 @media (max-width: 1279px) {
-  :host([has-border]) .udex-masthead-menu-item_is-list{
-    border-bottom: none
-  }
-
   .udex-masthead-menu-item {
     padding: var(--udex-masthead-menu-item-padding-mobile);
   }

package/src/themes/MastheadShell.css

@@ -124,16 +124,12 @@
 .udex-masthead-shell__right-menu {
   display: flex;
   align-items: center;
+  gap: var(--udexSpacer8);
 }
 
 .udex-masthead-shell__explore {
   white-space: nowrap;
-  margin-inline-end: var(--udexSpacer20);
-}
-
-.udex-masthead-shell__cart,
-.udex-masthead-shell__search-icon {
-  margin-inline-end: 10px;
+  margin-inline-end: var(--udexSpacer12);
 }
 
 .udex-masthead-shell__cart,
@@ -149,12 +145,11 @@
 
 .udex-masthead-shell__menu-btn {
   height: 18px;
-  margin-inline-start: var(--udexSpacer20);
 }
 
 .udex-masthead-shell__close-btn {
   position: relative;
-  margin-inline-start: var(--udexSpacer24);
+  margin-inline-start: var(--udexSpacer12);
 }
 
 .udex-masthead-shell__close-btn:before {
@@ -164,14 +159,14 @@
   top: 0;
   bottom: 0;
   height: 32px;
-  border-radius: 2px;
+  border-radius: var(--udexRadiusXXS);
   width: 1px;
   background: var(--udex-masthead-shell-close-button-divider-color);
 }
 
 :dir(rtl) .udex-masthead-shell__close-btn:before {
   left: auto;
-  right: -20px;
+  right: -12px;
 }
 
 :dir(rtl) .udex-masthead-mobile-wrap {
@@ -225,6 +220,10 @@
   .udex-masthead-shell_mobile-menu-open .udex-masthead-shell__close-btn {
     display: flex;
   }
+
+  .udex-masthead-shell__right-menu {
+    gap: var(--udexSpacer12);
+  }
 }
 
 @media (max-width: 979px) {

package/src/themes/PhoneNumberField.css

@@ -37,7 +37,6 @@
 
   --udex-phone-number-field-color-label-background: var(--sapField_Background, #fff);
 
-  --udex-phone-number-field-width: 320px;
   --udex-phone-number-field-height: 42px;
   --udex-phone-number-field-paddings: 9px var(--udexSpacer12, 12px);
   --udex-phone-number-field-button-margins-vertical: -10px;
@@ -48,12 +47,20 @@
   --udex-phone-number-field-flag-height: 20px;
   --udex-phone-number-field-button-border: var(--udexColorGrey4, #A9B4BE);
   --udex-phone-number-field-button-color-tertiary-standard-hover-border: var(--udexColorGrey4, #A9B4BE);
-
+  --udex-phone-number-field-min-width: 320px;
+  --udex-phone-number-field-min-width-xs-and-s :100%;
+  --udex-phone-number-field-max-width: 100%;
   display: block;
   font-family: var(--sapFontFamily, sans-serif);
   font-size: var(--sapFontSize, 16px);
   color: var(--udex-phone-number-field-color-standard-default-text);
-  width: var(--udex-phone-number-field-width);
+
+}
+
+@media (width < 640px) {
+  .udex-phone-number-field{
+    min-width: var(--udex-phone-number-field-min-width-xs-and-s);
+  }
 }
 
 .udex-phone-number-field {
@@ -64,6 +71,9 @@
   background: var(--udex-phone-number-field-color-standard-default-background);
   border-radius: var(--udex-phone-number-field-radius);
   border: 1px solid var(--udex-phone-number-field-color-standard-default-border);
+  min-width: var(--udex-phone-number-field-min-width);
+  max-width: var(--udex-phone-number-field-max-width);
+  width: 100%;
 }
 
 .udex-phone-number-field__label {

package/src/themes/Search.css

@@ -20,7 +20,20 @@
   --udex-input-padding-horizontal: var(--udexSpacer12, 12px);
   --udex-input-padding-vertical: var(--udexSpacer8, 8px);
 
-  --udex-button-icon-size: var(--sapGroup_Title_FontSize, var(--udexCoreSizeIconInput));
+  --udex-button-icon-size: var(--sapFontHeader2Size, 28px);
+
+  --udex-dropdown-border-width: auto;
+
+  --udex-search-container-padding-inline-end: 12px;
+  --udex-search-label-inset-inline-start: 12px;
+  --udex-search-icons-margin-inline-end: 12px;
+
+  --udex-search-label-width: calc(
+    100% -
+    var(--udex-search-label-inset-inline-start) -
+    var(--udex-input-padding-horizontal) -
+    var(--udex-search-container-padding-inline-end)
+  );
 
   display: block;
   width: 100%;
@@ -30,7 +43,8 @@
   display: none;
 }
 
-:host(:not([mode="Home Search"])) .udex-search__label.udex-search__label--active.udex-search__label--animation-enabled {
+:host(:not([mode="Home Search"])) .udex-search__label.udex-search__label--active.udex-search__label--animation-enabled,
+:host(:not([mode="Home Search"])) .udex-search-prefix .udex-search__label.udex-search__label--active.udex-search__label--animation-enabled {
   display: block;
   line-height: 18px;
   transform: translateY(-110%);
@@ -42,20 +56,36 @@
   background-color: #FFFFFF;
 }
 
-:host([mode="Home Search"]) .udex-search__root {
+:host([mode="Home Search"]) .udex-search__root,
+:host([mode="Home Search"]) .udex-search__root.udex-search-prefix {
   --udex-input-radius: var(--udexRadiusXXL, 24px);
   position: relative;
   z-index: 1;
 }
 
-:host([mode="Home Search"]) .udex-search__root.udex-search__root--show-popover::after {
+:host([mode="Home Search"]) .udex-search__root.udex-search-prefix {
+  display: flex;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+:host([mode="Home Search"]) .udex-search-prefix .udex-search__prefix + .udex-search__container {
+  border-start-start-radius: 0;
+  border-start-end-radius: var(--udexRadiusXXL, 24px);
+  border-end-start-radius: 0;
+  border-end-end-radius: var(--udexRadiusXXL, 24px);
+  flex-grow: 1;
+}
+
+:host([mode="Home Search"]) .udex-search__root.udex-search__root--show-popover::after,
+:host([mode="Home Search"]) .udex-search__root.udex-search-prefix.udex-search__root--show-popover::after {
   content: '';
   position: absolute;
   z-index: -1;
   height: 21px;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset-inline: 0;
+  inset-block-end: 0;
   background-color: var(--udexColorNeutralWhite, #fff);
   border-left: 1px solid var(--udexColorGrey6, #5B738B);
   border-right: 1px solid var(--udexColorGrey6, #5B738B);
@@ -63,17 +93,25 @@
   overflow-y: hidden;
 }
 
+:host([mode="Home Search"]) .udex-search__root.udex-search-prefix.udex-search__root--show-popover::after {
+  inset-inline-start: auto;
+  width: 50px;
+}
+
 :host([mode="Home Search"]) .udex-search__container:not(.udex-search__container--has-value),
-:host([mode="Home Search"]) .udex-search__container:not(.udex-search__container--has-value) .udex-search__field {
+:host([mode="Home Search"]) .udex-search__container:not(.udex-search__container--has-value) .udex-search__field,
+:host([mode="Home Search"]) .udex-search-prefix .udex-search__container:not(.udex-search__container--has-value),
+:host([mode="Home Search"]) .udex-search-prefix .udex-search__container:not(.udex-search__container--has-value) .udex-search__field {
   background-color: var(--udex-input-background-color);
 }
 
-:host([mode="Home Search"]) .udex-search__label.udex-search__label--active {
+:host([mode="Home Search"]) .udex-search__label.udex-search__label--active,
+:host([mode="Home Search"]) .udex-search-prefix .udex-search__label.udex-search__label--active {
   display: none;
 }
 
 .udex-search__container {
-  padding-inline-end: 12px;
+  padding-inline-end: var(--udex-search-container-padding-inline-end);
   display: flex;
   align-items: center;
   position: relative;
@@ -133,7 +171,7 @@ input[type="search"]::-webkit-search-results-decoration {
 .udex-search__label {
   position: absolute;
   inset-block-start: 9px;
-  inset-inline-start: 12px;
+  inset-inline-start: var(--udex-search-label-inset-inline-start);
   z-index: 2;
   color: var(--udex-input-color-label);
   font-family: var(--udex-input-font-family-label);
@@ -141,6 +179,22 @@ input[type="search"]::-webkit-search-results-decoration {
   font-weight: var(--udex-input-font-weight-label);
   line-height: var(--udex-input-line-height-label);
   transition: transform 150ms ease-out, font-size 150ms ease-out;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: var(--udex-search-label-width);
+}
+
+.udex-search__label-with-search-icon,
+.udex-search__label-with-voice-icon {
+  max-width: calc(var(--udex-search-label-width) - var(--udex-button-icon-size));
+}
+
+.udex-search__label-with-search-icon.udex-search__label-with-voice-icon {
+  max-width: calc(
+    var(--udex-search-label-width) -
+    var(--udex-button-icon-size) * 2 -
+    var(--udex-search-icons-margin-inline-end)
+  );
 }
 
 .udex-search__icons {
@@ -153,7 +207,7 @@ input[type="search"]::-webkit-search-results-decoration {
 }
 
 .udex-search__icons>* {
-  margin-inline-end: 12px;
+  margin-inline-end: var(--udex-search-icons-margin-inline-end);
 }
 
 .udex-search__icons>*:last-child {
@@ -181,8 +235,8 @@ input[type="search"]::-webkit-search-results-decoration {
 [ui5-button].udex-search__button:focus::before {
   content: '';
   position: absolute;
-  inset-block-start: -5px;
-  inset-inline-start: -5px;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   width: 28px;
   height: 28px;
   border: 2px solid #0040B0;
@@ -190,7 +244,11 @@ input[type="search"]::-webkit-search-results-decoration {
   box-sizing: border-box;
 }
 
-[ui5-button].udex-search__button::part(button),
+[ui5-button].udex-search__button::part(button) {
+  width: 28px;
+  height: 28px;
+}
+
 [ui5-button].udex-search__button::part(icon) {
   width: 18px;
   height: 18px;
@@ -220,10 +278,95 @@ input[type="search"]::-webkit-search-results-decoration {
   content: '';
   position: absolute;
   z-index: -1;
-  top: -5px;
-  left: -5px;
+  top: 0;
+  left: 0;
   width: 28px;
   height: 28px;
   background-color: #0070F2;
   border-radius: 50%;
 }
+
+.udex-search__prefix {
+  position: relative;
+  z-index: 1;
+}
+
+.udex-search__prefix--show-popover::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  height: 50%;
+  width: 50px;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  background-color: var(--udexColorNeutralWhite, #fff);
+  border-left: 1px solid var(--udexColorGrey6, #5B738B);
+  border-right: 1px solid var(--udexColorGrey6, #5B738B);
+  box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34, 54, 73, 0.3));
+  overflow-y: hidden;
+}
+
+.udex-search__prefix-button {
+  padding-inline: var(--udexSpacer12) var(--udexSpacer8);
+  display: flex;
+  align-items: center;
+  max-width: 200px;
+  height: 100%;
+  border: 1px solid var(--udex-input-color-border);
+  border-inline-end: 0;
+  border-start-start-radius: var(--udexRadiusXXL, 24px);
+  border-end-start-radius: var(--udexRadiusXXL, 24px);
+  background-color: var(--sapShell_Navigation_Active_Background, var(--udexColorGrey1));
+  color: var(--sapContent_LabelColor, var(--udexColorGrey7));
+  font-family: var(--sapFontFamily, sans-serif);
+  font-size: var(--udexTypographyBodySFontSize, 16px);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  text-align: start;
+  white-space: nowrap;
+}
+
+.udex-search__prefix-button:hover {
+  cursor: pointer;
+  background-color: var(--udexCoreBase);
+  color: var(--udexColorBlue8)
+}
+
+.udex-search__prefix-button:focus,
+.udex-search__prefix-button:focus-visible {
+  outline: 2px solid var(--udexColorBlue10, #002A86);
+  outline-offset: -2px;
+}
+
+.udex-search__prefix-button--active {
+  background-color: var(--udexCoreBase);
+  color: var(--udexColorBlue10)
+}
+
+.udex-search__prefix-label {
+  margin-inline-end: var(--udexSpacer4, 4px);
+  max-width: calc(100% - 20px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.udex-search__prefix-icon {
+  width: 16px;
+  height: 16px;
+  color: inherit;
+  flex-shrink: 1;
+}
+
+.udex-search__prefix-popover {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border: 1px solid var(--udexCoreBorderDefault);
+  border-block-start: 0;
+  box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,0.3));
+  background-color: var(--udexColorNeutralWhite, #fff);
+  clip-path: inset(0px -10px -10px -10px);
+}
+
+.udex-search__prefix-popover::part(content) {
+  padding: 0;
+}

package/src/themes/SearchSuggestions.css

@@ -62,7 +62,8 @@
     border-block-end: 0;
 }
 
-.udex-search-suggestions__heading {
+.udex-search-suggestions__heading,
+.udex-search-suggestions__message {
     margin-block-end: var(--udex-heading-margin-vertical);
     padding-inline: var(--udex-heading-padding-horizontal) var(--udex-heading-padding-horizontal);
     display: block;
@@ -74,6 +75,11 @@
     text-transform: uppercase;
 }
 
+.udex-search-suggestions__message {
+    margin-block: var(--udex-heading-margin-vertical);
+    text-align: center;
+}
+
 .udex-search-suggestions__list {
     margin: 0;
     padding: 0;

package/src/themes/Tag.css

@@ -75,7 +75,7 @@
     position: relative;
     max-width: 100%;
   }
-  
+
   .udex-tag--medium {
     font-size: var(--udex-tags-medium-font-size);
     line-height: var(--udex-tags-medium-line-height);
@@ -107,6 +107,11 @@
     background-color: var(--udex-tags-grey-selected-background-color);
 }
 
+.udex-tag-grey.udex-tag--nonselectable,
+.udex-tag-grey.udex-tag--nonselectable:hover {
+  color: var(--udex-tags-text-color);
+}
+
 .udex-tag-grey.udex-tag--selected:after {
     content: '';
     position: absolute;

package/src/themes/TextField.css

@@ -29,12 +29,21 @@
   --udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));
 
   --udex-input-padding: 9px var(--udexSpacer12, 12px);
+  --udex-input-min-width-xs-and-s: 100%;
+  --udex-input-max-width: 100%;
 }
 
 .udex-text-field__container {
-  width: 100%;
   position: relative;
   font-family: var(--sapFontFamily, sans-serif);
+  max-width: var(--udex-input-max-width);
+  width: 100%;
+}
+
+@media (width < 640px) {
+  .udex-text-field__container{
+    min-width: var(--udex-input-min-width-xs-and-s);
+  }
 }
 
 :host([disabled]) .udex-text-field__container {

package/src/types/callback.ts

@@ -0,0 +1,3 @@
+type CallbackFunction<T = any> = (args?: any) => T;
+
+export default CallbackFunction;

package/src/utils/debounce.ts

@@ -1,4 +1,4 @@
-type CallbackFunction = (args: any) => any;
+import CallbackFunction from "../types/callback.js";
 
 const debounce = <T extends CallbackFunction>(cb: T, timeout = 300) => {
   let timer: ReturnType<typeof setTimeout>;

package/src/utils/retryUntilSuccessful.ts

@@ -0,0 +1,23 @@
+import CallbackFunction from "../types/callback.js";
+
+const retryUntilSuccessful = (checkFn: CallbackFunction<void>, delay: number, maxAttempts: number, errorMessage: string): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    let currentAttempt = 0;
+
+    const attempt = () => {
+      currentAttempt++;
+      const result = checkFn();
+      if (result !== undefined) {
+        resolve(result);
+      } else if (currentAttempt < maxAttempts) {
+        setTimeout(attempt, delay);
+      } else {
+        reject(new Error(errorMessage));
+      }
+    };
+
+    attempt();
+  });
+};
+
+export default retryUntilSuccessful;