@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/es/index.js CHANGED
@@ -2087,6 +2087,7 @@ function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minD
2087
2087
  }
2088
2088
 
2089
2089
  const DATE_FORMAT = '{dd}/{mx}/{yy}';
2090
+ const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
2090
2091
  const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
2091
2092
 
2092
2093
  function RlsPickerDayRangeHeaders() {
@@ -2837,7 +2838,6 @@ function RlsModal({ children, className, overflow, visible, rlsTheme }) {
2837
2838
  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);
2838
2839
  }
2839
2840
 
2840
- const formatTitle = '{dw}, {mx} {dd} de {aa}';
2841
2841
  function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
2842
2842
  const today = useRef(new Date()); // Initial current date in component
2843
2843
  const _date = useMemo(() => {
@@ -2861,7 +2861,7 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
2861
2861
  });
2862
2862
  }, [visibility]);
2863
2863
  const title = useMemo(() => {
2864
- return dateFormatTemplate(_date, formatTitle);
2864
+ return dateFormatTemplate(_date, DATE_FORMAT_TITLE);
2865
2865
  }, [_date]);
2866
2866
  const itIsDisabledToday = useMemo(() => dateOutRange({
2867
2867
  date: today.current,
@@ -3722,23 +3722,27 @@ const RlsContext = createContext({
3722
3722
  return Promise.resolve(ConfirmationResult.approved());
3723
3723
  },
3724
3724
  snackbar: () => { },
3725
+ setIsMobile: () => { },
3725
3726
  setNavbarInApp: () => { },
3726
3727
  setNavbarIsCondense: () => { }
3727
3728
  });
3728
3729
  function RlsApplication({ children }) {
3729
3730
  const { RlsConfirmation, confirmation } = useConfirmation();
3730
3731
  const { RlsSnackbar, snackbar } = useSnackbar();
3731
- const [hasNavbar, setNavbarInApp] = useState(false);
3732
+ const [navbarInApp, setNavbarInApp] = useState(false);
3732
3733
  const [navbarIsCondense, setNavbarIsCondense] = useState(false);
3734
+ const [mobileApp, setIsMobile] = useState(false);
3733
3735
  const className = useMemo(() => {
3734
3736
  return renderClassStatus('rls-app__body', {
3735
- snackbar: hasNavbar,
3737
+ mobile: mobileApp,
3738
+ 'navbar-snackbar': navbarInApp,
3736
3739
  'navbar-condense': navbarIsCondense
3737
3740
  });
3738
- }, [hasNavbar, navbarIsCondense]);
3741
+ }, [mobileApp, navbarInApp, navbarIsCondense]);
3739
3742
  return (jsxRuntimeExports.jsxs(RlsContext.Provider, { value: {
3740
3743
  confirmation,
3741
3744
  snackbar,
3745
+ setIsMobile,
3742
3746
  setNavbarInApp,
3743
3747
  setNavbarIsCondense
3744
3748
  }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));