@ceed/cds 1.28.1 → 1.29.0

package/dist/index.cjs

@@ -2559,10 +2559,47 @@ var CalendarSheet = (0, import_joy28.styled)(Sheet_default, {
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({
-  width: "264px",
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
+var CalendarSheetContent = (0, import_joy28.styled)("div", {
+  name: "DatePicker",
+  slot: "sheetContent"
+})({
+  display: "flex",
+  flexDirection: "row"
+});
+var CalendarSection = (0, import_joy28.styled)("div", {
+  name: "DatePicker",
+  slot: "calendarSection"
+})({
+  width: "264px"
+});
+var PresetPanel = (0, import_joy28.styled)("div", {
+  name: "DatePicker",
+  slot: "presetPanel"
+})(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  borderLeft: `1px solid ${theme.vars.palette.divider}`,
+  padding: theme.spacing(1),
+  minWidth: "120px",
+  overflowY: "auto"
+}));
+var PresetItem = (0, import_joy28.styled)(Button_default, {
+  name: "DatePicker",
+  slot: "presetItem",
+  shouldForwardProp: (prop) => prop !== "active"
+})(({ active }) => [
+  {
+    width: "100%",
+    justifyContent: "flex-start",
+    whiteSpace: "nowrap"
+  },
+  active && {
+    fontWeight: "bold"
+  }
+]);
 var DatePickerRoot = (0, import_joy28.styled)("div", {
   name: "DatePicker",
   slot: "root",
@@ -2680,6 +2717,7 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
     hideClearButton,
     readOnly,
     shouldDisableDate,
+    presets,
     ...innerProps
   } = props;
   const innerRef = (0, import_react20.useRef)(null);
@@ -2761,6 +2799,35 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
     },
     [inputReadOnly, buttonRef]
   );
+  const handlePresetClick = (0, import_react20.useCallback)(
+    (presetValue) => {
+      handleChange({
+        target: {
+          name: props.name,
+          value: presetValue
+        }
+      });
+      setAnchorEl(null);
+    },
+    [handleChange, props.name]
+  );
+  const isPresetDisabled = (0, import_react20.useCallback)(
+    (presetValue) => {
+      try {
+        const date = parseDate(presetValue, format);
+        if (Number.isNaN(date.getTime())) return true;
+        if (minDate && date < new Date(minDate)) return true;
+        if (maxDate && date > new Date(maxDate)) return true;
+        if (disableFuture && date > new Date((/* @__PURE__ */ new Date()).toDateString())) return true;
+        if (disablePast && date < new Date((/* @__PURE__ */ new Date()).toDateString())) return true;
+        if (shouldDisableDate?.(presetValue)) return true;
+        return false;
+      } catch {
+        return true;
+      }
+    },
+    [format, minDate, maxDate, disableFuture, disablePast, shouldDisableDate]
+  );
   return /* @__PURE__ */ import_react20.default.createElement(DatePickerRoot, null, /* @__PURE__ */ import_react20.default.createElement(import_base3.FocusTrap, { open: true }, /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
     Input_default,
     {
@@ -2826,7 +2893,7 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ import_react20.default.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react20.default.createElement(
+    /* @__PURE__ */ import_react20.default.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react20.default.createElement(CalendarSheetContent, null, /* @__PURE__ */ import_react20.default.createElement(CalendarSection, null, /* @__PURE__ */ import_react20.default.createElement(
       Calendar_default,
       {
         value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
@@ -2870,7 +2937,22 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
         },
         "Clear"
       )
-    ))
+    )), presets && presets.length > 0 && /* @__PURE__ */ import_react20.default.createElement(PresetPanel, null, presets.map((preset) => {
+      const disabled2 = isPresetDisabled(preset.value);
+      return /* @__PURE__ */ import_react20.default.createElement(
+        PresetItem,
+        {
+          key: preset.label,
+          size: "sm",
+          variant: value === preset.value ? "soft" : "plain",
+          color: value === preset.value ? "primary" : "neutral",
+          active: value === preset.value,
+          disabled: disabled2,
+          onClick: () => handlePresetClick(preset.value)
+        },
+        preset.label
+      );
+    }))))
   )))));
 });
 
@@ -4701,10 +4783,47 @@ var CalendarSheet2 = (0, import_joy36.styled)(Sheet_default, {
   overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip,
-  width: "264px",
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
+var CalendarSheetContent2 = (0, import_joy36.styled)("div", {
+  name: "DateRangePicker",
+  slot: "sheetContent"
+})({
+  display: "flex",
+  flexDirection: "row"
+});
+var CalendarSection2 = (0, import_joy36.styled)("div", {
+  name: "DateRangePicker",
+  slot: "calendarSection"
+})({
+  width: "264px"
+});
+var PresetPanel2 = (0, import_joy36.styled)("div", {
+  name: "DateRangePicker",
+  slot: "presetPanel"
+})(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  borderLeft: `1px solid ${theme.vars.palette.divider}`,
+  padding: theme.spacing(1),
+  minWidth: "120px",
+  overflowY: "auto"
+}));
+var PresetItem2 = (0, import_joy36.styled)(Button_default, {
+  name: "DateRangePicker",
+  slot: "presetItem",
+  shouldForwardProp: (prop) => prop !== "active"
+})(({ active }) => [
+  {
+    width: "100%",
+    justifyContent: "flex-start",
+    whiteSpace: "nowrap"
+  },
+  active && {
+    fontWeight: "bold"
+  }
+]);
 var DateRangePickerRoot = (0, import_joy36.styled)("div", {
   name: "DateRangePicker",
   slot: "root",
@@ -4833,6 +4952,7 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
     inputReadOnly,
     hideClearButton,
     readOnly,
+    presets,
     ...innerProps
   } = props;
   const innerRef = (0, import_react29.useRef)(null);
@@ -4932,6 +5052,38 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
     },
     [inputReadOnly, buttonRef]
   );
+  const handlePresetClick = (0, import_react29.useCallback)(
+    (presetValue) => {
+      if (props.value !== void 0) {
+        onChange?.({ target: { name: props.name, value: presetValue } });
+      } else {
+        const dates = parseDates(presetValue, format);
+        setDisplayValue(formatValueString2(dates, displayFormat));
+        setValue(presetValue);
+      }
+      setAnchorEl(null);
+    },
+    [props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
+  );
+  const isPresetDisabled = (0, import_react29.useCallback)(
+    (presetValue) => {
+      try {
+        const dates = parseDates(presetValue, format);
+        if (dates.some((d) => Number.isNaN(d.getTime()))) return true;
+        const today = new Date((/* @__PURE__ */ new Date()).toDateString());
+        for (const date of dates) {
+          if (minDate && date < new Date(minDate)) return true;
+          if (maxDate && date > new Date(maxDate)) return true;
+          if (disableFuture && date > today) return true;
+          if (disablePast && date < today) return true;
+        }
+        return false;
+      } catch {
+        return true;
+      }
+    },
+    [format, minDate, maxDate, disableFuture, disablePast]
+  );
   return /* @__PURE__ */ import_react29.default.createElement(DateRangePickerRoot, null, /* @__PURE__ */ import_react29.default.createElement(import_base4.FocusTrap, { open: true }, /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(
     Input_default,
     {
@@ -4997,7 +5149,7 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ import_react29.default.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react29.default.createElement(
+    /* @__PURE__ */ import_react29.default.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react29.default.createElement(CalendarSheetContent2, null, /* @__PURE__ */ import_react29.default.createElement(CalendarSection2, null, /* @__PURE__ */ import_react29.default.createElement(
       Calendar_default,
       {
         rangeSelection: true,
@@ -5029,7 +5181,22 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
         },
         "Clear"
       )
-    ))
+    )), presets && presets.length > 0 && /* @__PURE__ */ import_react29.default.createElement(PresetPanel2, null, presets.map((preset) => {
+      const disabled2 = isPresetDisabled(preset.value);
+      return /* @__PURE__ */ import_react29.default.createElement(
+        PresetItem2,
+        {
+          key: preset.label,
+          size: "sm",
+          variant: value === preset.value ? "soft" : "plain",
+          color: value === preset.value ? "primary" : "neutral",
+          active: value === preset.value,
+          disabled: disabled2,
+          onClick: () => handlePresetClick(preset.value)
+        },
+        preset.label
+      );
+    }))))
   )))));
 });
 DateRangePicker.displayName = "DateRangePicker";

package/dist/index.js

@@ -2442,10 +2442,47 @@ var CalendarSheet = styled10(Sheet_default, {
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({
-  width: "264px",
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
+var CalendarSheetContent = styled10("div", {
+  name: "DatePicker",
+  slot: "sheetContent"
+})({
+  display: "flex",
+  flexDirection: "row"
+});
+var CalendarSection = styled10("div", {
+  name: "DatePicker",
+  slot: "calendarSection"
+})({
+  width: "264px"
+});
+var PresetPanel = styled10("div", {
+  name: "DatePicker",
+  slot: "presetPanel"
+})(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  borderLeft: `1px solid ${theme.vars.palette.divider}`,
+  padding: theme.spacing(1),
+  minWidth: "120px",
+  overflowY: "auto"
+}));
+var PresetItem = styled10(Button_default, {
+  name: "DatePicker",
+  slot: "presetItem",
+  shouldForwardProp: (prop) => prop !== "active"
+})(({ active }) => [
+  {
+    width: "100%",
+    justifyContent: "flex-start",
+    whiteSpace: "nowrap"
+  },
+  active && {
+    fontWeight: "bold"
+  }
+]);
 var DatePickerRoot = styled10("div", {
   name: "DatePicker",
   slot: "root",
@@ -2563,6 +2600,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     hideClearButton,
     readOnly,
     shouldDisableDate,
+    presets,
     ...innerProps
   } = props;
   const innerRef = useRef4(null);
@@ -2644,6 +2682,35 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [inputReadOnly, buttonRef]
   );
+  const handlePresetClick = useCallback8(
+    (presetValue) => {
+      handleChange({
+        target: {
+          name: props.name,
+          value: presetValue
+        }
+      });
+      setAnchorEl(null);
+    },
+    [handleChange, props.name]
+  );
+  const isPresetDisabled = useCallback8(
+    (presetValue) => {
+      try {
+        const date = parseDate(presetValue, format);
+        if (Number.isNaN(date.getTime())) return true;
+        if (minDate && date < new Date(minDate)) return true;
+        if (maxDate && date > new Date(maxDate)) return true;
+        if (disableFuture && date > new Date((/* @__PURE__ */ new Date()).toDateString())) return true;
+        if (disablePast && date < new Date((/* @__PURE__ */ new Date()).toDateString())) return true;
+        if (shouldDisableDate?.(presetValue)) return true;
+        return false;
+      } catch {
+        return true;
+      }
+    },
+    [format, minDate, maxDate, disableFuture, disablePast, shouldDisableDate]
+  );
   return /* @__PURE__ */ React18.createElement(DatePickerRoot, null, /* @__PURE__ */ React18.createElement(FocusTrap, { open: true }, /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
     Input_default,
     {
@@ -2709,7 +2776,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ React18.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React18.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React18.createElement(CalendarSheetContent, null, /* @__PURE__ */ React18.createElement(CalendarSection, null, /* @__PURE__ */ React18.createElement(
       Calendar_default,
       {
         value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
@@ -2753,7 +2820,22 @@ var DatePicker = forwardRef6((inProps, ref) => {
         },
         "Clear"
       )
-    ))
+    )), presets && presets.length > 0 && /* @__PURE__ */ React18.createElement(PresetPanel, null, presets.map((preset) => {
+      const disabled2 = isPresetDisabled(preset.value);
+      return /* @__PURE__ */ React18.createElement(
+        PresetItem,
+        {
+          key: preset.label,
+          size: "sm",
+          variant: value === preset.value ? "soft" : "plain",
+          color: value === preset.value ? "primary" : "neutral",
+          active: value === preset.value,
+          disabled: disabled2,
+          onClick: () => handlePresetClick(preset.value)
+        },
+        preset.label
+      );
+    }))))
   )))));
 });
 
@@ -4584,10 +4666,47 @@ var CalendarSheet2 = styled14(Sheet_default, {
   overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip,
-  width: "264px",
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
+var CalendarSheetContent2 = styled14("div", {
+  name: "DateRangePicker",
+  slot: "sheetContent"
+})({
+  display: "flex",
+  flexDirection: "row"
+});
+var CalendarSection2 = styled14("div", {
+  name: "DateRangePicker",
+  slot: "calendarSection"
+})({
+  width: "264px"
+});
+var PresetPanel2 = styled14("div", {
+  name: "DateRangePicker",
+  slot: "presetPanel"
+})(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  borderLeft: `1px solid ${theme.vars.palette.divider}`,
+  padding: theme.spacing(1),
+  minWidth: "120px",
+  overflowY: "auto"
+}));
+var PresetItem2 = styled14(Button_default, {
+  name: "DateRangePicker",
+  slot: "presetItem",
+  shouldForwardProp: (prop) => prop !== "active"
+})(({ active }) => [
+  {
+    width: "100%",
+    justifyContent: "flex-start",
+    whiteSpace: "nowrap"
+  },
+  active && {
+    fontWeight: "bold"
+  }
+]);
 var DateRangePickerRoot = styled14("div", {
   name: "DateRangePicker",
   slot: "root",
@@ -4716,6 +4835,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     inputReadOnly,
     hideClearButton,
     readOnly,
+    presets,
     ...innerProps
   } = props;
   const innerRef = useRef8(null);
@@ -4815,6 +4935,38 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [inputReadOnly, buttonRef]
   );
+  const handlePresetClick = useCallback13(
+    (presetValue) => {
+      if (props.value !== void 0) {
+        onChange?.({ target: { name: props.name, value: presetValue } });
+      } else {
+        const dates = parseDates(presetValue, format);
+        setDisplayValue(formatValueString2(dates, displayFormat));
+        setValue(presetValue);
+      }
+      setAnchorEl(null);
+    },
+    [props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
+  );
+  const isPresetDisabled = useCallback13(
+    (presetValue) => {
+      try {
+        const dates = parseDates(presetValue, format);
+        if (dates.some((d) => Number.isNaN(d.getTime()))) return true;
+        const today = new Date((/* @__PURE__ */ new Date()).toDateString());
+        for (const date of dates) {
+          if (minDate && date < new Date(minDate)) return true;
+          if (maxDate && date > new Date(maxDate)) return true;
+          if (disableFuture && date > today) return true;
+          if (disablePast && date < today) return true;
+        }
+        return false;
+      } catch {
+        return true;
+      }
+    },
+    [format, minDate, maxDate, disableFuture, disablePast]
+  );
   return /* @__PURE__ */ React26.createElement(DateRangePickerRoot, null, /* @__PURE__ */ React26.createElement(FocusTrap2, { open: true }, /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(
     Input_default,
     {
@@ -4880,7 +5032,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ React26.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React26.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React26.createElement(CalendarSheetContent2, null, /* @__PURE__ */ React26.createElement(CalendarSection2, null, /* @__PURE__ */ React26.createElement(
       Calendar_default,
       {
         rangeSelection: true,
@@ -4912,7 +5064,22 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
         },
         "Clear"
       )
-    ))
+    )), presets && presets.length > 0 && /* @__PURE__ */ React26.createElement(PresetPanel2, null, presets.map((preset) => {
+      const disabled2 = isPresetDisabled(preset.value);
+      return /* @__PURE__ */ React26.createElement(
+        PresetItem2,
+        {
+          key: preset.label,
+          size: "sm",
+          variant: value === preset.value ? "soft" : "plain",
+          color: value === preset.value ? "primary" : "neutral",
+          active: value === preset.value,
+          disabled: disabled2,
+          onClick: () => handlePresetClick(preset.value)
+        },
+        preset.label
+      );
+    }))))
   )))));
 });
 DateRangePicker.displayName = "DateRangePicker";