@synerise/ds-subtle-form 2.0.4 → 2.1.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@2.0.4...@synerise/ds-subtle-form@2.1.0) (2026-09-10)
+
+### Features
+
+- **global:** move the pickers to date-fns 4 ([f878075](https://github.com/Synerise/synerise-design/commit/f878075940c2cd0d2d8a4a5603eb18d01f837640))
+
 ## [2.0.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@2.0.3...@synerise/ds-subtle-form@2.0.4) (2026-09-08)
 
 **Note:** Version bump only for package @synerise/ds-subtle-form

package/CLAUDE.md

@@ -21,7 +21,7 @@ src/
  DatePicker/DatePicker.tsx — date picker with formatted value display and mask placeholder
  DatePicker/DatePicker.types.ts — SubtleDatePickerProps
  DatePicker/DatePicker.styles.ts — SelectContainer, MaskedDatePlaceholder
- DatePicker/utils.ts — getFormattingString, replaceLettersWithUnderscore
+ DatePicker/utils.ts — replaceLettersWithUnderscore (builds the input mask from a formatted sample)
  Field/Field.tsx — generic field: renders activeElement() / inactiveElement(); uses useOnClickOutside
  __specs__/
  TextArea.spec.tsx — Vitest tests (TextArea only)
@@ -104,7 +104,7 @@ Extends `SubtleFieldProps` + `@synerise/ds-date-picker` props. Additional:
 | `value` | `Date` | Selected date |
 | `onApply` | `(date: Date) => void` | Called when date is confirmed; also deactivates the field |
 | `onClear` | `() => void` | Called on clear; also deactivates |
-| `format` | `string` | Date format string (default: `'dd-MM-yyyy'`, or `'dd-MM-yyyy, HH:mm'` when `showTime`) |
+| `valueFormatOptions` | `DateToFormatOptions` | Display options, passed through to `ds-date-picker`. The inactive view formats with the same options as the picker's own input, so both read identically. (The old `format` token prop is removed — it disagreed with the picker for every locale.) |
 | `placeholder` | `string` | Shown when no value |
 | `activeProp` | `boolean` | External control of active state |
 

package/dist/Elements/DatePicker/DatePicker.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { SubtleDatePickerProps } from './DatePicker.types';
 declare const SubtleDatePicker: {
-    ({ value, suffix, suffixTooltip, format: dateFormat, label, children, labelTooltip, placeholder, onApply, onClear, errorText, error, activeProp, onDropdownVisibleChange, disabled, ...rest }: SubtleDatePickerProps): React.JSX.Element;
+    ({ value, suffix, suffixTooltip, label, children, labelTooltip, placeholder, onApply, onClear, errorText, error, activeProp, onDropdownVisibleChange, disabled, ...rest }: SubtleDatePickerProps): React.JSX.Element;
     displayName: string;
 };
 export default SubtleDatePicker;

package/dist/Elements/DatePicker/DatePicker.js

@@ -1,17 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useMemo, useCallback, useEffect } from "react";
-import { useTheme } from "@synerise/ds-core";
-import { datePickerFormat, DatePicker } from "@synerise/ds-date-picker";
+import { useTheme, useDataFormat, getDefaultDataTimeOptions } from "@synerise/ds-core";
+import { DatePicker } from "@synerise/ds-date-picker";
 import Icon, { CalendarM } from "@synerise/ds-icon";
 import Tooltip from "@synerise/ds-tooltip";
 import { Subtle, SubtleFormField, Inactive, MainContent, Suffix } from "../../SubtleForm.styles.js";
 import { SelectContainer, MaskedDatePlaceholder } from "./DatePicker.styles.js";
-import { getFormattingString, replaceLettersWithUnderscore } from "./utils.js";
+import { replaceLettersWithUnderscore } from "./utils.js";
 const SubtleDatePicker = ({
   value,
   suffix = true,
   suffixTooltip,
-  format: dateFormat,
   label,
   children,
   labelTooltip,
@@ -29,20 +28,23 @@ const SubtleDatePicker = ({
   const [blurred, setBlurred] = useState(false);
   const containerRef = useRef(null);
   const theme = useTheme();
+  const {
+    formatValue
+  } = useDataFormat();
   const hasError = error || !!errorText;
   const {
-    showTime
+    showTime,
+    valueFormatOptions
   } = rest;
-  const dateFormattingString = useMemo(() => getFormattingString(dateFormat, showTime), [dateFormat, showTime]);
-  const formatValue = useCallback((val) => {
-    if (!val) {
-      return "";
-    }
-    return datePickerFormat(val, dateFormattingString);
-  }, [dateFormattingString]);
+  const displayOptions = useMemo(() => ({
+    ...getDefaultDataTimeOptions(showTime),
+    ...valueFormatOptions
+  }), [showTime, valueFormatOptions]);
+  const formatDisplayValue = useCallback((val) => val ? formatValue(val, displayOptions) : "", [formatValue, displayOptions]);
   const getDisplayText = useCallback(() => {
-    return value && !!String(value).trim() ? formatValue(value) : placeholder;
-  }, [value, placeholder, formatValue]);
+    return value && !!String(value).trim() ? formatDisplayValue(value) : placeholder;
+  }, [value, placeholder, formatDisplayValue]);
+  const maskSample = useMemo(() => formatDisplayValue(new Date(2026, 10, 22, 22, 22)), [formatDisplayValue]);
   useEffect(() => {
     if (error) {
       setActive(false);
@@ -63,14 +65,14 @@ const SubtleDatePicker = ({
   }, onClear: !disabled ? () => {
     handleDeactivate();
     onClear && onClear();
-  } : void 0, error, errorText, autoFocus: !hasError, format: dateFormat, onDropdownVisibleChange: (visible) => {
+  } : void 0, error, errorText, autoFocus: !hasError, onDropdownVisibleChange: (visible) => {
     setActive(visible);
     setBlurred(!visible);
     onDropdownVisibleChange && onDropdownVisibleChange(visible);
   } }) : /* @__PURE__ */ jsxs(Inactive, { $disabled: disabled, onClick: !disabled ? handleActivate : void 0, $blurred: blurred, $mask: !value, children: [
     /* @__PURE__ */ jsxs(MainContent, { hasMargin: true, children: [
       getDisplayText(),
-      !disabled && /* @__PURE__ */ jsx(MaskedDatePlaceholder, { children: replaceLettersWithUnderscore(dateFormattingString) })
+      !disabled && /* @__PURE__ */ jsx(MaskedDatePlaceholder, { children: replaceLettersWithUnderscore(maskSample) })
     ] }),
     !active && suffix && /* @__PURE__ */ jsx(Suffix, { select: true, children: /* @__PURE__ */ jsx(Tooltip, { title: suffixTooltip, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CalendarM, {}), color: theme.palette["grey-600"] }) }) })
   ] }) }) }) });

package/dist/Elements/DatePicker/DatePicker.types.d.ts

@@ -5,5 +5,4 @@ export type SubtleDatePickerProps = {
     activeProp?: boolean;
     placeholder?: string;
     children?: ReactNode;
-    format?: string;
 } & SubtleFieldProps & DsDatePickerProps;

package/dist/Elements/DatePicker/utils.d.ts

@@ -1,2 +1,6 @@
+/**
+ * Turns a formatted date into a placeholder of the same shape: `08-09-2026` becomes
+ * `_ _ - _ _ - _ _ _ _`. Digits are replaced as well as letters, because the sample is a real
+ * formatted value rather than a token pattern.
+ */
 export declare const replaceLettersWithUnderscore: (input: string) => string;
-export declare const getFormattingString: (formatProp: string | undefined, showTime: boolean | undefined) => string;

package/dist/Elements/DatePicker/utils.js

@@ -1,13 +1,6 @@
 const replaceLettersWithUnderscore = (input) => {
-  return input.replace(/[a-zA-Z]/g, "_ ");
-};
-const getFormattingString = (formatProp, showTime) => {
-  if (!formatProp) {
-    return showTime ? "dd-MM-yyyy, HH:mm" : "dd-MM-yyyy";
-  }
-  return formatProp;
+  return input.replace(/[a-zA-Z0-9]/g, "_ ");
 };
 export {
-  getFormattingString,
   replaceLettersWithUnderscore
 };

package/dist/SubtleForm.d.ts

@@ -9,7 +9,7 @@ declare const SubtleForm: {
         displayName: string;
     };
     DatePicker: {
-        ({ value, suffix, suffixTooltip, format: dateFormat, label, children, labelTooltip, placeholder, onApply, onClear, errorText, error, activeProp, onDropdownVisibleChange, disabled, ...rest }: import('./Elements/DatePicker/DatePicker.types').SubtleDatePickerProps): import("react").JSX.Element;
+        ({ value, suffix, suffixTooltip, label, children, labelTooltip, placeholder, onApply, onClear, errorText, error, activeProp, onDropdownVisibleChange, disabled, ...rest }: import('./Elements/DatePicker/DatePicker.types').SubtleDatePickerProps): import("react").JSX.Element;
         displayName: string;
     };
     Field: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-subtle-form",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "SubtleForm UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -42,7 +42,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-date-picker": "^2.0.3",
+    "@synerise/ds-date-picker": "^2.1.0",
     "@synerise/ds-form-field": "^2.0.2",
     "@synerise/ds-icon": "^2.1.0",
     "@synerise/ds-input": "^2.0.3",
@@ -57,5 +57,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "e0dced8fd3a1194eff2fafc1b7e385b29238af88"
+  "gitHead": "a49acd96b6f71f5617548ae5ce6126cb9b0985dc"
 }