@adamosuiteservices/ui 2.16.0 → 2.16.2

package/dist/date-picker-selector.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./jsx-runtime-BB_1_6y_.cjs"),j=require("./button-DVrteFz9.cjs"),m=require("./calendar-CpUN6BGK.cjs"),q=require("./combobox-BalI1GHE.cjs"),p=require("./popover-cGp_rNLg.cjs"),o=require("react");function L(c,n,u){return m.addDays(c,-n,u)}function P({dateRange:c,onDateRangeChange:n,labels:u,combobox:R,calendar:v,"aria-invalid":h,disabled:D}){const x=o.useRef(null),d=o.useRef(void 0),[i,s]=o.useState(void 0),[g,r]=o.useState(!1),[l,C]=o.useState(c),t={...{last7Days:"Last 7 days",last30Days:"Last 30 days",last90Days:"Last 90 days",custom:"Custom",placeholder:"Date",cancel:"Cancel",apply:"Apply"},...u},E=e=>{const f=m.startOfDay(new Date),b={"7_days":7,"30_days":30,"90_days":90}[e];return b?{from:L(f,b),to:f}:{from:void 0,to:void 0}},y=e=>{s(d.current),r(!1)},S=e=>{if(e==="custom"){d.current=i,s(e),r(!0);return}s(e),n(E(e))},k=()=>{if(l?.from&&l?.to){n(l),s("custom"),r(!1);return}s(d.current),r(!1)};return a.jsxRuntimeExports.jsxs(a.jsxRuntimeExports.Fragment,{children:[a.jsxRuntimeExports.jsx(q.Combobox,{alwaysShowPlaceholder:!0,selectedFeedback:"check",icon:"calendar_today",options:[{label:t.last7Days,value:"7_days"},{label:t.last30Days,value:"30_days"},{label:t.last90Days,value:"90_days"},{label:t.custom,value:"custom"}],labels:{placeholder:t.placeholder},value:i,onValueChange:S,"aria-invalid":h,disabled:D,ref:e=>{x.current=e},...R}),a.jsxRuntimeExports.jsxs(p.Popover,{open:g,onOpenChange:e=>{!e&&i==="custom"&&y()},children:[a.jsxRuntimeExports.jsx(p.PopoverAnchor,{virtualRef:x}),a.jsxRuntimeExports.jsxs(p.PopoverContent,{align:"start",children:[a.jsxRuntimeExports.jsx(m.Calendar,{required:!0,mode:"range",selected:l,onSelect:C,captionLayout:"dropdown",classNames:{root:"adm:p-0!"},...v}),a.jsxRuntimeExports.jsxs("div",{className:"adm:mt-2 adm:flex adm:justify-end adm:gap-2",children:[a.jsxRuntimeExports.jsx(j.Button,{variant:"link",onClick:()=>y(),children:t.cancel}),a.jsxRuntimeExports.jsx(j.Button,{variant:"link",onClick:k,children:t.apply})]})]})]})]})}exports.DatePickerSelector=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./jsx-runtime-BB_1_6y_.cjs"),h=require("./button-DVrteFz9.cjs"),n=require("./calendar-CpUN6BGK.cjs"),L=require("./combobox-BalI1GHE.cjs"),x=require("./popover-cGp_rNLg.cjs"),r=require("react");function D(a,u,m){return n.addDays(a,-u,m)}function T({dateRange:a,onDateRangeChange:u,labels:m,combobox:R,calendar:C,"aria-invalid":g,disabled:E}){const f=r.useRef(null),p=r.useRef(void 0),v=e=>{if(!e.from||!e.to)return;const l=n.startOfDay(new Date),j=[{value:"7_days",days:7},{value:"30_days",days:30},{value:"90_days",days:90}];for(const c of j){const q=D(l,c.days);if(n.startOfDay(e.from).getTime()===q.getTime()&&n.startOfDay(e.to).getTime()===l.getTime())return c.value}return"custom"},[y,o]=r.useState(()=>v(a)),[_,d]=r.useState(!1),[i,S]=r.useState(a);r.useEffect(()=>{const e=v(a);o(e)},[a]);const s={...{last7Days:"Last 7 days",last30Days:"Last 30 days",last90Days:"Last 90 days",custom:"Custom",placeholder:"Date",cancel:"Cancel",apply:"Apply"},...m},k=e=>{const l=n.startOfDay(new Date),c={"7_days":7,"30_days":30,"90_days":90}[e];return c?{from:D(l,c),to:l}:{from:void 0,to:void 0}},b=e=>{o(p.current),d(!1)},O=e=>{if(e==="custom"){p.current=y,o(e),d(!0);return}o(e),u(k(e))},P=()=>{if(i?.from&&i?.to){u(i),o("custom"),d(!1);return}o(p.current),d(!1)};return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(L.Combobox,{alwaysShowPlaceholder:!0,selectedFeedback:"check",icon:"calendar_today",options:[{label:s.last7Days,value:"7_days"},{label:s.last30Days,value:"30_days"},{label:s.last90Days,value:"90_days"},{label:s.custom,value:"custom"}],labels:{placeholder:s.placeholder},value:y,onValueChange:O,"aria-invalid":g,disabled:E,ref:e=>{f.current=e},...R}),t.jsxRuntimeExports.jsxs(x.Popover,{open:_,onOpenChange:e=>{!e&&y==="custom"&&b()},children:[t.jsxRuntimeExports.jsx(x.PopoverAnchor,{virtualRef:f}),t.jsxRuntimeExports.jsxs(x.PopoverContent,{align:"start",children:[t.jsxRuntimeExports.jsx(n.Calendar,{required:!0,mode:"range",selected:i,onSelect:S,captionLayout:"dropdown",classNames:{root:"adm:p-0!"},...C}),t.jsxRuntimeExports.jsxs("div",{className:"adm:mt-2 adm:flex adm:justify-end adm:gap-2",children:[t.jsxRuntimeExports.jsx(h.Button,{variant:"link",onClick:()=>b(),children:s.cancel}),t.jsxRuntimeExports.jsx(h.Button,{variant:"link",onClick:P,children:s.apply})]})]})]})]})}exports.DatePickerSelector=T;

package/dist/date-picker-selector.js

@@ -1,22 +1,40 @@
-import { j as e } from "./jsx-runtime-BzflLqGi.js";
-import { B as h } from "./button-B0lWuG-D.js";
-import { b as _, C as P, s as O } from "./calendar-CfqtuOWv.js";
-import { C as S } from "./combobox-CtSJw4m1.js";
-import { P as A, c as B, b as F } from "./popover-DcQ18EVl.js";
-import { useRef as v, useState as u } from "react";
-function M(n, o, c) {
-  return _(n, -o, c);
+import { j as a } from "./jsx-runtime-BzflLqGi.js";
+import { B as x } from "./button-B0lWuG-D.js";
+import { b as V, C as A, s as i } from "./calendar-CfqtuOWv.js";
+import { C as F } from "./combobox-CtSJw4m1.js";
+import { P as w, c as B, b as E } from "./popover-DcQ18EVl.js";
+import { useRef as D, useState as y, useEffect as M } from "react";
+function C(t, n, u) {
+  return V(t, -n, u);
 }
-function H({
-  dateRange: n,
-  onDateRangeChange: o,
-  labels: c,
-  combobox: b,
-  calendar: x,
-  "aria-invalid": C,
-  disabled: D
+function K({
+  dateRange: t,
+  onDateRangeChange: n,
+  labels: u,
+  combobox: j,
+  calendar: _,
+  "aria-invalid": g,
+  disabled: k
 }) {
-  const m = v(null), d = v(void 0), [i, t] = u(void 0), [j, l] = u(!1), [r, g] = u(n), s = { ...{
+  const f = D(null), m = D(void 0), v = (e) => {
+    if (!e.from || !e.to) return;
+    const l = i(/* @__PURE__ */ new Date()), b = [
+      { value: "7_days", days: 7 },
+      { value: "30_days", days: 30 },
+      { value: "90_days", days: 90 }
+    ];
+    for (const r of b) {
+      const S = C(l, r.days);
+      if (i(e.from).getTime() === S.getTime() && i(e.to).getTime() === l.getTime())
+        return r.value;
+    }
+    return "custom";
+  }, [p, o] = y(() => v(t)), [L, c] = y(!1), [d, P] = y(t);
+  M(() => {
+    const e = v(t);
+    o(e);
+  }, [t]);
+  const s = { ...{
     last7Days: "Last 7 days",
     last30Days: "Last 30 days",
     last90Days: "Last 90 days",
@@ -24,31 +42,31 @@ function H({
     placeholder: "Date",
     cancel: "Cancel",
     apply: "Apply"
-  }, ...c }, R = (a) => {
-    const y = O(/* @__PURE__ */ new Date()), f = {
+  }, ...u }, R = (e) => {
+    const l = i(/* @__PURE__ */ new Date()), r = {
       "7_days": 7,
       "30_days": 30,
       "90_days": 90
-    }[a];
-    return f ? { from: M(y, f), to: y } : { from: void 0, to: void 0 };
-  }, p = (a) => {
-    t(d.current), l(!1);
-  }, k = (a) => {
-    if (a === "custom") {
-      d.current = i, t(a), l(!0);
+    }[e];
+    return r ? { from: C(l, r), to: l } : { from: void 0, to: void 0 };
+  }, h = (e) => {
+    o(m.current), c(!1);
+  }, T = (e) => {
+    if (e === "custom") {
+      m.current = p, o(e), c(!0);
       return;
     }
-    t(a), o(R(a));
-  }, L = () => {
-    if (r?.from && r?.to) {
-      o(r), t("custom"), l(!1);
+    o(e), n(R(e));
+  }, O = () => {
+    if (d?.from && d?.to) {
+      n(d), o("custom"), c(!1);
       return;
     }
-    t(d.current), l(!1);
+    o(m.current), c(!1);
   };
-  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(
-      S,
+  return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+    /* @__PURE__ */ a.jsx(
+      F,
       {
         alwaysShowPlaceholder: !0,
         selectedFeedback: "check",
@@ -60,41 +78,41 @@ function H({
           { label: s.custom, value: "custom" }
         ],
         labels: { placeholder: s.placeholder },
-        value: i,
-        onValueChange: k,
-        "aria-invalid": C,
-        disabled: D,
-        ref: (a) => {
-          m.current = a;
+        value: p,
+        onValueChange: T,
+        "aria-invalid": g,
+        disabled: k,
+        ref: (e) => {
+          f.current = e;
         },
-        ...b
+        ...j
       }
     ),
-    /* @__PURE__ */ e.jsxs(
-      A,
+    /* @__PURE__ */ a.jsxs(
+      w,
       {
-        open: j,
-        onOpenChange: (a) => {
-          !a && i === "custom" && p();
+        open: L,
+        onOpenChange: (e) => {
+          !e && p === "custom" && h();
         },
         children: [
-          /* @__PURE__ */ e.jsx(B, { virtualRef: m }),
-          /* @__PURE__ */ e.jsxs(F, { align: "start", children: [
-            /* @__PURE__ */ e.jsx(
-              P,
+          /* @__PURE__ */ a.jsx(B, { virtualRef: f }),
+          /* @__PURE__ */ a.jsxs(E, { align: "start", children: [
+            /* @__PURE__ */ a.jsx(
+              A,
               {
                 required: !0,
                 mode: "range",
-                selected: r,
-                onSelect: g,
+                selected: d,
+                onSelect: P,
                 captionLayout: "dropdown",
                 classNames: { root: "adm:p-0!" },
-                ...x
+                ..._
               }
             ),
-            /* @__PURE__ */ e.jsxs("div", { className: "adm:mt-2 adm:flex adm:justify-end adm:gap-2", children: [
-              /* @__PURE__ */ e.jsx(h, { variant: "link", onClick: () => p(), children: s.cancel }),
-              /* @__PURE__ */ e.jsx(h, { variant: "link", onClick: L, children: s.apply })
+            /* @__PURE__ */ a.jsxs("div", { className: "adm:mt-2 adm:flex adm:justify-end adm:gap-2", children: [
+              /* @__PURE__ */ a.jsx(x, { variant: "link", onClick: () => h(), children: s.cancel }),
+              /* @__PURE__ */ a.jsx(x, { variant: "link", onClick: O, children: s.apply })
             ] })
           ] })
         ]
@@ -103,5 +121,5 @@ function H({
   ] });
 }
 export {
-  H as DatePickerSelector
+  K as DatePickerSelector
 };

package/docs/components/ui/date-picker-selector.md

@@ -226,6 +226,48 @@ function MyComponent() {
 }
 ```
 
+### Con Botón de Reset
+
+```tsx
+import { Button } from "@adamosuiteservices/ui/button";
+import { startOfDay, subDays } from "date-fns";
+
+function MyComponent() {
+  const today = startOfDay(new Date());
+  const [dateRange, setDateRange] = useState<DateRange>({
+    from: subDays(today, 30),
+    to: today,
+  });
+
+  const handleReset = () => {
+    setDateRange({
+      from: undefined,
+      to: undefined,
+    });
+  };
+
+  const hasSelection = dateRange.from || dateRange.to;
+
+  return (
+    <div className="flex items-center gap-2">
+      <DatePickerSelector
+        dateRange={dateRange}
+        onDateRangeChange={setDateRange}
+      />
+      <Button
+        variant="outline"
+        onClick={handleReset}
+        disabled={!hasSelection}
+      >
+        Reset
+      </Button>
+    </div>
+  );
+}
+```
+
+**Comportamiento**: El componente se sincroniza automáticamente con cambios externos en `dateRange` gracias al hook `useEffect` interno. Cuando se resetea el rango externamente, el combobox muestra el placeholder automáticamente.
+
 ### Validación de Rango
 
 ```tsx
@@ -317,6 +359,26 @@ El selector de fechas dentro de un `<fieldset disabled>` automáticamente hereda
 
 ## Comportamiento
 
+### Sincronización de Estado
+
+El componente sincroniza automáticamente su estado interno con el prop `dateRange` mediante un `useEffect`. Esto significa que:
+
+- ✅ Cambios externos a `dateRange` actualizan el combobox automáticamente
+- ✅ Resetear el rango externamente (e.g., botón Reset) actualiza la UI correctamente
+- ✅ Formularios que limpian campos funcionan sin configuración adicional
+- ✅ No requiere controlar manualmente el estado del combobox
+
+**Ejemplo de sincronización:**
+```tsx
+// Resetear desde código externo
+setDateRange({ from: undefined, to: undefined });
+// → El combobox mostrará automáticamente el placeholder
+
+// Establecer un rango predefinido
+setDateRange({ from: subDays(new Date(), 7), to: new Date() });
+// → El combobox detectará y mostrará "Last 7 days"
+```
+
 ### Rangos Predefinidos
 
 El componente ofrece tres rangos predefinidos:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamosuiteservices/ui",
-  "version": "2.16.0",
+  "version": "2.16.2",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",