@rolster/react-components 18.26.21 → 18.26.23

package/dist/cjs/assets/{index-DLpY_E_c.css → index-3tg8B_CA.css}

@@ -2485,375 +2485,6 @@
   }
 } /*# sourceMappingURL=Confirmation.css.map */
 
-.rls-datatable {
-  --pvt-datatable-font-size: var(
-    --rlc-datatable-font-size,
-    var(--rls-label-font-size)
-  );
-  --pvt-datatable-letter-spacing: var(
-    --rlc-datatable-letter-spacing,
-    var(--rls-label-letter-spacing)
-  );
-  --pvt-datatable-font-color: var(
-    --rlc-datatable-font-color,
-    var(--rls-app-color-900)
-  );
-  --pvt-datatable-padding-component: 0rem;
-  --pvt-datatable-padding-scroll: var(--rlc-datatable-padding-scroll, 0rem);
-  --pvt-datatable-table-overflow: initial;
-  --pvt-datatable-body-overflow: initial;
-  --pvt-datatable-header-padding-right: var(--pvt-datatable-padding-scroll);
-  --pvt-datatable-header-background: var(
-    --rlc-datatable-header-background,
-    var(--rls-app-color-100)
-  );
-  --pvt-datatable-record-background: var(
-    --rlc-datatable-record-background,
-    transparent
-  );
-  --pvt-datatable-floating-background: var(--rls-app-color-100);
-  --rlc-amount-font-size: var(--pvt-datatable-font-size);
-  --rlc-amount-width: 100%;
-  --rlc-badge-padding: 0.5rem 1.5rem;
-  --rlc-ballot-padding: 0rem;
-  --rlc-ballot-component-row-gap: var(--rls-sizing-x1);
-  --rlc-ballot-title-letter-spacing: var(--rls-smalltext-letter-spacing);
-  --rlc-ballot-title-font-size: var(--rls-smalltext-font-size);
-  --rlc-ballot-title-height: var(--rls-smalltext-line-height);
-  --rlc-ballot-subtitle-letter-spacing: var(--rls-overline-letter-spacing);
-  --rlc-ballot-subtitle-font-size: var(--rls-overline-font-size);
-  --rlc-ballot-subtitle-height: var(--rls-overline-line-height);
-  --rlc-field-box-body-background: transparent;
-  --rlc-field-box-padding: 0rem;
-  --rlc-field-box-width: 100%;
-  --rlc-field-box-error-display: none;
-  --rlc-field-box-label-display: none;
-  --rlc-input-font-size: var(--pvt-datatable-font-size);
-  --rlc-input-letter-spacing: var(--pvt-datatable-letter-spacing);
-  --rlc-skeleton-text-column-gap: var(--rls-sizing-x2);
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: var(--rlc-datatable-height, auto);
-  flex-direction: column;
-  row-gap: var(--rls-sizing-x6);
-  border-radius: var(--rls-sizing-x4);
-  box-sizing: border-box;
-}
-.rls-datatable--resizable {
-  --pvt-datatable-table-overflow: hidden;
-  --pvt-datatable-body-overflow: auto;
-  height: 100%;
-}
-.rls-datatable--scrolleable {
-  --pvt-datatable-padding-scroll: var(--rls-sizing-x4);
-  --pvt-datatable-header-padding-right: calc(
-    var(--pvt-datatable-padding-scroll) +
-      var(--rlc-datatable-width-scroll, var(--rls-sizing-x4))
-  );
-  --pvt-datatable-padding-component: 0rem
-    calc(var(--pvt-datatable-padding-scroll) + 5rem) 0rem 0rem;
-}
-.rls-datatable__toolbar {
-  display: flex;
-  flex: 0 0 auto;
-  column-gap: var(--rls-sizing-x6);
-  padding: var(--pvt-datatable-padding-component);
-  box-sizing: border-box;
-  background: var(--pvt-datatable-header-background);
-  border-radius: var(--rls-sizing-x4);
-}
-.rls-datatable__table {
-  display: flex;
-  flex: 0 1 auto;
-  overflow: var(--pvt-datatable-table-overflow);
-}
-.rls-datatable__table > table {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  row-gap: var(--rls-sizing-x4);
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-.rls-datatable__head {
-  flex: 0 0 auto;
-  width: 100%;
-  padding-right: var(--pvt-datatable-header-padding-right);
-  box-sizing: border-box;
-}
-.rls-datatable__header {
-  display: flex;
-  column-gap: var(--rls-sizing-x6);
-  padding: 0rem var(--rls-sizing-x6);
-  box-sizing: border-box;
-  background: var(--pvt-datatable-header-background);
-  border: var(--rls-app-border-1-200);
-  border-radius: var(--rls-sizing-x4);
-}
-.rls-datatable__header .rls-poster {
-  width: calc(100% - var(--rls-sizing-x2));
-  margin: auto 0rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.rls-datatable__title {
-  position: relative;
-  display: flex;
-  height: var(--rls-sizing-x20);
-  line-height: var(--rls-sizing-x20);
-  color: var(--rls-app-color-700);
-  font-weight: var(
-    --rlc-datatable-header-font-weight,
-    var(--rls-font-weight-semibold)
-  );
-  font-size: var(--pvt-datatable-font-size);
-  letter-spacing: var(--pvt-datatable-letter-spacing);
-  text-align: left;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.rls-datatable__title--control {
-  --rlc-action-ripple-dimension: var(--rls-sizing-x16);
-  --rlc-action-ripple-position: -8rem;
-  --rlc-avatar-radius: var(--rls-sizing-x3);
-  --rlc-avatar-width: var(--rls-sizing-x16);
-  --rlc-avatar-height: var(--rls-sizing-x16);
-  --rlc-avatar-font-size: var(--pvt-datatable-font-size);
-  --rlc-image-width: var(--rls-sizing-x12);
-  --rlc-image-height: var(--rls-sizing-x12);
-  --rlc-switch-max-width: var(--rls-sizing-x16);
-  --rlc-switch-component-height: var(--rls-sizing-x8);
-  --rlc-switch-element-width: var(--rls-sizing-x6);
-  --rlc-switch-element-height: var(--rls-sizing-x4);
-  --rlc-switch-element-radius: var(--rls-sizing-x4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--rls-sizing-x24);
-  padding: 0rem;
-}
-.rls-datatable__title--control > img {
-  width: var(--rls-sizing-x12);
-}
-.rls-datatable__title > span {
-  display: block;
-  width: 100%;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.rls-datatable__body {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  row-gap: var(--rls-sizing-x6);
-  padding-right: var(--pvt-datatable-padding-scroll);
-  box-sizing: border-box;
-  overflow-y: var(--pvt-datatable-body-overflow);
-}
-.rls-datatable__subheader,
-.rls-datatable__record,
-.rls-datatable__totals {
-  position: relative;
-  display: flex;
-  column-gap: var(--rls-sizing-x6);
-  padding: 0rem var(--rls-sizing-x6);
-  box-sizing: border-box;
-  background: var(--pvt-datatable-record-background);
-  border: var(--rls-app-border-1-200);
-  border-radius: var(--rls-sizing-x4);
-}
-.rls-datatable__subheader--success,
-.rls-datatable__record--success,
-.rls-datatable__totals--success {
-  --pvt-datatable-floating-background: var(--rls-success-color-100);
-  background: var(--rls-success-color-050);
-  border: var(--rls-success-border-1-200);
-}
-.rls-datatable__subheader--info,
-.rls-datatable__record--info,
-.rls-datatable__totals--info {
-  --pvt-datatable-floating-background: var(--rls-info-color-100);
-  background: var(--rls-info-color-050);
-  border: var(--rls-info-border-1-200);
-}
-.rls-datatable__subheader--warning,
-.rls-datatable__record--warning,
-.rls-datatable__totals--warning {
-  --pvt-datatable-floating-background: var(--rls-warning-color-100);
-  background: var(--rls-warning-color-050);
-  border: var(--rls-warning-border-1-200);
-}
-.rls-datatable__subheader--error,
-.rls-datatable__record--error,
-.rls-datatable__totals--error {
-  --pvt-datatable-floating-background: var(--rls-danger-color-100);
-  background: var(--rls-danger-color-050);
-  border: var(--rls-danger-border-1-200);
-}
-.rls-datatable__subheader--contained,
-.rls-datatable__record--contained,
-.rls-datatable__totals--contained {
-  overflow: hidden;
-}
-.rls-datatable__subheader {
-  position: sticky;
-  top: 0px;
-  z-index: var(--rls-z-index-4);
-  background: rgba(241, 238, 247, 0.8);
-  backdrop-filter: blur(2px);
-}
-.rls-datatable__cell,
-.rls-datatable__data {
-  --rlc-field-box-body-background: transparent;
-  --rlc-field-box-body-background-focused: transparent;
-  --rlc-field-box-body-background-disabled: transparent;
-  --rlc-field-box-body-padding: 0rem;
-  --rlc-field-box-body-border: none;
-  --rlc-field-box-body-border-focused: none;
-  --rlc-field-box-body-border-error: none;
-  --rlc-field-box-body-border-disabled: none;
-  --rlc-field-box-body-shadow: none;
-  --rlc-field-box-body-shadow-error: none;
-  --rlc-field-box-action-background: transparent;
-  --rlc-field-list-control-font-size: var(--pvt-datatable-font-size);
-  --rlc-field-list-control-font-weight: var(--rls-font-weight-medium);
-  --rlc-field-list-control-letter-spacing: var(--rls-body-letter-spacing);
-  --rlc-field-list-element-padding: var(--rls-sizing-x4);
-  --rlc-field-list-suggestions-bottom: var(--rls-sizing-x24);
-  --rlc-field-list-suggestions-top: var(--rls-sizing-x24);
-  --rlc-poster-font-size: var(--pvt-datatable-font-size);
-  --rlc-poster-width: calc(100% - var(--rls-sizing-x2));
-  --rlc-poster-height: var(--rls-sizing-x8);
-  --rlc-poster-padding: var(--rls-sizing-x2);
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: default;
-  text-align: left;
-  min-height: var(--rls-sizing-x20);
-  font-weight: var(--rls-font-weight-regular);
-  color: var(--pvt-datatable-font-color);
-  font-size: var(--pvt-datatable-font-size);
-  letter-spacing: var(--pvt-datatable-letter-spacing);
-}
-.rls-datatable__cell--contained,
-.rls-datatable__data--contained {
-  overflow: hidden;
-}
-.rls-datatable__cell--control,
-.rls-datatable__data--control {
-  --rlc-action-ripple-dimension: var(--rls-sizing-x16);
-  --rlc-action-ripple-position: -8rem;
-  --rlc-avatar-radius: var(--rls-sizing-x3);
-  --rlc-avatar-width: var(--rls-sizing-x16);
-  --rlc-avatar-height: var(--rls-sizing-x16);
-  --rlc-avatar-font-size: var(--pvt-datatable-font-size);
-  --rlc-image-width: var(--rls-sizing-x12);
-  --rlc-image-height: var(--rls-sizing-x12);
-  --rlc-switch-max-width: var(--rls-sizing-x16);
-  --rlc-switch-component-height: var(--rls-sizing-x8);
-  --rlc-switch-element-width: var(--rls-sizing-x6);
-  --rlc-switch-element-height: var(--rls-sizing-x4);
-  --rlc-switch-element-radius: var(--rls-sizing-x4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--rls-sizing-x24);
-  padding: 0rem;
-}
-.rls-datatable__cell--control > img,
-.rls-datatable__data--control > img {
-  width: var(--rls-sizing-x12);
-}
-.rls-datatable__cell.rls-align-center,
-.rls-datatable__data.rls-align-center {
-  justify-content: center;
-}
-.rls-datatable__cell > span,
-.rls-datatable__data > span {
-  display: block;
-  width: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.rls-datatable__cell > p,
-.rls-datatable__data > p {
-  padding: var(--rls-sizing-x2) 0rem;
-}
-.rls-datatable__cell .rls-field-list,
-.rls-datatable__data .rls-field-list {
-  --rlc-field-box-body-padding: var(--rls-sizing-x4) 0rem;
-  --rlc-field-box-action-dimension: var(--rls-sizing-x10);
-}
-.rls-datatable__cell .rls-poster,
-.rls-datatable__data .rls-poster {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.rls-datatable__cell > a:hover,
-.rls-datatable__data > a:hover {
-  color: var(--rls-app-color-700);
-  text-decoration: underline;
-}
-.rls-datatable__floating {
-  --pvt-action-tooltip-left: 0;
-  --pvt-action-tooltip-right: initial;
-  --pvt-action-tooltip-transform: translate(calc(-100% - var(--rls-sizing-x4)));
-  position: absolute;
-  display: flex;
-  left: initial;
-  right: 0;
-  height: 100%;
-  column-gap: 4rem;
-  align-items: center;
-  z-index: var(--rls-z-index-2);
-  padding: 0rem var(--rls-sizing-x6);
-  background: var(--pvt-datatable-floating-background);
-  border-right: none;
-  transform: translateX(calc(100% - var(--rls-sizing-x4)));
-  transition: transform 240ms var(--rls-standard-curve);
-}
-.rls-datatable__floating:hover {
-  transform: translateX(0);
-}
-.rls-datatable__floating--invested {
-  --pvt-action-tooltip-left: initial;
-  --pvt-action-tooltip-right: 0;
-  --pvt-action-tooltip-transform: translate(calc(100% + var(--rls-sizing-x4)));
-  right: initial;
-  left: 0;
-  transform: translateX(calc(-100% + var(--rls-sizing-x4)));
-}
-.rls-datatable__floating[rls-theme] {
-  background: var(--rls-theme-color-050);
-}
-.rls-datatable__floating .rls-button-action__tooltip {
-  top: 0;
-  left: var(--pvt-action-tooltip-left);
-  right: var(--pvt-action-tooltip-right);
-  transform: var(--pvt-action-tooltip-transform);
-  z-index: var(--rls-z-index-2);
-}
-.rls-datatable__summary {
-  --pvt-datatable-record-background: var(--rls-app-color-100);
-  flex: 0 0 auto;
-  padding-right: var(--pvt-datatable-header-padding-right);
-  box-sizing: border-box;
-}
-.rls-datatable__footer {
-  --pvt-datatable-record-background: var(--rls-app-color-100);
-  position: relative;
-  flex: 0 0 auto;
-  width: 100%;
-  padding: var(--pvt-datatable-padding-component);
-  box-sizing: border-box;
-  overflow: hidden;
-} /*# sourceMappingURL=DataTable.css.map */
-
 .rls-field-autocomplete {
   --pvt-control-width: 100%;
   --pvt-control-opacity: 1;

package/dist/cjs/index.js

@@ -2958,12 +2958,13 @@ function RlsFieldAutocompleteTemplate(props) {
         props.readOnly,
         disabled
     ]);
-    const classNameList = require$$0.useMemo(() => {
+    const classNameSuggestions = require$$0.useMemo(() => {
         return renderClassStatus('rls-field-list__suggestions', {
+            disabled,
             higher: autocomplete.higher,
             visible: autocomplete.modalIsVisible
         });
-    }, [autocomplete.higher, autocomplete.modalIsVisible]);
+    }, [autocomplete.higher, autocomplete.modalIsVisible, disabled]);
     const onChangePattern = require$$0.useCallback((event) => {
         autocomplete.setPattern(event.target.value);
     }, [autocomplete.setPattern]);
@@ -2974,7 +2975,7 @@ function RlsFieldAutocompleteTemplate(props) {
         event.key === 'Enter' && onSearch && onSearch(autocomplete.pattern);
         autocomplete.onKeydownInput(event);
     }, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.refList, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.refInput, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: onKeyDownPattern, disabled: disabled || searching }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: onClickPattern, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameSuggestions, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.refList, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.refInput, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: onKeyDownPattern, disabled: disabled || searching }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: onClickPattern, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
 }
 function RlsFieldAutocomplete(props) {
     const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
@@ -3374,13 +3375,14 @@ function RlsFieldSelectTemplate(props) {
         props.readOnly,
         disabled
     ]);
-    const classNameList = require$$0.useMemo(() => {
+    const classNameSuggestions = require$$0.useMemo(() => {
         return renderClassStatus('rls-field-list__suggestions', {
+            disabled,
             higher: select.higher,
             visible: select.modalIsVisible
         });
-    }, [select.modalIsVisible, select.higher]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.refList, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
+    }, [select.modalIsVisible, select.higher, disabled]);
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameSuggestions, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.refList, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
 }
 function RlsFieldSelect(props) {
     const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
@@ -3397,29 +3399,11 @@ function RlsFormNavigation({ onAutoClose, children, className, visible, rlsTheme
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameForm, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 
-function usePortalController(component) {
-    const [children, setChildren] = require$$0.useState(component);
-    const [visible, setVisible] = require$$0.useState(false);
-    const open = require$$0.useCallback((children) => {
-        setVisible(true);
-        children && setChildren(children);
-    }, []);
-    const close = require$$0.useCallback(() => {
-        setVisible(false);
-    }, []);
-    return { children, close, open, visible };
-}
-
-function useFormNavigationController(component) {
-    const portal = usePortalController(component);
-    const FormNavigation = require$$0.useMemo(() => {
-        return (jsxRuntimeExports.jsx(RlsFormNavigation, { visible: portal.visible, children: portal.children }));
-    }, [portal.children, portal.visible]);
-    return {
-        close: portal.close,
-        FormNavigation,
-        open: portal.open
-    };
+function useFormNavigationController(portal) {
+    const FormNavigation = require$$0.useCallback(({ children }) => {
+        return (jsxRuntimeExports.jsx(RlsFormNavigation, { visible: portal.visible, children: children }));
+    }, [portal.visible]);
+    return FormNavigation;
 }
 
 function useRelocationOnComponent({ container, element, onDrag }) {
@@ -3951,6 +3935,17 @@ function RlsApplication({ children }) {
         }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
 }
 
+function usePortalController() {
+    const [visible, setVisible] = require$$0.useState(false);
+    const open = require$$0.useCallback(() => {
+        setVisible(true);
+    }, []);
+    const close = require$$0.useCallback(() => {
+        setVisible(false);
+    }, []);
+    return { close, open, visible };
+}
+
 exports.ConfirmationResult = ConfirmationResult;
 exports.RlsAlert = RlsAlert;
 exports.RlsAmount = RlsAmount;
@@ -4050,6 +4045,7 @@ exports.useFormSingleSelectionController = useFormSingleSelectionController;
 exports.useFormToggleController = useFormToggleController;
 exports.useImageEditorController = useImageEditorController;
 exports.useListController = useListController;
+exports.usePortalController = usePortalController;
 exports.useRelocationOnComponent = useRelocationOnComponent;
 exports.useResize = useResize;
 exports.useSnackbar = useSnackbar;