@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/cjs/index.js CHANGED
@@ -1931,14 +1931,15 @@ function RlsLabelCheckBox({ children, disabled, extended, identifier, formContro
1931
1931
  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 })] }));
1932
1932
  }
1933
1933
 
1934
- function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, rlsTheme, value }) {
1934
+ function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, onValue, rlsTheme, value }) {
1935
1935
  const [checked, setChecked] = require$$0.useState(formControl?.value === value);
1936
1936
  require$$0.useEffect(() => {
1937
1937
  setChecked(formControl?.value === value);
1938
1938
  }, [formControl?.value]);
1939
1939
  const onSelect = require$$0.useCallback(() => {
1940
1940
  formControl && formControl?.setValue(value);
1941
- }, [formControl, value]);
1941
+ onValue && onValue(value);
1942
+ }, [formControl, value, onValue]);
1942
1943
  const className = require$$0.useMemo(() => {
1943
1944
  return renderClassStatus('rls-label-radiobutton', { disabled, extended });
1944
1945
  }, [disabled, extended]);
@@ -2956,7 +2957,7 @@ function RlsFieldDate({ children, date, disabled, formControl, format, identifie
2956
2957
  formControl?.touch();
2957
2958
  setModalIsVisible(false);
2958
2959
  }, [formControl, onChange]);
2959
- 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 }) })] }));
2960
+ 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 }) })] }));
2960
2961
  }
2961
2962
 
2962
2963
  const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';