design-zystem 1.0.420 → 1.0.421

package/dist/ui/index.js

@@ -8376,6 +8376,7 @@ var import_locale2 = require("date-fns/locale");
 var RadixPopover6 = __toESM(require("@radix-ui/react-popover"));
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var formatMonthCaption = (month) => (0, import_date_fns.format)(month, "MMM yyyy", { locale: import_locale2.fr });
+var isSameCalendarDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 var RANGE_PRESETS = [
   {
     label: "Mois pr\xE9c\xE9dent",
@@ -8437,8 +8438,21 @@ var DatePicker = ({
 }) => {
   const isRange = mode === "range";
   const [open, setOpen] = (0, import_react59.useState)(false);
-  const [activePreset, setActivePreset] = (0, import_react59.useState)(null);
   const resolvedPresets = presets != null ? presets : isRange ? RANGE_PRESETS : SINGLE_PRESETS;
+  const activePreset = (0, import_react59.useMemo)(() => {
+    var _a;
+    const match = resolvedPresets.find((preset) => {
+      const result = preset.getValue();
+      if (isRange) {
+        if (!startDate || !endDate) return false;
+        const [start, end] = result;
+        return isSameCalendarDay(start, startDate) && isSameCalendarDay(end, endDate);
+      }
+      if (!value) return false;
+      return isSameCalendarDay(result, value);
+    });
+    return (_a = match == null ? void 0 : match.label) != null ? _a : null;
+  }, [isRange, resolvedPresets, startDate, endDate, value]);
   const displayText = isRange ? startDate && endDate ? `${(0, import_date_fns.format)(startDate, "dd/MM/yyyy")} \u2014 ${(0, import_date_fns.format)(endDate, "dd/MM/yyyy")}` : placeholder != null ? placeholder : "S\xE9lectionner une p\xE9riode" : value ? (0, import_date_fns.format)(value, "dd/MM/yyyy") : placeholder != null ? placeholder : "S\xE9lectionner une date";
   const hasValue = isRange ? Boolean(startDate && endDate) : Boolean(value);
   const dayPickerDisabled = [
@@ -8453,13 +8467,11 @@ var DatePicker = ({
     } else {
       onChange == null ? void 0 : onChange(result);
     }
-    setActivePreset(preset.label);
     setOpen(false);
   };
   const handleReset = () => {
     if (isRange) onRangeChange == null ? void 0 : onRangeChange(null, null);
     else onChange == null ? void 0 : onChange(null);
-    setActivePreset(null);
   };
   const calendar = /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(RadixPopover6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     RadixPopover6.Content,
@@ -8482,7 +8494,6 @@ var DatePicker = ({
           onSelect: (range) => {
             var _a, _b;
             onRangeChange == null ? void 0 : onRangeChange((_a = range == null ? void 0 : range.from) != null ? _a : null, (_b = range == null ? void 0 : range.to) != null ? _b : null);
-            setActivePreset(null);
           },
           locale: import_locale.fr,
           disabled: dayPickerDisabled,
@@ -8497,7 +8508,6 @@ var DatePicker = ({
           selected: value != null ? value : void 0,
           onSelect: (date) => {
             onChange == null ? void 0 : onChange(date != null ? date : null);
-            setActivePreset(null);
             setOpen(false);
           },
           locale: import_locale.fr,
@@ -8537,10 +8547,12 @@ var DatePicker = ({
           {
             type: "button",
             "aria-label": "Ouvrir le calendrier",
+            "aria-pressed": hasValue && !activePreset,
             disabled,
             className: cn(
-              "flex h-9 w-9 items-center justify-center rounded-[6px] border border-grey-300 bg-white text-neutral-800 transition-colors",
-              "hover:border-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
+              "flex h-9 w-9 items-center justify-center rounded-[6px] border transition-colors",
+              hasValue && !activePreset ? "border-blue-700 bg-blue-50 text-blue-700" : "border-grey-300 bg-white text-neutral-800 hover:border-blue-700",
+              "disabled:cursor-not-allowed disabled:opacity-60"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(FaIcon, { name: "calendar", size: 16 })
           }
@@ -8552,6 +8564,7 @@ var DatePicker = ({
             {
               type: "button",
               "aria-label": preset.label,
+              "aria-pressed": active,
               disabled,
               onClick: () => applyPreset(preset),
               className: cn(

package/dist/ui/index.mjs

@@ -8194,7 +8194,7 @@ var Stepper = ({
 );
 
 // src/ui/components/ui/DatePicker.tsx
-import { useState as useState18 } from "react";
+import { useState as useState18, useMemo as useMemo3 } from "react";
 import { DayPicker } from "react-day-picker";
 import { fr } from "react-day-picker/locale";
 import "react-day-picker/style.css";
@@ -8213,6 +8213,7 @@ import { fr as dateFnsFr } from "date-fns/locale";
 import * as RadixPopover6 from "@radix-ui/react-popover";
 import { jsx as jsx96, jsxs as jsxs58 } from "react/jsx-runtime";
 var formatMonthCaption = (month) => format(month, "MMM yyyy", { locale: dateFnsFr });
+var isSameCalendarDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 var RANGE_PRESETS = [
   {
     label: "Mois pr\xE9c\xE9dent",
@@ -8274,8 +8275,21 @@ var DatePicker = ({
 }) => {
   const isRange = mode === "range";
   const [open, setOpen] = useState18(false);
-  const [activePreset, setActivePreset] = useState18(null);
   const resolvedPresets = presets != null ? presets : isRange ? RANGE_PRESETS : SINGLE_PRESETS;
+  const activePreset = useMemo3(() => {
+    var _a;
+    const match = resolvedPresets.find((preset) => {
+      const result = preset.getValue();
+      if (isRange) {
+        if (!startDate || !endDate) return false;
+        const [start, end] = result;
+        return isSameCalendarDay(start, startDate) && isSameCalendarDay(end, endDate);
+      }
+      if (!value) return false;
+      return isSameCalendarDay(result, value);
+    });
+    return (_a = match == null ? void 0 : match.label) != null ? _a : null;
+  }, [isRange, resolvedPresets, startDate, endDate, value]);
   const displayText = isRange ? startDate && endDate ? `${format(startDate, "dd/MM/yyyy")} \u2014 ${format(endDate, "dd/MM/yyyy")}` : placeholder != null ? placeholder : "S\xE9lectionner une p\xE9riode" : value ? format(value, "dd/MM/yyyy") : placeholder != null ? placeholder : "S\xE9lectionner une date";
   const hasValue = isRange ? Boolean(startDate && endDate) : Boolean(value);
   const dayPickerDisabled = [
@@ -8290,13 +8304,11 @@ var DatePicker = ({
     } else {
       onChange == null ? void 0 : onChange(result);
     }
-    setActivePreset(preset.label);
     setOpen(false);
   };
   const handleReset = () => {
     if (isRange) onRangeChange == null ? void 0 : onRangeChange(null, null);
     else onChange == null ? void 0 : onChange(null);
-    setActivePreset(null);
   };
   const calendar = /* @__PURE__ */ jsx96(RadixPopover6.Portal, { children: /* @__PURE__ */ jsx96(
     RadixPopover6.Content,
@@ -8319,7 +8331,6 @@ var DatePicker = ({
           onSelect: (range) => {
             var _a, _b;
             onRangeChange == null ? void 0 : onRangeChange((_a = range == null ? void 0 : range.from) != null ? _a : null, (_b = range == null ? void 0 : range.to) != null ? _b : null);
-            setActivePreset(null);
           },
           locale: fr,
           disabled: dayPickerDisabled,
@@ -8334,7 +8345,6 @@ var DatePicker = ({
           selected: value != null ? value : void 0,
           onSelect: (date) => {
             onChange == null ? void 0 : onChange(date != null ? date : null);
-            setActivePreset(null);
             setOpen(false);
           },
           locale: fr,
@@ -8374,10 +8384,12 @@ var DatePicker = ({
           {
             type: "button",
             "aria-label": "Ouvrir le calendrier",
+            "aria-pressed": hasValue && !activePreset,
             disabled,
             className: cn(
-              "flex h-9 w-9 items-center justify-center rounded-[6px] border border-grey-300 bg-white text-neutral-800 transition-colors",
-              "hover:border-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
+              "flex h-9 w-9 items-center justify-center rounded-[6px] border transition-colors",
+              hasValue && !activePreset ? "border-blue-700 bg-blue-50 text-blue-700" : "border-grey-300 bg-white text-neutral-800 hover:border-blue-700",
+              "disabled:cursor-not-allowed disabled:opacity-60"
             ),
             children: /* @__PURE__ */ jsx96(FaIcon, { name: "calendar", size: 16 })
           }
@@ -8389,6 +8401,7 @@ var DatePicker = ({
             {
               type: "button",
               "aria-label": preset.label,
+              "aria-pressed": active,
               disabled,
               onClick: () => applyPreset(preset),
               className: cn(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.420",
+  "version": "1.0.421",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",