@rolster/react-components 18.21.32 → 18.21.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/cjs/assets/{index-BQ758ZeF.css → index-D3ZlI-1N.css} +1 -0
  2. package/dist/cjs/index.js +52 -31
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/es/assets/{index-BQ758ZeF.css → index-D3ZlI-1N.css} +1 -0
  5. package/dist/es/index.js +52 -33
  6. package/dist/es/index.js.map +1 -1
  7. package/dist/esm/components/atoms/Amount/Amount.d.ts +1 -1
  8. package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.js +5 -2
  9. package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.js.map +1 -1
  10. package/dist/esm/components/atoms/Button/Button.css +1 -0
  11. package/dist/esm/components/atoms/Button/Button.css.map +1 -1
  12. package/dist/esm/components/atoms/Input/Input.d.ts +2 -1
  13. package/dist/esm/components/atoms/Input/Input.js +14 -6
  14. package/dist/esm/components/atoms/Input/Input.js.map +1 -1
  15. package/dist/esm/components/atoms/InputMoney/InputMoney.d.ts +1 -1
  16. package/dist/esm/components/atoms/InputPassword/InputPassword.js +1 -1
  17. package/dist/esm/components/atoms/InputPassword/InputPassword.js.map +1 -1
  18. package/dist/esm/components/molecules/FieldMoney/FieldMoney.d.ts +1 -1
  19. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.d.ts +1 -0
  20. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js +13 -8
  21. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js.map +1 -1
  22. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteController.d.ts +1 -0
  23. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteController.js +3 -3
  24. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteController.js.map +1 -1
  25. package/dist/esm/components/organisms/FieldSelect/FieldSelect.js +8 -7
  26. package/dist/esm/components/organisms/FieldSelect/FieldSelect.js.map +1 -1
  27. package/dist/esm/components/organisms/FieldSelect/FieldSelectController.d.ts +1 -0
  28. package/dist/esm/components/organisms/FieldSelect/FieldSelectController.js +3 -3
  29. package/dist/esm/components/organisms/FieldSelect/FieldSelectController.js.map +1 -1
  30. package/dist/esm/components/organisms/VirtualScroll/VirtualScroll.d.ts +1 -0
  31. package/dist/esm/components/organisms/VirtualScroll/VirtualScroll.js +37 -0
  32. package/dist/esm/components/organisms/VirtualScroll/VirtualScroll.js.map +1 -0
  33. package/dist/esm/components/organisms/index.d.ts +2 -0
  34. package/dist/esm/components/organisms/index.js +2 -0
  35. package/dist/esm/components/organisms/index.js.map +1 -1
  36. package/dist/esm/controllers/ListController.d.ts +2 -1
  37. package/dist/esm/controllers/ListController.js +6 -3
  38. package/dist/esm/controllers/ListController.js.map +1 -1
  39. package/package.json +2 -2
@@ -249,6 +249,7 @@
249
249
  justify-content: center;
250
250
  align-items: center;
251
251
  overflow: hidden;
252
+ column-gap: var(--rlc-button-content-gap, var(--rls-sizing-x2));
252
253
  line-height: var(--rls-sizing-x20);
253
254
  height: var(--rls-sizing-x20);
254
255
  padding: var(--rlc-button-content-padding, 0rem var(--rls-sizing-x4));
package/dist/es/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import require$$0, { useState, useEffect, useMemo, useCallback, useRef, createContext } from 'react';
2
- import { currencyFormat, itIsDefined, PartialSealed } from '@rolster/commons';
2
+ import { currencyFormat, floorDecimals, itIsDefined, PartialSealed } from '@rolster/commons';
3
3
  import { dateFormatTemplate, DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, assignYearInDate, assignMonthInDate } from '@rolster/dates';
4
4
  import { i18n, i18nSubscribe } from '@rolster/i18n';
5
5
  import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, locationListCanTop, navigationListFromInput, navigationListFromElement, createAutocompleteStore, dateOutRange, verifyDateRange, PickerListenerEvent } from '@rolster/components';
@@ -1500,10 +1500,13 @@ function RlsBreadcrumbLabel({ label }) {
1500
1500
  actionable: !!label.onClick
1501
1501
  });
1502
1502
  }, [label.onClick]);
1503
- return (jsxRuntimeExports.jsx("label", { className: "rls-breadcrumb__label", onClick: label.onClick, "rls-theme": label.rlsTheme, children: jsxRuntimeExports.jsx("a", { className: className, children: label.label }) }));
1503
+ return (jsxRuntimeExports.jsx("label", { className: "rls-breadcrumb__label", onClick: label.onClick, children: jsxRuntimeExports.jsx("a", { className: className, "rls-theme": label.rlsTheme, children: label.label }) }));
1504
1504
  }
1505
1505
  function RlsBreadcrumb({ labels }) {
1506
- return (jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: labels.map((label, index) => (jsxRuntimeExports.jsx(RlsBreadcrumbLabel, { label: label }, index))) }));
1506
+ const children = useMemo(() => {
1507
+ return labels.map((label, index) => (jsxRuntimeExports.jsx(RlsBreadcrumbLabel, { label: label }, index)));
1508
+ }, [labels]);
1509
+ return jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: children });
1507
1510
  }
1508
1511
 
1509
1512
  function RlsIcon({ value, skeleton }) {
@@ -1537,21 +1540,28 @@ function RlsCheckBoxControl({ formControl, disabled, identifier, rlsTheme }) {
1537
1540
  return (jsxRuntimeExports.jsx(RlsCheckBox, { identifier: identifier, checked: !!formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
1538
1541
  }
1539
1542
 
1540
- function RlsInput({ children, disabled, formControl, identifier, onEnter, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
1543
+ function RlsInput({ children, decimals, disabled, formControl, identifier, onEnter, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
1541
1544
  const valueInitial = formControl?.value ?? value ? String(value) : '';
1542
1545
  const [valueInput, setValueInput] = useState(valueInitial);
1543
1546
  const [focused, setFocused] = useState(false);
1547
+ const isChangeInternal = useRef(false);
1544
1548
  useEffect(() => {
1545
- const valueControl = formControl?.value ? String(formControl.value) : '';
1546
- (!focused || valueInput !== valueControl) && setValueInput(valueControl);
1549
+ if (!isChangeInternal.current) {
1550
+ const control = formControl?.value ? String(formControl.value) : '';
1551
+ valueInput !== control && setValueInput(control);
1552
+ }
1553
+ isChangeInternal.current = false;
1547
1554
  }, [formControl?.value]);
1548
1555
  const _onChange = useCallback((event) => {
1549
1556
  const valueInput = event.target.value;
1550
- const value = type === 'number' ? +valueInput : valueInput;
1557
+ const value = type === 'number'
1558
+ ? floorDecimals(+valueInput, decimals || 0)
1559
+ : valueInput;
1560
+ isChangeInternal.current = true;
1551
1561
  onValue && onValue(value);
1552
1562
  setValueInput(valueInput);
1553
1563
  formControl?.setValue(value);
1554
- }, [formControl, onValue]);
1564
+ }, [formControl, onValue, type, decimals]);
1555
1565
  const _onKeyDown = useCallback((event) => {
1556
1566
  onKeyDown && onKeyDown(event);
1557
1567
  event.key === 'Enter' && onEnter && onEnter();
@@ -1604,7 +1614,7 @@ function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDow
1604
1614
  }, [formControl, onValue]);
1605
1615
  const _onKeyDown = useCallback((event) => {
1606
1616
  onKeyDown && onKeyDown(event);
1607
- event.code === 'NumpadEnter' && onEnter && onEnter();
1617
+ event.key === 'Enter' && onEnter && onEnter();
1608
1618
  }, [onKeyDown, onEnter]);
1609
1619
  const _onKeyUp = useCallback((event) => {
1610
1620
  onKeyUp && onKeyUp(event);
@@ -2419,8 +2429,11 @@ function useDatatable() {
2419
2429
  return { scrolleable, tableRef };
2420
2430
  }
2421
2431
 
2432
+ function calculateMinHeightList(count, height) {
2433
+ return count <= 0 ? 160 : (count < 6 ? count : 6) * height;
2434
+ }
2422
2435
  function useListController(props) {
2423
- const { limit, suggestions, automatic, formControl, reference } = props;
2436
+ const { count, suggestions, automatic, formControl, lineHeight, reference } = props;
2424
2437
  const listIsOpen = useRef(false);
2425
2438
  const contentRef = useRef(null);
2426
2439
  const listRef = useRef(null);
@@ -2483,7 +2496,7 @@ function useListController(props) {
2483
2496
  changeValueInternal.current = false;
2484
2497
  }, [collection, formControl?.value]);
2485
2498
  const setState = useCallback((state) => {
2486
- const minHeightList = limit > 0 ? (limit < 6 ? limit * 48 : 300) : 160;
2499
+ const minHeightList = calculateMinHeightList(count, lineHeight ?? 48);
2487
2500
  const _state = state.modalIsVisible
2488
2501
  ? {
2489
2502
  ...state,
@@ -2491,7 +2504,7 @@ function useListController(props) {
2491
2504
  }
2492
2505
  : state;
2493
2506
  refreshState((state) => ({ ...state, ..._state }));
2494
- }, [limit]);
2507
+ }, [count]);
2495
2508
  const setFormValue = useCallback((element, initialValue = false) => {
2496
2509
  refreshState((state) => ({
2497
2510
  ...state,
@@ -2536,10 +2549,10 @@ function useListController(props) {
2536
2549
  const DURATION_ANIMATION$1 = 240;
2537
2550
  const MAX_ELEMENTS = 6;
2538
2551
  function useFieldAutocomplete(props) {
2539
- const limit = useRef(props.suggestions.length);
2552
+ const count = useRef(props.suggestions.length);
2540
2553
  const controller = useListController({
2541
2554
  ...props,
2542
- limit: limit.current
2555
+ count: count.current
2543
2556
  });
2544
2557
  const [coincidences, setCoincidences] = useState([]);
2545
2558
  const [pattern, setPattern] = useState('');
@@ -2558,7 +2571,7 @@ function useFieldAutocomplete(props) {
2558
2571
  _store.current = store;
2559
2572
  const coincidences = collection.slice(0, MAX_ELEMENTS);
2560
2573
  setCoincidences(coincidences);
2561
- limit.current = coincidences.length;
2574
+ count.current = coincidences.length;
2562
2575
  }, []);
2563
2576
  useEffect(() => {
2564
2577
  refreshCoincidences(props.suggestions, pattern, true);
@@ -2668,33 +2681,38 @@ function RlsFieldAutocompleteTemplate(props) {
2668
2681
  });
2669
2682
  });
2670
2683
  }, []);
2671
- const _disabled = useMemo(() => {
2684
+ const disabled = useMemo(() => {
2672
2685
  return formControl?.disabled || props.disabled;
2673
2686
  }, [formControl?.disabled, props.disabled]);
2674
2687
  const className = useMemo(() => {
2675
2688
  return renderClassStatus('rls-field-box', {
2676
- focused: autocomplete.focused && !_disabled,
2689
+ focused: autocomplete.focused && !disabled,
2677
2690
  error: formControl?.wrong,
2678
- disabled: _disabled,
2691
+ disabled,
2679
2692
  selected: !!autocomplete.value
2680
2693
  }, 'rls-field-list rls-field-autocomplete');
2681
- }, [formControl?.wrong, autocomplete.value, autocomplete.focused, _disabled]);
2694
+ }, [formControl?.wrong, autocomplete.value, autocomplete.focused, disabled]);
2682
2695
  const classNameList = useMemo(() => {
2683
2696
  return renderClassStatus('rls-field-list__suggestions', {
2684
2697
  higher: autocomplete.higher,
2685
2698
  visible: autocomplete.modalIsVisible
2686
2699
  });
2687
2700
  }, [autocomplete.higher, autocomplete.modalIsVisible]);
2688
- const onInputSearch = useCallback((event) => {
2701
+ const onChangePattern = useCallback((event) => {
2689
2702
  autocomplete.setPattern(event.target.value);
2690
2703
  }, [autocomplete.setPattern]);
2691
- const onClickSearch = useCallback(() => {
2704
+ const onClickPattern = useCallback(() => {
2692
2705
  onSearch && onSearch(autocomplete.pattern);
2693
2706
  }, [onSearch, autocomplete.pattern]);
2694
- return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { 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 }), 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.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onInputSearch, disabled: _disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: _disabled || searching, onClick: onClickSearch, 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 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 })] })] }));
2707
+ const onKeyDownPattern = useCallback((event) => {
2708
+ event.key === 'Enter' && onSearch && onSearch(autocomplete.pattern);
2709
+ autocomplete.onKeydownInput(event);
2710
+ }, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
2711
+ return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { 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 }), 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.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.inputRef, 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 })] })] }));
2695
2712
  }
2696
2713
  function RlsFieldAutocomplete(props) {
2697
- return (jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
2714
+ const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
2715
+ return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
2698
2716
  }
2699
2717
 
2700
2718
  function RlsModal({ children, overflow, visible, rlsTheme }) {
@@ -2946,13 +2964,13 @@ function RlsFieldDateRange({ children, date: _date, disabled, formControl, ident
2946
2964
  }
2947
2965
 
2948
2966
  function useFieldSelect(props) {
2949
- const limit = useRef(props.suggestions.length);
2967
+ const count = useRef(props.suggestions.length);
2950
2968
  const controller = useListController({
2951
2969
  ...props,
2952
- limit: limit.current
2970
+ count: count.current
2953
2971
  });
2954
2972
  useEffect(() => {
2955
- limit.current = props.suggestions.length;
2973
+ count.current = props.suggestions.length;
2956
2974
  }, [props.suggestions]);
2957
2975
  const onFocusInput = useCallback(() => {
2958
2976
  controller.setState({ focused: true });
@@ -3058,26 +3076,27 @@ function RlsFieldSelectTemplate(props) {
3058
3076
  });
3059
3077
  });
3060
3078
  }, []);
3061
- const _disabled = useMemo(() => {
3079
+ const disabled = useMemo(() => {
3062
3080
  return formControl?.disabled || props.disabled;
3063
3081
  }, [formControl?.disabled, props.disabled]);
3064
3082
  const className = useMemo(() => {
3065
3083
  return renderClassStatus('rls-field-box', {
3066
- disabled: _disabled,
3084
+ disabled: disabled,
3067
3085
  error: formControl?.wrong,
3068
- focused: select.focused && !_disabled
3086
+ focused: select.focused && !disabled
3069
3087
  }, 'rls-field-list rls-field-select');
3070
- }, [formControl?.wrong, select.focused, _disabled]);
3088
+ }, [formControl?.wrong, select.focused, disabled]);
3071
3089
  const classNameList = useMemo(() => {
3072
3090
  return renderClassStatus('rls-field-list__suggestions', {
3073
3091
  higher: select.higher,
3074
3092
  visible: select.modalIsVisible
3075
3093
  });
3076
3094
  }, [select.modalIsVisible, select.higher]);
3077
- return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { 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.inputRef, className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), 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.listRef, 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 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 })] })] }));
3095
+ return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { 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.inputRef, 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 }), 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.listRef, 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 })] })] }));
3078
3096
  }
3079
3097
  function RlsFieldSelect(props) {
3080
- return (jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
3098
+ const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
3099
+ return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
3081
3100
  }
3082
3101
 
3083
3102
  function RlsFormNavigation({ children, visible, rlsTheme }) {
@@ -3173,5 +3192,5 @@ function RlsApplication({ children }) {
3173
3192
  }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
3174
3193
  }
3175
3194
 
3176
- export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useListController, useSnackbar };
3195
+ export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useListController, useSnackbar };
3177
3196
  //# sourceMappingURL=index.js.map