@rolster/react-components 18.23.12 → 18.23.14

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.
@@ -2160,10 +2160,9 @@
2160
2160
  } /*# sourceMappingURL=FieldAutocomplete.css.map */
2161
2161
 
2162
2162
  .rls-modal {
2163
- --pvt-component-transform: translateY(80rem) scale(0.6);
2163
+ --pvt-component-transform: translateY(150px) scale(0.6);
2164
2164
  --pvt-component-height: 0rem;
2165
2165
  --pvt-component-opacity: 0;
2166
- --pvt-component-overflow: hidden;
2167
2166
  --pvt-component-visibility: hidden;
2168
2167
  --pvt-backdrop-opacity: 0;
2169
2168
  --pvt-backdrop-bottom: initial;
@@ -2192,13 +2191,11 @@
2192
2191
  }
2193
2192
  .rls-modal__component {
2194
2193
  position: absolute;
2195
- width: auto;
2196
2194
  max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
2197
2195
  height: var(--pvt-component-height);
2198
2196
  opacity: var(--pvt-component-opacity);
2199
2197
  visibility: var(--pvt-component-visibility);
2200
2198
  z-index: var(--rls-z-index-2);
2201
- overflow: var(--pvt-component-overflow);
2202
2199
  border-radius: var(--rls-sizing-x4);
2203
2200
  background: var(--rls-app-color-050);
2204
2201
  transform: var(--pvt-component-transform);
@@ -2355,6 +2352,9 @@
2355
2352
  }
2356
2353
  .rls-field-date__action .rls-icon {
2357
2354
  margin: 1rem;
2355
+ }
2356
+ .rls-field-date-modal {
2357
+ --rlc-modal-max-width: 150rem;
2358
2358
  } /*# sourceMappingURL=FieldDate.css.map */
2359
2359
 
2360
2360
  .rls-picker-date-range {
@@ -2488,6 +2488,9 @@
2488
2488
  }
2489
2489
  .rls-field-date-range__action .rls-icon {
2490
2490
  margin: 1rem;
2491
+ }
2492
+ .rls-field-date-modal {
2493
+ --rlc-modal-max-width: 150rem;
2491
2494
  } /*# sourceMappingURL=FieldDateRange.css.map */
2492
2495
 
2493
2496
  .rls-field-select {
package/dist/es/index.js CHANGED
@@ -1929,14 +1929,15 @@ function RlsLabelCheckBox({ children, disabled, extended, identifier, formContro
1929
1929
  return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__text", children: children })] }));
1930
1930
  }
1931
1931
 
1932
- function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, rlsTheme, value }) {
1932
+ function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, onValue, rlsTheme, value }) {
1933
1933
  const [checked, setChecked] = useState(formControl?.value === value);
1934
1934
  useEffect(() => {
1935
1935
  setChecked(formControl?.value === value);
1936
1936
  }, [formControl?.value]);
1937
1937
  const onSelect = useCallback(() => {
1938
1938
  formControl && formControl?.setValue(value);
1939
- }, [formControl, value]);
1939
+ onValue && onValue(value);
1940
+ }, [formControl, value, onValue]);
1940
1941
  const className = useMemo(() => {
1941
1942
  return renderClassStatus('rls-label-radiobutton', { disabled, extended });
1942
1943
  }, [disabled, extended]);
@@ -2954,7 +2955,7 @@ function RlsFieldDate({ children, date, disabled, formControl, format, identifie
2954
2955
  formControl?.touch();
2955
2956
  setModalIsVisible(false);
2956
2957
  }, [formControl, onChange]);
2957
- return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, 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-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
2958
+ return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, 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-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: 'rls-field-date-modal', visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
2958
2959
  }
2959
2960
 
2960
2961
  const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';