@granto-umbrella/umbrella-components 3.0.24 → 3.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "3.0.24",
+  "version": "3.0.27",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",

package/src/components/atoms/DatePickerInput/DatePicker.styles.ts

@@ -1,19 +1,19 @@
 // DatePicker.styles.ts
-import { createGlobalStyle, styled } from "styled-components";
+import { createGlobalStyle, styled } from 'styled-components';
 import ReactDatePicker, {
   DatePickerProps,
   registerLocale,
-} from "react-datepicker";
-import { ptBR } from "date-fns/locale";
+} from 'react-datepicker';
+import { ptBR } from 'date-fns/locale';
 import {
   semanticColors,
   semanticRadius,
   typographyTokens,
   semanticSizes,
-} from "../../../styles/tokens";
+} from '../../../styles/tokens';
 
 // register Portuguese‐Brazil locale
-registerLocale("pt-BR", ptBR);
+registerLocale('pt-BR', ptBR);
 
 // 1) Global overrides for the popup calendar:
 export const DatePickerGlobalStyles = createGlobalStyle`
@@ -61,10 +61,10 @@ export const StyledDatePicker = styled(
   ReactDatePicker as unknown as React.ComponentType<DatePickerProps>
 )`
   width: 100%;
-  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.md};
+  padding: 0.65rem ${semanticSizes.global.padding.md};
   border: 1px solid ${semanticColors.neutral[300]};
   border-radius: ${semanticRadius.global.radius.md};
-  font-size: ${typographyTokens.fontSizes.bodyM};
+  font-size: ${typographyTokens.fontSizes.bodyS};
   color: ${semanticColors.base.text};
 
   &:focus {

package/src/components/atoms/DatePickerInput/DatePickerInput.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React from "react";
-import { DatePickerGlobalStyles, StyledDatePicker } from "./DatePicker.styles";
-
-import "react-datepicker/dist/react-datepicker.css";
+import React from 'react';
+import { DatePickerGlobalStyles, StyledDatePicker } from './DatePicker.styles';
+import 'react-datepicker/dist/react-datepicker.css';
+import { parse, isValid, format } from 'date-fns';
 
 export interface DatePickerInputProps {
-  mode?: "single" | "range";
+  mode?: 'single' | 'range';
   selected: Date | [Date, Date];
   onChange: (date: Date | [Date, Date]) => void;
   minDate?: Date;
@@ -14,44 +14,141 @@ export interface DatePickerInputProps {
   [key: string]: any;
 }
 
+const DF = 'dd/MM/yyyy';
+
+// ---------- helpers de parse/format ----------
+function parseBRDate(s: string): Date | null {
+  const d = parse(s, DF, new Date());
+  return isValid(d) ? d : null;
+}
+
+function maskDateDigits(digits: string) {
+  let v = digits.replace(/\D/g, '').slice(0, 8);
+  if (v.length >= 5) v = v.replace(/^(\d{2})(\d{2})(\d{0,4}).*/, '$1/$2/$3');
+  else if (v.length >= 3) v = v.replace(/^(\d{2})(\d{0,2}).*/, '$1/$2');
+  return v;
+}
+
+function autoMaskSingle(input: string) {
+  const digits = input.replace(/\D/g, '');
+  return maskDateDigits(digits);
+}
+
+function autoMaskRange(input: string) {
+  const parts = input.split(/\s*[-–]\s*/);
+  const left = autoMaskSingle(parts[0] || '');
+  const right = autoMaskSingle(parts[1] || '');
+  return right ? `${left} - ${right}` : left;
+}
+
+function tryCommitSingle(value: string): Date | null {
+  return parseBRDate(value);
+}
+
+function tryCommitRange(value: string): [Date | null, Date | null] {
+  const [a, b] = value.split(/\s*[-–]\s*/);
+  return [a ? parseBRDate(a) : null, b ? parseBRDate(b) : null];
+}
+
+// Tipo que o StyledDatePicker espera em onChangeRaw
+type RawEvt =
+  | React.MouseEvent<HTMLElement>
+  | React.KeyboardEvent<HTMLElement>
+  | undefined;
+
+// Extrai com segurança o input do evento (alvo pode não ser input diretamente)
+function getInputFromRawEvent(e: RawEvt): HTMLInputElement | null {
+  const target = e?.target as HTMLElement | undefined;
+  if (!target) return null;
+  if (target instanceof HTMLInputElement) return target;
+  const input = target.closest('input');
+  return (input as HTMLInputElement) || null;
+}
+
 export const DatePickerInput: React.FC<DatePickerInputProps> = ({
-  mode = "single",
+  mode = 'single',
   selected,
   onChange,
   minDate,
   maxDate,
   placeholder,
   ...rest
-}) => (
-  <>
-    {/* inject our calendar overrides */}
-    <DatePickerGlobalStyles />
-
-    {mode === "range" ? (
-      <StyledDatePicker
-        locale="pt-BR"
-        selectsRange
-        startDate={(selected as [Date, Date])[0] || undefined}
-        endDate={(selected as [Date, Date])[1] || undefined}
-        selected={(selected as [Date, Date])[0] || undefined}
-        onChange={(d) => onChange(d as [Date, Date])}
-        minDate={minDate}
-        maxDate={maxDate}
-        placeholderText={placeholder}
-        dateFormat="dd/MM/yyyy"
-        {...rest}
-      />
-    ) : (
-      <StyledDatePicker
-        locale="pt-BR"
-        selected={selected as Date}
-        onChange={(d) => onChange(d as Date)}
-        minDate={minDate}
-        maxDate={maxDate}
-        placeholderText={placeholder}
-        dateFormat="dd/MM/yyyy"
-        {...rest}
-      />
-    )}
-  </>
-);
+}) => {
+  // SINGLE
+  const handleChangeRawSingle = (e: RawEvt) => {
+    const el = getInputFromRawEvent(e);
+    if (!el) return;
+    el.value = autoMaskSingle(el.value);
+  };
+
+  const handleBlurSingle = (e: React.FocusEvent<HTMLInputElement>) => {
+    const el = e.target;
+    const d = tryCommitSingle(el.value);
+    if (d) {
+      el.value = format(d, DF);
+      onChange(d);
+    }
+  };
+
+  // RANGE
+  const handleChangeRawRange = (e: RawEvt) => {
+    const el = getInputFromRawEvent(e);
+    if (!el) return;
+    el.value = autoMaskRange(el.value);
+  };
+
+  const handleBlurRange = (e: React.FocusEvent<HTMLInputElement>) => {
+    const el = e.target;
+    const [d1, d2] = tryCommitRange(el.value);
+
+    if (d1) {
+      const oldRight = Array.isArray(selected) ? selected[1] : undefined;
+      const payload: [Date, Date] = [d1, (d2 || (oldRight as Date)) as Date];
+      const left = format(d1, DF);
+      const right = d2 ? format(d2, DF) : '';
+      el.value = right ? `${left} - ${right}` : left;
+      onChange(payload);
+    }
+  };
+
+  return (
+    <>
+      <DatePickerGlobalStyles />
+
+      {mode === 'range' ? (
+        <StyledDatePicker
+          locale="pt-BR"
+          selectsRange
+          startDate={(selected as [Date, Date])[0] || undefined}
+          endDate={(selected as [Date, Date])[1] || undefined}
+          selected={(selected as [Date, Date])[0] || undefined}
+          onChange={(d) => onChange(d as [Date, Date])}
+          minDate={minDate}
+          maxDate={maxDate}
+          placeholderText={placeholder}
+          dateFormat={DF}
+          onChangeRaw={handleChangeRawRange} // << tipo compatível
+          onBlur={handleBlurRange}
+          {...rest}
+        />
+      ) : (
+        <StyledDatePicker
+          locale="pt-BR"
+          selected={
+            Array.isArray(selected)
+              ? selected[0]
+              : (selected as Date) || undefined
+          }
+          onChange={(d) => onChange(d as Date)}
+          minDate={minDate}
+          maxDate={maxDate}
+          placeholderText={placeholder}
+          dateFormat={DF}
+          onChangeRaw={handleChangeRawSingle} // << tipo compatível
+          onBlur={handleBlurSingle}
+          {...rest}
+        />
+      )}
+    </>
+  );
+};

package/src/components/atoms/ModalAviso/ModalAviso.styles.tsx

@@ -7,6 +7,7 @@ import {
   typographyTokens, 
   semanticBorders
 }  from "../../../styles/tokens";
+import { semanticColors } from "@granto-umbrella/umbrella-components";
 
 export const Wrapper = styled.div`
   position: fixed;
@@ -16,9 +17,9 @@ export const Wrapper = styled.div`
 `;
 
 export const Container = styled.div`
-  background-color: ${primitiveColors.purple[100]};
+  background-color: ${semanticColors.info.surface.feedback};
   border-radius: ${semanticRadius.global.radius.md2};
-  border: ${semanticBorders.global.md} solid ${primitiveColors.purple[1200]};
+  border: ${semanticBorders.global.md} solid ${semanticColors.info.border.feedback};
   padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
   display: flex;
   align-items: start;
@@ -32,7 +33,7 @@ export const Content = styled.div`
 `;
 
 export const Title = styled.p`
-  color: ${primitiveColors.gray[1100]};
+  color: ${semanticColors.info.text.feedback.strong};
   font-weight: ${typographyTokens.fontWeights.semibold};
   font-size: ${typographyTokens.fontSizes.bodyM};
   margin: 0 0 ${semanticSizes.global.gap.xs} 0;