@adamosuiteservices/ui 2.16.1 → 2.16.2

package/dist/date-picker-selector.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./jsx-runtime-BB_1_6y_.cjs"),j=require("./button-DVrteFz9.cjs"),s=require("./calendar-CpUN6BGK.cjs"),L=require("./combobox-BalI1GHE.cjs"),x=require("./popover-cGp_rNLg.cjs"),l=require("react");function R(c,u,m){return s.addDays(c,-u,m)}function T({dateRange:c,onDateRangeChange:u,labels:m,combobox:h,calendar:D,"aria-invalid":g,disabled:C}){const f=l.useRef(null),p=l.useRef(void 0),E=e=>{if(!e.from||!e.to)return;const r=s.startOfDay(new Date),b=[{value:"7_days",days:7},{value:"30_days",days:30},{value:"90_days",days:90}];for(const n of b){const q=R(r,n.days);if(s.startOfDay(e.from).getTime()===q.getTime()&&s.startOfDay(e.to).getTime()===r.getTime())return n.value}return"custom"},[y,o]=l.useState(()=>E(c)),[_,d]=l.useState(!1),[i,S]=l.useState(c),a={...{last7Days:"Last 7 days",last30Days:"Last 30 days",last90Days:"Last 90 days",custom:"Custom",placeholder:"Date",cancel:"Cancel",apply:"Apply"},...m},k=e=>{const r=s.startOfDay(new Date),n={"7_days":7,"30_days":30,"90_days":90}[e];return n?{from:R(r,n),to:r}:{from:void 0,to:void 0}},v=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:a.last7Days,value:"7_days"},{label:a.last30Days,value:"30_days"},{label:a.last90Days,value:"90_days"},{label:a.custom,value:"custom"}],labels:{placeholder:a.placeholder},value:y,onValueChange:O,"aria-invalid":g,disabled:C,ref:e=>{f.current=e},...h}),t.jsxRuntimeExports.jsxs(x.Popover,{open:_,onOpenChange:e=>{!e&&y==="custom"&&v()},children:[t.jsxRuntimeExports.jsx(x.PopoverAnchor,{virtualRef:f}),t.jsxRuntimeExports.jsxs(x.PopoverContent,{align:"start",children:[t.jsxRuntimeExports.jsx(s.Calendar,{required:!0,mode:"range",selected:i,onSelect:S,captionLayout:"dropdown",classNames:{root:"adm:p-0!"},...D}),t.jsxRuntimeExports.jsxs("div",{className:"adm:mt-2 adm:flex adm:justify-end adm:gap-2",children:[t.jsxRuntimeExports.jsx(j.Button,{variant:"link",onClick:()=>v(),children:a.cancel}),t.jsxRuntimeExports.jsx(j.Button,{variant:"link",onClick:P,children:a.apply})]})]})]})]})}exports.DatePickerSelector=T;
+"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,35 +1,40 @@
-import { j as e } from "./jsx-runtime-BzflLqGi.js";
-import { B as b } from "./button-B0lWuG-D.js";
-import { b as A, C as F, s as i } from "./calendar-CfqtuOWv.js";
-import { C as V } from "./combobox-CtSJw4m1.js";
-import { P as w, c as B, b as M } from "./popover-DcQ18EVl.js";
-import { useRef as x, useState as y } from "react";
-function D(l, n, u) {
-  return A(l, -n, u);
+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 J({
-  dateRange: l,
+function K({
+  dateRange: t,
   onDateRangeChange: n,
   labels: u,
-  combobox: C,
-  calendar: j,
+  combobox: j,
+  calendar: _,
   "aria-invalid": g,
-  disabled: _
+  disabled: k
 }) {
-  const f = x(null), m = x(void 0), R = (a) => {
-    if (!a.from || !a.to) return;
-    const o = i(/* @__PURE__ */ new Date()), h = [
+  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 h) {
-      const S = D(o, r.days);
-      if (i(a.from).getTime() === S.getTime() && i(a.to).getTime() === o.getTime())
+    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, t] = y(() => R(l)), [k, c] = y(!1), [d, L] = y(l), s = { ...{
+  }, [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",
@@ -37,31 +42,31 @@ function J({
     placeholder: "Date",
     cancel: "Cancel",
     apply: "Apply"
-  }, ...u }, P = (a) => {
-    const o = i(/* @__PURE__ */ new Date()), r = {
+  }, ...u }, R = (e) => {
+    const l = i(/* @__PURE__ */ new Date()), r = {
       "7_days": 7,
       "30_days": 30,
       "90_days": 90
-    }[a];
-    return r ? { from: D(o, r), to: o } : { from: void 0, to: void 0 };
-  }, v = (a) => {
-    t(m.current), c(!1);
-  }, T = (a) => {
-    if (a === "custom") {
-      m.current = p, t(a), c(!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), n(P(a));
+    o(e), n(R(e));
   }, O = () => {
     if (d?.from && d?.to) {
-      n(d), t("custom"), c(!1);
+      n(d), o("custom"), c(!1);
       return;
     }
-    t(m.current), c(!1);
+    o(m.current), c(!1);
   };
-  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(
-      V,
+  return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+    /* @__PURE__ */ a.jsx(
+      F,
       {
         alwaysShowPlaceholder: !0,
         selectedFeedback: "check",
@@ -76,38 +81,38 @@ function J({
         value: p,
         onValueChange: T,
         "aria-invalid": g,
-        disabled: _,
-        ref: (a) => {
-          f.current = a;
+        disabled: k,
+        ref: (e) => {
+          f.current = e;
         },
-        ...C
+        ...j
       }
     ),
-    /* @__PURE__ */ e.jsxs(
+    /* @__PURE__ */ a.jsxs(
       w,
       {
-        open: k,
-        onOpenChange: (a) => {
-          !a && p === "custom" && v();
+        open: L,
+        onOpenChange: (e) => {
+          !e && p === "custom" && h();
         },
         children: [
-          /* @__PURE__ */ e.jsx(B, { virtualRef: f }),
-          /* @__PURE__ */ e.jsxs(M, { align: "start", children: [
-            /* @__PURE__ */ e.jsx(
-              F,
+          /* @__PURE__ */ a.jsx(B, { virtualRef: f }),
+          /* @__PURE__ */ a.jsxs(E, { align: "start", children: [
+            /* @__PURE__ */ a.jsx(
+              A,
               {
                 required: !0,
                 mode: "range",
                 selected: d,
-                onSelect: L,
+                onSelect: P,
                 captionLayout: "dropdown",
                 classNames: { root: "adm:p-0!" },
-                ...j
+                ..._
               }
             ),
-            /* @__PURE__ */ e.jsxs("div", { className: "adm:mt-2 adm:flex adm:justify-end adm:gap-2", children: [
-              /* @__PURE__ */ e.jsx(b, { variant: "link", onClick: () => v(), children: s.cancel }),
-              /* @__PURE__ */ e.jsx(b, { variant: "link", onClick: O, 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 })
             ] })
           ] })
         ]
@@ -116,5 +121,5 @@ function J({
   ] });
 }
 export {
-  J 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.1",
+  "version": "2.16.2",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",