@rolster/react-components 18.24.4 → 18.24.5

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.
@@ -2209,7 +2209,7 @@
2209
2209
  visibility: var(--pvt-component-visibility);
2210
2210
  z-index: var(--rls-z-index-2);
2211
2211
  border-radius: var(--rls-sizing-x4);
2212
- background: var(--rls-app-color-050);
2212
+ background: var(--rlc-modal-background, var(--rls-app-color-050));
2213
2213
  transform: var(--pvt-component-transform);
2214
2214
  transition: opacity 125ms 0ms var(--rls-deceleration-curve),
2215
2215
  transform 125ms 0ms var(--rls-deceleration-curve),
@@ -2237,6 +2237,8 @@
2237
2237
  width: 150rem;
2238
2238
  overflow: hidden;
2239
2239
  row-gap: var(--rls-sizing-x4);
2240
+ border-radius: var(--rlc-picker-date-radius, 0rem);
2241
+ background: var(--rlc-picker-date-background, transparent);
2240
2242
  }
2241
2243
  .rls-picker-date__header {
2242
2244
  display: flex;
@@ -2245,7 +2247,6 @@
2245
2247
  padding: var(--rls-sizing-x4);
2246
2248
  box-sizing: border-box;
2247
2249
  background: var(--rls-theme-color-100);
2248
- border-radius: var(--rls-sizing-x4);
2249
2250
  }
2250
2251
  .rls-picker-date__header .rls-picker-selector-title {
2251
2252
  padding: 0rem var(--rls-sizing-x6);
@@ -2366,7 +2367,10 @@
2366
2367
  margin: 1rem;
2367
2368
  }
2368
2369
  .rls-field-date-modal {
2370
+ --rlc-modal-background: transparent;
2369
2371
  --rlc-modal-max-width: 150rem;
2372
+ --rlc-picker-date-radius: var(--rls-sizing-x4);
2373
+ --rlc-picker-date-background: var(--rls-app-color-050);
2370
2374
  } /*# sourceMappingURL=FieldDate.css.map */
2371
2375
 
2372
2376
  .rls-picker-date-range {
@@ -2376,6 +2380,8 @@
2376
2380
  width: 150rem;
2377
2381
  row-gap: var(--rls-sizing-x4);
2378
2382
  overflow: hidden;
2383
+ border-radius: var(--rlc-picker-date-range-radius, 0rem);
2384
+ background: var(--rlc-picker-date-range-background, transparent);
2379
2385
  }
2380
2386
  .rls-picker-date-range__header {
2381
2387
  background: var(--rls-theme-color-100);
@@ -2502,7 +2508,10 @@
2502
2508
  margin: 1rem;
2503
2509
  }
2504
2510
  .rls-field-date-range-modal {
2511
+ --rlc-modal-background: transparent;
2505
2512
  --rlc-modal-max-width: 150rem;
2513
+ --rlc-picker-date-range-radius: var(--rls-sizing-x4);
2514
+ --rlc-picker-date-range-background: var(--rls-app-color-050);
2506
2515
  } /*# sourceMappingURL=FieldDateRange.css.map */
2507
2516
 
2508
2517
  .rls-field-select {
package/dist/cjs/index.js CHANGED
@@ -2089,6 +2089,7 @@ function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minD
2089
2089
  }
2090
2090
 
2091
2091
  const DATE_FORMAT = '{dd}/{mx}/{yy}';
2092
+ const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
2092
2093
  const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
2093
2094
 
2094
2095
  function RlsPickerDayRangeHeaders() {
@@ -2839,7 +2840,6 @@ function RlsModal({ children, className, overflow, visible, rlsTheme }) {
2839
2840
  return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
2840
2841
  }
2841
2842
 
2842
- const formatTitle = '{dw}, {mx} {dd} de {aa}';
2843
2843
  function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
2844
2844
  const today = require$$0.useRef(new Date()); // Initial current date in component
2845
2845
  const _date = require$$0.useMemo(() => {
@@ -2863,7 +2863,7 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
2863
2863
  });
2864
2864
  }, [visibility]);
2865
2865
  const title = require$$0.useMemo(() => {
2866
- return dates.dateFormatTemplate(_date, formatTitle);
2866
+ return dates.dateFormatTemplate(_date, DATE_FORMAT_TITLE);
2867
2867
  }, [_date]);
2868
2868
  const itIsDisabledToday = require$$0.useMemo(() => components.dateOutRange({
2869
2869
  date: today.current,
@@ -3724,23 +3724,27 @@ const RlsContext = require$$0.createContext({
3724
3724
  return Promise.resolve(ConfirmationResult.approved());
3725
3725
  },
3726
3726
  snackbar: () => { },
3727
+ setIsMobile: () => { },
3727
3728
  setNavbarInApp: () => { },
3728
3729
  setNavbarIsCondense: () => { }
3729
3730
  });
3730
3731
  function RlsApplication({ children }) {
3731
3732
  const { RlsConfirmation, confirmation } = useConfirmation();
3732
3733
  const { RlsSnackbar, snackbar } = useSnackbar();
3733
- const [hasNavbar, setNavbarInApp] = require$$0.useState(false);
3734
+ const [navbarInApp, setNavbarInApp] = require$$0.useState(false);
3734
3735
  const [navbarIsCondense, setNavbarIsCondense] = require$$0.useState(false);
3736
+ const [mobileApp, setIsMobile] = require$$0.useState(false);
3735
3737
  const className = require$$0.useMemo(() => {
3736
3738
  return renderClassStatus('rls-app__body', {
3737
- snackbar: hasNavbar,
3739
+ mobile: mobileApp,
3740
+ 'navbar-snackbar': navbarInApp,
3738
3741
  'navbar-condense': navbarIsCondense
3739
3742
  });
3740
- }, [hasNavbar, navbarIsCondense]);
3743
+ }, [mobileApp, navbarInApp, navbarIsCondense]);
3741
3744
  return (jsxRuntimeExports.jsxs(RlsContext.Provider, { value: {
3742
3745
  confirmation,
3743
3746
  snackbar,
3747
+ setIsMobile,
3744
3748
  setNavbarInApp,
3745
3749
  setNavbarIsCondense
3746
3750
  }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));