@synerise/ds-subtle-form 1.2.7 → 1.2.9

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@1.2.8...@synerise/ds-subtle-form@1.2.9) (2026-07-24)
+
+**Note:** Version bump only for package @synerise/ds-subtle-form
+
+## [1.2.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@1.2.7...@synerise/ds-subtle-form@1.2.8) (2026-07-23)
+
+**Note:** Version bump only for package @synerise/ds-subtle-form
+
 ## [1.2.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@1.2.6...@synerise/ds-subtle-form@1.2.7) (2026-07-16)
 
 **Note:** Version bump only for package @synerise/ds-subtle-form

package/CLAUDE.md

@@ -0,0 +1,172 @@
+# SubtleForm (`@synerise/ds-subtle-form`)
+
+> A compound form component providing 5 inline-edit sub-components (TextArea, Input, Select, DatePicker, Field) that toggle between a static display state and an active edit state on click/hover.
+
+## Package structure
+
+```
+src/
+ SubtleForm.tsx — namespace component (returns null); attaches sub-components as static properties
+ SubtleForm.types.ts — SubtleFieldProps (shared base type)
+ SubtleForm.styles.ts — shared styled components: Inactive, MainContent, Suffix, Container, Subtle, SubtleFormField, ValueArea; animation keyframes
+ index.ts — default export only (no type re-exports)
+ Elements/
+ TextArea/TextArea.tsx — textarea with dynamic row height calculation
+ TextArea/TextArea.types.ts — SubtleTextAreaProps, TextareaAutosize
+ Input/Input.tsx — single-line text input
+ Input/Input.types.ts — SubtleInputProps
+ Select/Select.tsx — Ant Design select dropdown
+ Select/Select.types.ts — SubtleSelectProps
+ Select/Select.styles.ts — SelectContainer (handles active margin offset)
+ 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
+ Field/Field.tsx — generic field: renders activeElement() / inactiveElement(); uses useOnClickOutside
+ __specs__/
+ TextArea.spec.tsx — Vitest tests (TextArea only)
+```
+
+## Public exports
+
+### `SubtleForm` (default export)
+
+The component itself returns `null`. It is used only as a namespace:
+
+- `SubtleForm.TextArea`
+- `SubtleForm.Input`
+- `SubtleForm.Select`
+- `SubtleForm.DatePicker`
+- `SubtleForm.Field`
+
+No type exports from `index.ts`.
+
+---
+
+### Shared `SubtleFieldProps` (base for all sub-components)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `FormFieldCommonProps['label']` | Label above the field |
+| `labelTooltip` | `FormFieldCommonProps['tooltip']` | Tooltip on the label |
+| `errorText` | `FormFieldCommonProps['errorText']` | Error message; forces active/edit state |
+| `disabled` | `boolean` | Disables interactions, 0.5 opacity |
+| `suffix` | `ReactNode` | Custom suffix icon in inactive state (replaces default edit icon) |
+| `suffixTooltip` | `ReactNode` | Tooltip on the suffix icon |
+| `active` | `boolean` | Controlled active state (`Field` only) |
+| `activeElement` | `() => ReactElement` | Render function for edit state (`Field` only) |
+| `inactiveElement` | `() => ReactElement` | Render function for display state (`Field` only) |
+| `mask` | `string` | Mask string shown below inactive content (`Field` only) |
+| `maskVisible` | `boolean` | Whether to show the mask (`Field` only) |
+
+---
+
+### `SubtleForm.TextArea`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | — | Current value |
+| `onChange` | `(value: string) => void` | — | Called on input change |
+| `placeholder` | `string` | — | Shown when no value |
+| `minRows` | `number` | `1` | Minimum textarea rows |
+| `maxRows` | `number` | — | Maximum textarea rows (clamps auto-height) |
+| `error` | `boolean` | — | Error state; forces edit mode |
+| `textAreaProps` | `TextAreaProps` | — | Props forwarded to `@synerise/ds-input` TextArea |
+| + all `SubtleFieldProps` | | | |
+
+### `SubtleForm.Input`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | — | Current value |
+| `onChange` | `(value: string) => void` | — | Called on input change |
+| `placeholder` | `string` | — | Shown when no value |
+| `error` | `boolean` | — | Error state; forces edit mode |
+| `inputProps` | `InputProps` | — (**required**) | Props forwarded to Ant Design `Input` |
+| + all `SubtleFieldProps` | | | |
+
+### `SubtleForm.Select`
+
+Extends `SubtleFieldProps` + `@synerise/ds-select` props. Additional:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `placeholder` | `string` | Shown when no value |
+| `dropdownAlign` | `object` | Ant Design `dropdownAlign`; defaults to `{}` (offset `[0, 8]` applied) |
+| `children` | `ReactNode` | `Select.Option` children |
+
+### `SubtleForm.DatePicker`
+
+Extends `SubtleFieldProps` + `@synerise/ds-date-picker` props. Additional:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `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`) |
+| `placeholder` | `string` | Shown when no value |
+| `activeProp` | `boolean` | External control of active state |
+
+### `SubtleForm.Field`
+
+Generic field using `SubtleFieldProps` props only (no additional props). Uses `activeElement()` and `inactiveElement()` callbacks to render edit/display states.
+
+## Usage patterns
+
+```tsx
+import SubtleForm from '@synerise/ds-subtle-form';
+
+// TextArea
+const [value, setValue] = React.useState('');
+<SubtleForm.TextArea
+ value={value}
+ onChange={setValue}
+ placeholder="Description"
+ label="Label"
+ labelTooltip="Tooltip"
+ suffixTooltip="Edit"
+ minRows={3}
+/>
+
+// Input
+<SubtleForm.Input
+ value={name}
+ onChange={setName}
+ placeholder="Name"
+ label="Name"
+ inputProps={{}}
+/>
+
+// Custom Field
+<SubtleForm.Field
+ active={active}
+ activeElement={() => <InputNumber value={val} onBlur={() => setActive(false)} />}
+ inactiveElement={() => <>{val ?? 'placeholder'}</>}
+ label="Number"
+/>
+```
+
+## Styling
+
+`SubtleForm.styles.ts`. Key pattern: `Inactive` div has `padding: 7px 40px 7px 0` at rest, animates to `padding: 7px 28px 7px 12px` on hover. The `Suffix` icon uses `opacity: 0` → `1` transition on hover. A `blurAnimation` keyframe plays once after blur to reverse the padding. `SubtleFormField` (extends `FormField`) uses `gap: 10px` when active, `8px` at rest.
+
+## Key dependencies
+
+- `@synerise/ds-input` — `Input` and `TextArea` for edit state
+- `@synerise/ds-select` — `Select` for edit state
+- `@synerise/ds-date-picker` — `DatePicker` for edit state
+- `@synerise/ds-form-field` — `FormField` wrapper for label + error
+- `@synerise/ds-utils` — `useOnClickOutside` (Field only)
+- `calculate-size` — measures text pixel width to compute visible rows in TextArea
+- `@synerise/ds-tooltip` — suffix tooltip in inactive state
+
+## Implementation notes
+
+- **Active/inactive toggle** — all sub-components maintain local `active` and `blurred` state. `errorText || error` forces the active/edit view.
+- **`SubtleForm()` returns `null`** — the main component is a namespace-only wrapper; calling it renders nothing.
+- **`inputProps` is required on `SubtleForm.Input`** — not optional in `SubtleInputProps`; pass `inputProps={{}}` if you have no extra props.
+- **`activeProp` on DatePicker is unused in logic** — the prop is declared but not wired into the state machine (only `error` triggers the forced active path).
+- **Deep import in Storybook** — stories import `@synerise/ds-subtle-form/dist/Elements/DatePicker/utils` directly. This is a fragile deep path not covered by public exports.
+- **Only TextArea has tests** — Input, Select, DatePicker, and Field have no spec files.
+- **Uses Vitest**.

package/dist/Elements/Select/Select.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { SubtleSelectProps } from './Select.types';
 declare const SubtleSelect: {
-    ({ disabled, value, suffix, suffixTooltip, label, children, labelTooltip, placeholder, error, errorText, dropdownAlign, ...rest }: SubtleSelectProps): React.JSX.Element;
+    ({ disabled, value, suffix, suffixTooltip, label, children, labelTooltip, placeholder, error, errorText, ...rest }: SubtleSelectProps): React.JSX.Element;
     displayName: string;
 };
 export default SubtleSelect;

package/dist/Elements/Select/Select.js

@@ -17,7 +17,6 @@ const SubtleSelect = ({
   placeholder,
   error,
   errorText,
-  dropdownAlign = {},
   ...rest
 }) => {
   const [active, setActive] = useState(false);
@@ -33,10 +32,7 @@ const SubtleSelect = ({
     setBlurred(false);
   }, []);
   const theme = useTheme();
-  return /* @__PURE__ */ jsx(Subtle, { className: "ds-subtle-form", $disabled: disabled, children: /* @__PURE__ */ jsx(SubtleFormField, { $active: active, label, tooltip: labelTooltip, children: /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, className: "ds-subtle-select", active, children: active && !blurred || hasError ? /* @__PURE__ */ jsx(Select, { disabled, autoFocus: !hasError, size: "middle", onBlur: handleDeactivate, value, placeholder, errorText, error, defaultOpen: !hasError, dropdownAlign: {
-    offset: [0, 8],
-    ...dropdownAlign
-  }, ...rest, children }) : /* @__PURE__ */ jsxs(Inactive, { className: "inactive-content", onClick: !disabled ? handleActivate : void 0, $blurred: blurred, $disabled: disabled, children: [
+  return /* @__PURE__ */ jsx(Subtle, { className: "ds-subtle-form", $disabled: disabled, children: /* @__PURE__ */ jsx(SubtleFormField, { $active: active, label, tooltip: labelTooltip, children: /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, className: "ds-subtle-select", active, children: active && !blurred || hasError ? /* @__PURE__ */ jsx(Select, { disabled, autoFocus: !hasError, size: "middle", onBlur: handleDeactivate, value, placeholder, errorText, error, defaultOpen: !hasError, ...rest, children }) : /* @__PURE__ */ jsxs(Inactive, { className: "inactive-content", onClick: !disabled ? handleActivate : void 0, $blurred: blurred, $disabled: disabled, children: [
     /* @__PURE__ */ jsx(MainContent, { className: "main-content", hasMargin: true, children: /* @__PURE__ */ jsx(Fragment, { children: value && !!String(value).trim() ? value : placeholder }) }),
     !active && !disabled && suffix && /* @__PURE__ */ jsx(Suffix, { select: true, children: /* @__PURE__ */ jsx(Tooltip, { title: suffixTooltip, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}), color: theme.palette["grey-600"] }) }) })
   ] }) }) }) });

package/dist/Elements/Select/Select.styles.js

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 const SelectContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Selectstyles__SelectContainer",
   componentId: "sc-u85d8m-0"
-})(["position:relative;min-height:32px;width:100%;", " .ant-select-focused{.ds-status{margin:-1px 0 0 0;}}.ds-status{margin:0;}div.ant-select-selector{transition:border 0s linear !important;}"], (props) => props.active && css(["margin:-2px 0 0 -1px;"]));
+})(["position:relative;min-height:32px;width:100%;", " .ds-select-open{.ds-status{margin:-1px 0 0 0;}}.ds-status{margin:0;}.ds-select{transition:border 0s linear !important;}"], (props) => props.active && css(["margin:-2px 0 0 -1px;"]));
 export {
   SelectContainer
 };

package/dist/SubtleForm.d.ts

@@ -5,7 +5,7 @@ declare const SubtleForm: {
         displayName: string;
     };
     Select: {
-        ({ disabled, value, suffix, suffixTooltip, label, children, labelTooltip, placeholder, error, errorText, dropdownAlign, ...rest }: import('./Elements/Select/Select.types').SubtleSelectProps): import("react").JSX.Element;
+        ({ disabled, value, suffix, suffixTooltip, label, children, labelTooltip, placeholder, error, errorText, ...rest }: import('./Elements/Select/Select.types').SubtleSelectProps): import("react").JSX.Element;
         displayName: string;
     };
     DatePicker: {

package/dist/SubtleForm.styles.js

@@ -46,7 +46,7 @@ const ValueArea = /* @__PURE__ */ styled.textarea.withConfig({
 const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SubtleFormstyles__Container",
   componentId: "sc-1wunvof-4"
-})(["&.ds-subtle-input{", "{line-height:18px;}input::placeholder{line-height:16px;}}position:relative;width:100%;", " > div{margin:0;}.ds-subtle-select{.ant-select-selector:{transition:all 0s linear !important;}}&& .ds-input-number-input::placeholder{padding-bottom:8px;}", ""], Inactive, (props) => !!props.active && css(["margin:-1px 0 0 -1px;"]), (props) => !!props.disabled && css(["&&{cursor:not-allowed;}"]));
+})(["&.ds-subtle-input{", "{line-height:18px;}input::placeholder{line-height:16px;}}position:relative;width:100%;", " > div{margin:0;}.ds-subtle-select{.ds-select{transition:all 0s linear !important;}}&& .ds-input-number-input::placeholder{padding-bottom:8px;}", ""], Inactive, (props) => !!props.active && css(["margin:-1px 0 0 -1px;"]), (props) => !!props.disabled && css(["&&{cursor:not-allowed;}"]));
 const Subtle = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SubtleFormstyles__Subtle",
   componentId: "sc-1wunvof-5"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-subtle-form",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "SubtleForm UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -17,6 +17,7 @@
   "files": [
     "/dist",
     "CHANGELOG.md",
+    "CLAUDE.md",
     "README.md",
     "package.json",
     "LICENSE.md"
@@ -41,13 +42,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-date-picker": "^1.4.21",
-    "@synerise/ds-form-field": "^1.3.23",
-    "@synerise/ds-icon": "^1.18.4",
-    "@synerise/ds-input": "^1.7.12",
-    "@synerise/ds-select": "^1.3.33",
-    "@synerise/ds-tooltip": "^1.5.3",
-    "@synerise/ds-utils": "^1.10.1",
+    "@synerise/ds-date-picker": "^1.4.23",
+    "@synerise/ds-form-field": "^1.3.24",
+    "@synerise/ds-icon": "^1.18.5",
+    "@synerise/ds-input": "^1.7.14",
+    "@synerise/ds-select": "^1.4.0",
+    "@synerise/ds-tooltip": "^1.5.4",
+    "@synerise/ds-utils": "^1.10.2",
     "calculate-size": "^1.1.1"
   },
   "peerDependencies": {
@@ -57,5 +58,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "a81ab6519d49a3dea9c0cfebcdc9104cbb4f4226"
+  "gitHead": "018414e0d7ffd102a07f8aa35fa2e2d3d4ed19e2"
 }