@rolster/react-components 18.15.23 → 18.15.30

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 (50) hide show
  1. package/dist/cjs/index.js +104 -92
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/es/index.js +104 -92
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/esm/components/organisms/Datatable/Datatable.d.ts +2 -2
  6. package/dist/esm/components/organisms/Datatable/Datatable.js +1 -1
  7. package/dist/esm/components/organisms/Datatable/Datatable.js.map +1 -1
  8. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.d.ts +14 -3
  9. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js +20 -17
  10. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js.map +1 -1
  11. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteController.d.ts +38 -0
  12. package/dist/esm/components/organisms/FieldAutocomplete/{FieldAutocompleteHook.js → FieldAutocompleteController.js} +27 -25
  13. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteController.js.map +1 -0
  14. package/dist/esm/components/organisms/FieldDate/FieldDate.d.ts +3 -2
  15. package/dist/esm/components/organisms/FieldDate/FieldDate.js +3 -3
  16. package/dist/esm/components/organisms/FieldDate/FieldDate.js.map +1 -1
  17. package/dist/esm/components/organisms/FieldSelect/FieldSelect.d.ts +15 -4
  18. package/dist/esm/components/organisms/FieldSelect/FieldSelect.js +17 -14
  19. package/dist/esm/components/organisms/FieldSelect/FieldSelect.js.map +1 -1
  20. package/dist/esm/components/organisms/FieldSelect/FieldSelectController.d.ts +35 -0
  21. package/dist/esm/components/organisms/FieldSelect/FieldSelectController.js +71 -0
  22. package/dist/esm/components/organisms/FieldSelect/FieldSelectController.js.map +1 -0
  23. package/dist/esm/components/organisms/PickerDate/PickerDate.d.ts +1 -1
  24. package/dist/esm/components/organisms/PickerDate/PickerDate.js.map +1 -1
  25. package/dist/esm/controllers/DatatableController.d.ts +6 -0
  26. package/dist/esm/controllers/DatatableController.js +24 -0
  27. package/dist/esm/controllers/DatatableController.js.map +1 -0
  28. package/dist/esm/controllers/ListController.d.ts +35 -0
  29. package/dist/esm/{hooks/ListControlHook.js → controllers/ListController.js} +4 -3
  30. package/dist/esm/controllers/ListController.js.map +1 -0
  31. package/dist/esm/controllers/index.d.ts +2 -0
  32. package/dist/esm/controllers/index.js +3 -0
  33. package/dist/esm/controllers/index.js.map +1 -0
  34. package/dist/esm/index.d.ts +1 -1
  35. package/dist/esm/index.js +1 -1
  36. package/dist/esm/index.js.map +1 -1
  37. package/package.json +7 -7
  38. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteHook.d.ts +0 -27
  39. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteHook.js.map +0 -1
  40. package/dist/esm/components/organisms/FieldSelect/FieldSelectHook.d.ts +0 -24
  41. package/dist/esm/components/organisms/FieldSelect/FieldSelectHook.js +0 -70
  42. package/dist/esm/components/organisms/FieldSelect/FieldSelectHook.js.map +0 -1
  43. package/dist/esm/hooks/DatatableHook.d.ts +0 -6
  44. package/dist/esm/hooks/DatatableHook.js +0 -22
  45. package/dist/esm/hooks/DatatableHook.js.map +0 -1
  46. package/dist/esm/hooks/ListControlHook.d.ts +0 -24
  47. package/dist/esm/hooks/ListControlHook.js.map +0 -1
  48. package/dist/esm/hooks/index.d.ts +0 -2
  49. package/dist/esm/hooks/index.js +0 -3
  50. package/dist/esm/hooks/index.js.map +0 -1
package/dist/es/index.js CHANGED
@@ -2037,31 +2037,34 @@ function RlsDatatableData({ children, className, control, overflow }) {
2037
2037
  function RlsDatatable({ children, datatable, footer, header, rlsTheme, summary }) {
2038
2038
  return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-datatable', {
2039
2039
  scrolleable: datatable?.scrolleable
2040
- }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("table", { children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
2040
+ }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("table", { children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.tableRef, className: "rls-datatable__tbody", children: children })] }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
2041
2041
  }
2042
2042
 
2043
+ function createObserver(options) {
2044
+ const { setScrolleable, table } = options;
2045
+ const observer = new ResizeObserver(() => {
2046
+ const scrollHeight = table.scrollHeight || 0;
2047
+ const clientHeight = table.clientHeight || 0;
2048
+ setScrolleable(scrollHeight > clientHeight);
2049
+ });
2050
+ observer.observe(table);
2051
+ return observer;
2052
+ }
2043
2053
  function useDatatable() {
2044
2054
  const [scrolleable, setScrolleable] = useState(false);
2045
- const bodyRef = useRef(null);
2055
+ const tableRef = useRef(null);
2046
2056
  useEffect(() => {
2047
- let observer;
2048
- const body = bodyRef?.current;
2049
- if (body) {
2050
- observer = new ResizeObserver(() => {
2051
- const scrollHeight = body.scrollHeight || 0;
2052
- const clientHeight = body.clientHeight || 0;
2053
- setScrolleable(scrollHeight > clientHeight);
2054
- });
2055
- observer.observe(bodyRef?.current);
2056
- }
2057
+ const observer = tableRef?.current &&
2058
+ createObserver({ setScrolleable, table: tableRef?.current });
2057
2059
  return () => {
2058
2060
  observer?.disconnect();
2059
2061
  };
2060
2062
  }, []);
2061
- return { bodyRef, scrolleable };
2063
+ return { scrolleable, tableRef };
2062
2064
  }
2063
2065
 
2064
- function useListControl({ suggestions, formControl }) {
2066
+ function useListController(props) {
2067
+ const { suggestions, formControl, value } = props;
2065
2068
  const contentRef = useRef(null);
2066
2069
  const listRef = useRef(null);
2067
2070
  const inputRef = useRef(null);
@@ -2114,7 +2117,7 @@ function useListControl({ suggestions, formControl }) {
2114
2117
  }
2115
2118
  if (!refreshProtected(collection)) {
2116
2119
  protectedValue.current = state;
2117
- setFormValue(undefined);
2120
+ setFormValue(value);
2118
2121
  refreshState({ value: '' });
2119
2122
  }
2120
2123
  }
@@ -2168,7 +2171,8 @@ function useListControl({ suggestions, formControl }) {
2168
2171
 
2169
2172
  const DURATION_ANIMATION$1 = 240;
2170
2173
  const MAX_ELEMENTS = 6;
2171
- function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, suggestions }) {
2174
+ function useFieldAutocomplete(props) {
2175
+ const controller = useListController(props);
2172
2176
  const [pattern, setPattern] = useState('');
2173
2177
  const [coincidences, setCoincidences] = useState([]);
2174
2178
  const currentStore = useRef({
@@ -2176,46 +2180,45 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
2176
2180
  pattern: '',
2177
2181
  previous: null
2178
2182
  });
2179
- const listControl = useListControl({ suggestions, formControl });
2180
- const { inputRef, navigationElement, navigationInput, setFormValue, setState } = listControl;
2183
+ const disabled = props.formControl?.disabled || props.disabled;
2181
2184
  useEffect(() => {
2182
2185
  refreshCoincidences(pattern, true);
2183
- }, [suggestions]);
2186
+ }, [props.suggestions]);
2184
2187
  useEffect(() => {
2185
2188
  refreshCoincidences(pattern);
2186
2189
  }, [pattern]);
2187
2190
  function onClickControl() {
2188
2191
  if (!disabled) {
2189
- setState({ listIsVisible: true });
2192
+ controller.setState({ listIsVisible: true });
2190
2193
  setTimeout(() => {
2191
- inputRef?.current?.focus();
2194
+ controller.inputRef?.current?.focus();
2192
2195
  }, DURATION_ANIMATION$1);
2193
2196
  }
2194
2197
  }
2195
2198
  function onFocusInput() {
2196
- setState({ focused: true });
2199
+ controller.setState({ focused: true });
2197
2200
  }
2198
2201
  function onBlurInput() {
2199
- setState({ focused: false });
2202
+ controller.setState({ focused: false });
2200
2203
  }
2201
2204
  function onKeydownInput(event) {
2202
2205
  switch (event.code) {
2203
2206
  case 'Escape':
2204
2207
  case 'Tab':
2205
- setState({ listIsVisible: false });
2208
+ controller.setState({ listIsVisible: false });
2206
2209
  break;
2207
2210
  default:
2208
- navigationInput(event);
2211
+ controller.navigationInput(event);
2209
2212
  break;
2210
2213
  }
2211
2214
  }
2212
2215
  function onClickAction() {
2213
- setState({ listIsVisible: false, value: '' });
2214
- setFormValue(undefined);
2215
- onValue && onValue(undefined);
2216
+ controller.setState({ listIsVisible: false, value: '' });
2217
+ controller.setFormValue(props.value);
2218
+ props.onValue && props.onValue(props.value);
2216
2219
  }
2217
2220
  function onClickBackdrop() {
2218
- setState({ listIsVisible: false });
2221
+ controller.setState({ listIsVisible: false });
2219
2222
  }
2220
2223
  function onClickElement(element) {
2221
2224
  return () => {
@@ -2224,24 +2227,26 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
2224
2227
  }
2225
2228
  function onKeydownElement(element) {
2226
2229
  return (event) => {
2227
- event.code === 'Enter' ? onChange(element) : navigationElement(event);
2230
+ event.code === 'Enter'
2231
+ ? onChange(element)
2232
+ : controller.navigationElement(event);
2228
2233
  };
2229
2234
  }
2230
2235
  function onChange({ description, value }) {
2231
- if (onSelect) {
2232
- setState({ listIsVisible: false });
2233
- onSelect(value);
2236
+ if (props.onSelect) {
2237
+ controller.setState({ listIsVisible: false });
2238
+ value && props.onSelect(value);
2234
2239
  }
2235
2240
  else {
2236
- setState({ listIsVisible: false, value: description });
2237
- setFormValue(value);
2241
+ controller.setState({ listIsVisible: false, value: description });
2242
+ controller.setFormValue(value);
2238
2243
  }
2239
- onValue && onValue(value);
2244
+ props.onValue && props.onValue(value);
2240
2245
  }
2241
2246
  function refreshCoincidences(pattern, reboot = false) {
2242
2247
  const { collection, store } = createAutocompleteStore({
2243
2248
  pattern,
2244
- suggestions,
2249
+ suggestions: props.suggestions,
2245
2250
  reboot,
2246
2251
  store: currentStore.current
2247
2252
  });
@@ -2250,7 +2255,7 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
2250
2255
  }
2251
2256
  return {
2252
2257
  coincidences,
2253
- listControl,
2258
+ controller,
2254
2259
  onBlurInput,
2255
2260
  onClickAction,
2256
2261
  onClickBackdrop,
@@ -2265,22 +2270,25 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
2265
2270
  }
2266
2271
 
2267
2272
  function RlsFieldAutocompleteTemplate(props) {
2268
- const fieldAutocomplete = useFieldAutocomplete(props);
2269
- const { render, children, disabled, formControl, hiddenIcon, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
2270
- return (jsxRuntimeExports.jsxs("div", { ref: fieldAutocomplete.listControl.contentRef, className: renderClassStatus('rls-field-box', {
2271
- disabled,
2272
- focused: fieldAutocomplete.listControl.focused,
2273
- error: formControl?.wrong,
2274
- selected: !!fieldAutocomplete.listControl.value
2275
- }, 'rls-field-list rls-field-autocomplete'), "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: fieldAutocomplete.listControl.value, onClick: fieldAutocomplete.onClickControl }), !hiddenIcon && fieldAutocomplete.listControl.value && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: fieldAutocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
2276
- visible: fieldAutocomplete.listControl.listIsVisible,
2277
- hide: !fieldAutocomplete.listControl.listIsVisible,
2278
- higher: fieldAutocomplete.listControl.higher
2279
- }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: fieldAutocomplete.listControl.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: fieldAutocomplete.listControl.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: fieldAutocomplete.pattern, onChange: ({ target: { value } }) => {
2280
- fieldAutocomplete.setPattern(value);
2281
- }, disabled: disabled || searching, onFocus: fieldAutocomplete.onFocusInput, onBlur: fieldAutocomplete.onBlurInput, onKeyDown: fieldAutocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: () => {
2282
- onSearch(fieldAutocomplete.pattern);
2283
- }, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), fieldAutocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: fieldAutocomplete.onClickElement(element), onKeyDown: fieldAutocomplete.onKeydownElement(element), children: render(element) }, index))), !fieldAutocomplete.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: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: fieldAutocomplete.onClickBackdrop })] })] }));
2273
+ const autocomplete = useFieldAutocomplete(props);
2274
+ const { controller } = autocomplete;
2275
+ const { render, children, formControl, hiddenIcon, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
2276
+ const disabled = formControl?.disabled || props.disabled;
2277
+ const className = renderClassStatus('rls-field-box', {
2278
+ focused: controller.focused,
2279
+ disabled,
2280
+ error: formControl?.wrong,
2281
+ selected: !!controller.value
2282
+ }, 'rls-field-list rls-field-autocomplete');
2283
+ return (jsxRuntimeExports.jsxs("div", { ref: controller.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: controller.value, onClick: autocomplete.onClickControl }), !hiddenIcon && controller.value && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
2284
+ visible: controller.listIsVisible,
2285
+ higher: controller.higher,
2286
+ hide: !controller.listIsVisible
2287
+ }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: controller.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: controller.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: autocomplete.pattern, onChange: ({ target: { value } }) => {
2288
+ autocomplete.setPattern(value);
2289
+ }, disabled: disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: () => {
2290
+ onSearch(autocomplete.pattern);
2291
+ }, 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: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
2284
2292
  }
2285
2293
  function RlsFieldAutocomplete(props) {
2286
2294
  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 }) })) }));
@@ -2359,9 +2367,9 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
2359
2367
  }
2360
2368
 
2361
2369
  const FORMAT_DATE = '{dd}/{mx}/{aa}';
2362
- function RlsFieldDate({ children, date, disabled, formControl, format, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme }) {
2370
+ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: defaultValue }) {
2363
2371
  const today = new Date(); // Initial current date in component
2364
- const [value, setValue] = useState();
2372
+ const [value, setValue] = useState(defaultValue);
2365
2373
  const [modalIsVisible, setModalIsVisible] = useState(false);
2366
2374
  useEffect(() => {
2367
2375
  const dateCheck = checkDateRange({
@@ -2381,7 +2389,7 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
2381
2389
  }
2382
2390
  function onClickAction() {
2383
2391
  if (value) {
2384
- formControl?.setValue(undefined);
2392
+ formControl?.setValue(defaultValue);
2385
2393
  formControl?.touch();
2386
2394
  onChange(undefined);
2387
2395
  }
@@ -2474,39 +2482,38 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
2474
2482
  } }) })] }));
2475
2483
  }
2476
2484
 
2477
- function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
2478
- const listControl = useListControl({ suggestions, formControl });
2479
- const { inputRef, listIsVisible, navigationElement, navigationInput, setFormValue, setState } = listControl;
2485
+ function useFieldSelect(props) {
2486
+ const controller = useListController(props);
2480
2487
  function onFocusInput() {
2481
- setState({ focused: true });
2488
+ controller.setState({ focused: true });
2482
2489
  }
2483
2490
  function onBlurInput() {
2484
- setState({ focused: false });
2491
+ controller.setState({ focused: false });
2485
2492
  }
2486
2493
  function onClickInput() {
2487
- setState({ listIsVisible: true });
2494
+ controller.setState({ listIsVisible: true });
2488
2495
  }
2489
2496
  function onKeydownInput(event) {
2490
2497
  switch (event.code) {
2491
2498
  case 'Space':
2492
2499
  case 'Enter':
2493
- setState({ listIsVisible: true });
2500
+ controller.setState({ listIsVisible: true });
2494
2501
  break;
2495
2502
  case 'Escape':
2496
2503
  case 'Tab':
2497
- setState({ listIsVisible: false });
2504
+ controller.setState({ listIsVisible: false });
2498
2505
  break;
2499
2506
  default:
2500
- navigationInput(event);
2507
+ controller.navigationInput(event);
2501
2508
  break;
2502
2509
  }
2503
2510
  }
2504
2511
  function onClickAction() {
2505
- setState({ listIsVisible: !listIsVisible });
2506
- !listIsVisible && inputRef?.current?.focus();
2512
+ controller.setState({ listIsVisible: !controller.listIsVisible });
2513
+ !controller.listIsVisible && controller.inputRef?.current?.focus();
2507
2514
  }
2508
2515
  function onClickBackdrop() {
2509
- setState({ listIsVisible: false });
2516
+ controller.setState({ listIsVisible: false });
2510
2517
  }
2511
2518
  function onClickElement(element) {
2512
2519
  return () => {
@@ -2515,23 +2522,25 @@ function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
2515
2522
  }
2516
2523
  function onKeydownElement(element) {
2517
2524
  return (event) => {
2518
- event.code === 'Enter' ? onChange(element) : navigationElement(event);
2525
+ event.code === 'Enter'
2526
+ ? onChange(element)
2527
+ : controller.navigationElement(event);
2519
2528
  };
2520
2529
  }
2521
2530
  function onChange({ description, value }) {
2522
- inputRef?.current?.focus();
2523
- if (onSelect) {
2524
- setState({ listIsVisible: false });
2525
- onSelect(value);
2531
+ controller.inputRef?.current?.focus();
2532
+ if (props.onSelect) {
2533
+ controller.setState({ listIsVisible: false });
2534
+ value && props.onSelect(value);
2526
2535
  }
2527
2536
  else {
2528
- setFormValue(value);
2529
- setState({ listIsVisible: false, value: description });
2537
+ controller.setFormValue(value);
2538
+ controller.setState({ listIsVisible: false, value: description });
2530
2539
  }
2531
- onValue && onValue(value);
2540
+ props.onValue && props.onValue(value);
2532
2541
  }
2533
2542
  return {
2534
- listControl,
2543
+ controller,
2535
2544
  onBlurInput,
2536
2545
  onClickAction,
2537
2546
  onClickBackdrop,
@@ -2544,19 +2553,22 @@ function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
2544
2553
  }
2545
2554
 
2546
2555
  function RlsFieldSelectTemplate(props) {
2547
- const fieldSelect = useFieldSelect(props);
2548
- const { render, suggestions, children, disabled, formControl, msgErrorDisabled, placeholder, rlsTheme } = props;
2549
- return (jsxRuntimeExports.jsxs("div", { ref: fieldSelect.listControl.contentRef, className: renderClassStatus('rls-field-box', {
2550
- focused: fieldSelect.listControl.focused,
2551
- error: formControl?.wrong,
2552
- disabled
2553
- }, 'rls-field-list rls-field-select'), "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: fieldSelect.listControl.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: fieldSelect.listControl.value, onFocus: fieldSelect.onFocusInput, onBlur: fieldSelect.onBlurInput, onClick: fieldSelect.onClickInput, onKeyDown: fieldSelect.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action', {
2554
- visible: fieldSelect.listControl.listIsVisible
2555
- }), disabled: disabled, onClick: fieldSelect.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
2556
- visible: fieldSelect.listControl.listIsVisible,
2557
- hide: !fieldSelect.listControl.listIsVisible,
2558
- higher: fieldSelect.listControl.higher
2559
- }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: fieldSelect.listControl.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: fieldSelect.onClickElement(element), onKeyDown: fieldSelect.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: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: fieldSelect.onClickBackdrop })] })] }));
2556
+ const select = useFieldSelect(props);
2557
+ const { controller } = select;
2558
+ const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme } = props;
2559
+ const disabled = formControl?.disabled || props.disabled;
2560
+ const className = renderClassStatus('rls-field-box', {
2561
+ focused: controller.focused,
2562
+ disabled,
2563
+ error: formControl?.wrong
2564
+ }, 'rls-field-list rls-field-select');
2565
+ return (jsxRuntimeExports.jsxs("div", { ref: controller.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: controller.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: controller.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action', {
2566
+ visible: controller.listIsVisible
2567
+ }), disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
2568
+ visible: controller.listIsVisible,
2569
+ higher: controller.higher,
2570
+ hide: !controller.listIsVisible
2571
+ }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: controller.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: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
2560
2572
  }
2561
2573
  function RlsFieldSelect(props) {
2562
2574
  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 }) })) }));
@@ -2631,5 +2643,5 @@ function RlsApplication({ children }) {
2631
2643
  }), children: [children, RlsSnackbar] }), RlsConfirmation] }));
2632
2644
  }
2633
2645
 
2634
- export { ConfirmationResult, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerMonthTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, useConfirmationService, useDatatable, useListControl, useSnackbarService };
2646
+ export { ConfirmationResult, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerMonthTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, useConfirmationService, useDatatable, useListController, useSnackbarService };
2635
2647
  //# sourceMappingURL=index.js.map