@truedat/df 8.13.5 → 8.13.7

package/src/components/widgets/FieldByWidget.js

@@ -1,4 +1,9 @@
 import PropTypes from "prop-types";
+import { dateValueUnchanged } from "../../templates/utils/dateValueUnchanged";
+import {
+  publishedBounds,
+  resolveRestrictions,
+} from "../../templates/utils/dateRestrictions";
 import DateTimeField from "./DateTimeField";
 import CheckboxField from "./CheckboxField";
 import ColorPickerField from "./ColorPickerField";
@@ -16,7 +21,16 @@ import TextField from "./TextField";
 import NumberField from "./NumberField";
 import DateField from "./DateField";
 
-const FieldByWidget = ({ scope, widget, onChange, field }) => {
+const boundsFor = (field, originalField) => {
+  const unchanged = dateValueUnchanged(field.value, originalField);
+  const bounds = unchanged
+    ? {}
+    : publishedBounds(field?.restrictions) ||
+      resolveRestrictions(field?.restrictions, field?.type);
+  return { min: bounds.min, max: bounds.max };
+};
+
+const FieldByWidget = ({ scope, widget, onChange, field, originalField }) => {
   switch (widget) {
     case "identifier":
       return <IdentifierField field={field} />;
@@ -37,17 +51,32 @@ const FieldByWidget = ({ scope, widget, onChange, field }) => {
     case "table":
       return <TableField field={field} onChange={onChange} />;
     case "dynamic_table":
-      return <DynamicTableField field={field} onChange={onChange} />;
+      return (
+        <DynamicTableField
+          field={field}
+          originalField={originalField}
+          onChange={onChange}
+          scope={scope}
+        />
+      );
     case "password":
       return <PasswordField field={field} onChange={onChange} />;
     case "image":
       return <ImageField field={field} onChange={onChange} />;
     case "number":
       return <NumberField field={field} onChange={onChange} />;
-    case "date":
-      return <DateField field={field} onChange={onChange} />;
-    case "datetime":
-      return <DateTimeField field={field} onChange={onChange} />;
+    case "date": {
+      const { min, max } = boundsFor(field, originalField);
+      return (
+        <DateField field={field} onChange={onChange} min={min} max={max} />
+      );
+    }
+    case "datetime": {
+      const { min, max } = boundsFor(field, originalField);
+      return (
+        <DateTimeField field={field} onChange={onChange} min={min} max={max} />
+      );
+    }
     default:
       return <StringField field={field} onChange={onChange} />;
   }
@@ -56,6 +85,7 @@ const FieldByWidget = ({ scope, widget, onChange, field }) => {
 FieldByWidget.propTypes = {
   onChange: PropTypes.func.isRequired,
   field: PropTypes.object.isRequired,
+  originalField: PropTypes.object,
   scope: PropTypes.string,
   widget: PropTypes.string,
 };

package/src/components/widgets/__tests__/dateBoundsByWidget.spec.js

@@ -0,0 +1,133 @@
+import { render, screen } from "@testing-library/react";
+import { IntlProvider } from "react-intl";
+import FieldByWidget from "../FieldByWidget";
+
+const renderWith = (ui) =>
+  render(<IntlProvider locale="en">{ui}</IntlProvider>);
+
+const fieldWith = (restrictions, extra = {}) => ({
+  name: "fecha",
+  value: "2026-06-15",
+  type: "date",
+  ...extra,
+  restrictions,
+});
+
+describe("FieldByWidget passes the published bounds to date widgets", () => {
+  describe("a date field", () => {
+    it("reads min and max out of resolved", () => {
+      renderWith(
+        <FieldByWidget
+          widget="date"
+          onChange={() => {}}
+          field={fieldWith({
+            between: {
+              mode: "static",
+              start: "2026-01-01",
+              end: "2026-12-31",
+            },
+            resolved: { min: "2026-01-01", max: "2026-12-31" },
+          })}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText("Date");
+      expect(input).toHaveAttribute("min", "2026-01-01");
+      expect(input).toHaveAttribute("max", "2026-12-31");
+    });
+
+    it("resolves declared bounds when the serving endpoint did not publish them", () => {
+      renderWith(
+        <FieldByWidget
+          widget="date"
+          onChange={() => {}}
+          field={fieldWith({
+            between: {
+              mode: "static",
+              start: "2026-01-01",
+              end: "2026-12-31",
+            },
+          })}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText("Date");
+      expect(input).toHaveAttribute("min", "2026-01-01");
+      expect(input).toHaveAttribute("max", "2026-12-31");
+    });
+
+    it("leaves the picker unrestricted when there are no restrictions at all", () => {
+      renderWith(
+        <FieldByWidget
+          widget="date"
+          onChange={() => {}}
+          field={fieldWith(undefined)}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText("Date");
+      expect(input).not.toHaveAttribute("min");
+      expect(input).not.toHaveAttribute("max");
+    });
+
+    it("an open bound stays open", () => {
+      renderWith(
+        <FieldByWidget
+          widget="date"
+          onChange={() => {}}
+          field={fieldWith({
+            max_date: { mode: "static", value: "2026-12-31" },
+            resolved: { min: null, max: "2026-12-31" },
+          })}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText("Date");
+      expect(input).toHaveAttribute("max", "2026-12-31");
+      expect(input).not.toHaveAttribute("min");
+    });
+  });
+
+  describe("a datetime field", () => {
+    it("passes the published minute-precision bounds", () => {
+      renderWith(
+        <FieldByWidget
+          widget="datetime"
+          onChange={() => {}}
+          field={fieldWith(
+            {
+              max_date: { mode: "static", value: "2026-06-30T10:00:00" },
+              resolved: { min: null, max: "2026-06-30T10:00" },
+            },
+            { name: "momento", type: "datetime", value: "2026-06-15T10:30" },
+          )}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText("Date Time");
+      expect(input).toHaveAttribute("max", "2026-06-30T10:00");
+      expect(input).not.toHaveAttribute("min");
+    });
+  });
+
+  describe("fields that are not dates", () => {
+    it("a string field with restrictions is rendered unchanged", () => {
+      renderWith(
+        <FieldByWidget
+          widget="string"
+          onChange={() => {}}
+          field={{
+            name: "s",
+            value: "hola",
+            type: "string",
+            restrictions: { resolved: { min: "a", max: "b" } },
+          }}
+        />,
+      );
+
+      const input = screen.getByDisplayValue("hola");
+      expect(input).not.toHaveAttribute("min");
+      expect(input).not.toHaveAttribute("max");
+    });
+  });
+});

package/src/components/widgets/__tests__/dateBoundsEndToEnd.spec.js

@@ -0,0 +1,83 @@
+import { render, screen } from "@testing-library/react";
+import { IntlProvider } from "react-intl";
+import DynamicField from "../DynamicField";
+
+const templateField = (extra = {}) => ({
+  name: "fecha",
+  label: "Fecha",
+  type: "date",
+  widget: "date",
+  cardinality: "?",
+  values: null,
+  restrictions: {
+    between: { mode: "static", start: "2026-01-01", end: "2026-12-31" },
+    resolved: { min: "2026-01-01", max: "2026-12-31" },
+  },
+  default: { value: "", origin: "default" },
+  ...extra,
+});
+
+const renderField = (field) =>
+  render(
+    <IntlProvider locale="en">
+      <DynamicField field={field} onChange={() => {}} />
+    </IntlProvider>,
+  );
+
+describe("the published bounds reach the calendar", () => {
+  it("a date field is restricted by the resolved block", () => {
+    renderField({
+      ...templateField(),
+      value: { value: "2026-06-15", origin: "user" },
+    });
+
+    const input = screen.getByPlaceholderText("Date");
+    expect(input).toHaveAttribute("min", "2026-01-01");
+    expect(input).toHaveAttribute("max", "2026-12-31");
+  });
+
+  it("a datetime field is restricted by the resolved block", () => {
+    renderField({
+      ...templateField(
+        {
+          name: "momento",
+          type: "datetime",
+          widget: "datetime",
+          restrictions: {
+            max_date: { mode: "static", value: "2026-06-30T10:00:00" },
+            resolved: { min: null, max: "2026-06-30T10:00" },
+          },
+        },
+        {},
+      ),
+      value: { value: "2026-06-15T10:30", origin: "user" },
+    });
+
+    const input = screen.getByPlaceholderText("Date Time");
+    expect(input).toHaveAttribute("max", "2026-06-30T10:00");
+    expect(input).not.toHaveAttribute("min");
+  });
+
+  it("a template predating the feature is left unrestricted", () => {
+    renderField({
+      ...templateField({ restrictions: undefined }),
+      value: { value: "1999-01-01", origin: "user" },
+    });
+
+    const input = screen.getByPlaceholderText("Date");
+    expect(input).not.toHaveAttribute("min");
+    expect(input).not.toHaveAttribute("max");
+    expect(input).toHaveValue("1999-01-01");
+  });
+
+  it("a stored value already outside the range is still shown, not silently dropped", () => {
+    renderField({
+      ...templateField(),
+      value: { value: "1999-01-01", origin: "user" },
+    });
+
+    const input = screen.getByPlaceholderText("Date");
+    expect(input).toHaveValue("1999-01-01");
+    expect(input).toHaveAttribute("max", "2026-12-31");
+  });
+});

package/src/components/widgets/__tests__/datePickerBoundaries.spec.js

@@ -0,0 +1,124 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { IntlProvider } from "react-intl";
+import { DateField } from "../DateField";
+import { DateTimeField } from "../DateTimeField";
+
+const renderWith = (ui) =>
+  render(<IntlProvider locale="en">{ui}</IntlProvider>);
+
+describe("date widgets expose the published bounds to the native input", () => {
+  describe("DateField", () => {
+    it("passes min and max through", () => {
+      renderWith(
+        <DateField
+          field={{ name: "fecha", value: "2026-06-15" }}
+          min="2026-01-01"
+          max="2026-12-31"
+          onChange={() => {}}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText("Date");
+      expect(input).toHaveAttribute("type", "date");
+      expect(input).toHaveAttribute("min", "2026-01-01");
+      expect(input).toHaveAttribute("max", "2026-12-31");
+    });
+
+    it("applies a one-sided restriction", () => {
+      renderWith(
+        <DateField
+          field={{ name: "fecha", value: "" }}
+          max="2026-12-31"
+          onChange={() => {}}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText("Date");
+      expect(input).toHaveAttribute("max", "2026-12-31");
+      expect(input).not.toHaveAttribute("min");
+    });
+
+    it("renders no bounds attribute when there is no restriction", () => {
+      renderWith(
+        <DateField field={{ name: "fecha", value: "" }} onChange={() => {}} />,
+      );
+
+      const input = screen.getByPlaceholderText("Date");
+      expect(input).not.toHaveAttribute("min");
+      expect(input).not.toHaveAttribute("max");
+    });
+
+    it("still reports what the user typed", () => {
+      const onChange = jest.fn();
+      renderWith(
+        <DateField
+          field={{ name: "fecha", value: "" }}
+          max="2026-12-31"
+          onChange={onChange}
+        />,
+      );
+
+      fireEvent.change(screen.getByPlaceholderText("Date"), {
+        target: { value: "2026-03-01" },
+      });
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ name: "fecha", value: "2026-03-01" }),
+      );
+    });
+
+    it("lets the user clear the field on purpose", () => {
+      const onChange = jest.fn();
+      renderWith(
+        <DateField
+          field={{ name: "fecha", value: "2026-03-01" }}
+          max="2026-12-31"
+          onChange={onChange}
+        />,
+      );
+
+      fireEvent.change(screen.getByPlaceholderText("Date"), {
+        target: { value: "" },
+      });
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ name: "fecha", value: "" }),
+      );
+    });
+  });
+
+  describe("DateTimeField", () => {
+    it("passes the minute-precision bounds through", () => {
+      renderWith(
+        <DateTimeField
+          field={{ name: "momento", value: "2026-06-15T10:30" }}
+          min="2026-06-01T00:00"
+          max="2026-06-30T23:59"
+          onChange={() => {}}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText("Date Time");
+      expect(input).toHaveAttribute("type", "datetime-local");
+      expect(input).toHaveAttribute("min", "2026-06-01T00:00");
+      expect(input).toHaveAttribute("max", "2026-06-30T23:59");
+    });
+
+    it("a date-only bound reaches the input as minute precision, not dropped", () => {
+      renderWith(
+        <DateTimeField
+          field={{ name: "momento", value: "" }}
+          max="2026-06-30"
+          onChange={() => {}}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText("Date Time");
+      expect(input.getAttribute("max")).toMatch(
+        /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/,
+      );
+    });
+  });
+});

package/src/components/widgets/__tests__/dateValueValidation.spec.js

@@ -0,0 +1,215 @@
+import { screen, fireEvent } from "@testing-library/react";
+import { renderWithIntl as render } from "@truedat/test/renderWithIntl";
+import DynamicField from "../DynamicField";
+
+const mockFormatMessage = jest.fn(({ id }) => id);
+
+jest.mock("react-intl", () => ({
+  ...jest.requireActual("react-intl"),
+  useIntl: () => ({ formatMessage: mockFormatMessage }),
+}));
+
+beforeEach(() => mockFormatMessage.mockClear());
+
+const field = (restrictions, value) => ({
+  name: "fecha",
+  label: "Fecha",
+  type: "date",
+  widget: "date",
+  cardinality: "?",
+  restrictions,
+  value: { value, origin: "user" },
+});
+
+const mount = (f) => render(<DynamicField field={f} onChange={jest.fn()} />);
+
+describe("a date field with a published restriction", () => {
+  const range = {
+    between: { mode: "static", start: "2026-01-01", end: "2026-12-31" },
+    resolved: { min: "2026-01-01", max: "2026-12-31" },
+  };
+
+  it("marks the field as wrong when a typed date is past the bound", () => {
+    const { container } = mount(field(range, "2027-01-01"));
+
+    expect(container.querySelector(".field.error")).not.toBeNull();
+  });
+
+  it("says which bound was broken", () => {
+    mount(field(range, "2027-01-01"));
+
+    expect(
+      screen.getByText("template.field.values.default_before_max"),
+    ).toBeInTheDocument();
+  });
+
+  it("names the minimum when the value is too early", () => {
+    mount(field(range, "2025-12-31"));
+
+    expect(
+      screen.getByText("template.field.values.default_after_min"),
+    ).toBeInTheDocument();
+  });
+
+  it.each([
+    ["2027-01-01", "default_before_max", "2026-12-31"],
+    ["2025-12-31", "default_after_min", "2026-01-01"],
+  ])(
+    "passes the breached limit for %s to the formatter",
+    (value, key, limit) => {
+      mount(field(range, value));
+
+      expect(mockFormatMessage).toHaveBeenCalledWith(
+        { id: `template.field.values.${key}` },
+        { limit },
+      );
+    },
+  );
+
+  it("does not mark partial keyboard input", () => {
+    const { container } = mount(field(range, "2026-0"));
+
+    expect(container.querySelector(".field.error")).toBeNull();
+  });
+
+  it.each([
+    ["2026-02-30", "template.field.restrictions.validation.invalid_date"],
+    ["2027-01-01T00:00:00Z", "template.field.values.default_before_max"],
+  ])("checks a complete imported value (%s)", (value, messageId) => {
+    const { container } = mount(field(range, value));
+
+    expect(container.querySelector(".field.error")).not.toBeNull();
+    expect(screen.getByText(messageId)).toBeInTheDocument();
+  });
+
+  it("does not mark a date inside the range", () => {
+    const { container } = mount(field(range, "2026-06-15"));
+
+    expect(container.querySelector(".field.error")).toBeNull();
+  });
+
+  it("accepts the bound's own day", () => {
+    const { container } = mount(field(range, "2026-12-31"));
+
+    expect(container.querySelector(".field.error")).toBeNull();
+  });
+
+  it("never marks an empty value: these records are fillable in part", () => {
+    const { container } = mount(field(range, ""));
+
+    expect(container.querySelector(".field.error")).toBeNull();
+  });
+
+  it("still bounds the picker", () => {
+    mount(field(range, "2026-06-15"));
+
+    const input = screen.getByPlaceholderText("Date");
+    expect(input).toHaveAttribute("min", "2026-01-01");
+    expect(input).toHaveAttribute("max", "2026-12-31");
+  });
+
+  it("does not swallow what was typed", () => {
+    const onChange = jest.fn();
+    render(
+      <DynamicField field={field(range, "2026-06-15")} onChange={onChange} />,
+    );
+
+    fireEvent.change(screen.getByPlaceholderText("Date"), {
+      target: { value: "2027-01-01" },
+    });
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ value: "2027-01-01" }),
+    );
+  });
+});
+
+describe("a datetime field", () => {
+  const dt = {
+    max_date: { mode: "static", value: "2026-06-30T10:00" },
+    resolved: { min: null, max: "2026-06-30T10:00" },
+  };
+
+  it("checks at minute precision", () => {
+    const { container } = mount({
+      ...field(dt, "2026-06-30T10:01"),
+      type: "datetime",
+      widget: "datetime",
+    });
+
+    expect(container.querySelector(".field.error")).not.toBeNull();
+    expect(screen.getByPlaceholderText("Date Time")).toHaveAttribute(
+      "max",
+      "2026-06-30T10:00",
+    );
+  });
+
+  it("accepts the bound's own minute", () => {
+    const { container } = mount({
+      ...field(dt, "2026-06-30T10:00"),
+      type: "datetime",
+      widget: "datetime",
+    });
+
+    expect(container.querySelector(".field.error")).toBeNull();
+  });
+});
+
+describe("a stored value that no longer fits", () => {
+  it("is shown as wrong rather than hidden", () => {
+    const { container } = mount({
+      ...field(
+        {
+          max_date: { mode: "static", value: "2026-05-31" },
+          resolved: { min: null, max: "2026-05-31" },
+        },
+        "2026-06-15",
+      ),
+    });
+
+    expect(screen.getByPlaceholderText("Date")).toHaveValue("2026-06-15");
+    expect(container.querySelector(".field.error")).not.toBeNull();
+  });
+});
+
+describe("fields with no restriction", () => {
+  it("are never marked", () => {
+    const { container } = mount(field(undefined, "2027-01-01"));
+
+    expect(container.querySelector(".field.error")).toBeNull();
+  });
+
+  it("are never marked when the bounds are open", () => {
+    const { container } = mount(
+      field(
+        {
+          min_date: { mode: "static", value: "2026-01-01" },
+          resolved: { min: "2026-01-01", max: null },
+        },
+        "2020-01-01",
+      ),
+    );
+
+    expect(container.querySelector(".field.error")).not.toBeNull();
+  });
+
+  it("a string field with restrictions is not treated as a date", () => {
+    const { container } = mount({
+      name: "s",
+      label: "S",
+      type: "string",
+      widget: "string",
+      restrictions: { resolved: { min: "a", max: "b" } },
+      value: { value: "hola", origin: "user" },
+    });
+
+    expect(container.querySelector(".field.error")).toBeNull();
+  });
+
+  it("does not show date-format validation for fields with no date bounds", () => {
+    const { container } = mount(field({}, "2026-02-30"));
+
+    expect(container.querySelector(".field.error")).toBeNull();
+  });
+});