@wallarm-org/design-system 0.88.1 → 0.89.0

package/dist/components/FilterInput/lib/parseExpression/validators.d.ts

@@ -2,4 +2,12 @@ import type { FilterOperator } from '../../types';
 import type { ParserState } from './types';
 export declare const validateField: (s: ParserState, name: string) => void;
 export declare const validateOperator: (s: ParserState, op: string, fieldName: string) => FilterOperator;
+/**
+ * Validate pasted values through the *same* rules as inline typing
+ * (`getInvalidValueIndices`): a custom `validate`, `getSuggestions` fields, and
+ * `strictValues: false` all mean "the value list is a hint, not an allowlist",
+ * and grouped value options are flattened to their committable leaves. Reusing
+ * that one path keeps paste and typing in agreement — a value accepted when
+ * typed must not be rejected when pasted (AS-1377).
+ */
 export declare const validateValues: (s: ParserState, fieldName: string, values: Array<string | number>) => void;

package/dist/components/FilterInput/lib/parseExpression/validators.js

@@ -1,3 +1,4 @@
+import { getInvalidValueIndices } from "../validation.js";
 import { FilterParseError } from "./error.js";
 import { OPERATORS } from "./tokenizer.js";
 const validateField = (s, name)=>{
@@ -9,17 +10,10 @@ const validateOperator = (s, op, fieldName)=>{
     if (field?.operators && !field.operators.includes(op)) throw FilterParseError(`Operator '${op}' is not allowed for field '${fieldName}'`);
     return op;
 };
-const getAllowedValues = (field)=>{
-    if (field.values && field.values.length > 0) return new Set(field.values.map((v)=>String(v.value)));
-    if (field.options && field.options.length > 0) return new Set(field.options);
-    return null;
-};
 const validateValues = (s, fieldName, values)=>{
     const field = s.fields.find((f)=>f.name === fieldName);
     if (!field) return;
-    const allowed = getAllowedValues(field);
-    if (!allowed) return;
-    const invalid = values.filter((v)=>!allowed.has(String(v)));
+    const invalid = getInvalidValueIndices(field, values).map((i)=>values[i]);
     if (invalid.length > 0) {
         const formatted = invalid.map((v)=>`"${v}"`).join(', ');
         throw FilterParseError(`Invalid value ${formatted} for field '${fieldName}'`);

package/dist/components/FormatDateTime/FormatDateTime.d.ts

@@ -1,12 +1,18 @@
 import type { FC, HTMLAttributes, Ref } from 'react';
 import type { TestableProps } from '../../utils/testId';
 type FormatDateTimeFormat = 'relative' | 'date' | 'datetime';
+type FormatDateTimeLayout = 'stacked' | 'inline';
 interface FormatDateTimeBaseProps {
     /** ISO string, Date object, or Unix timestamp (ms) */
     value: string | Date | number | null | undefined;
     /** Display format. Default: 'relative' */
     format?: FormatDateTimeFormat;
-    /** Show seconds in tooltip absolute time. Default: true */
+    /**
+     * Datetime layout. `stacked` puts date over time; `inline` puts them on one
+     * line. Only affects `format='datetime'`. Default: 'stacked'
+     */
+    layout?: FormatDateTimeLayout;
+    /** Show seconds in the relative-format tooltip. Default: true */
     showSeconds?: boolean;
     ref?: Ref<HTMLTimeElement>;
 }

package/dist/components/FormatDateTime/FormatDateTime.js

@@ -8,7 +8,7 @@ const toDate = (value)=>{
     if (value instanceof Date) return value;
     return new Date(value);
 };
-const FormatDateTime = ({ value, format = 'relative', showSeconds = true, ref, ...props })=>{
+const FormatDateTime = ({ value, format = 'relative', layout = 'stacked', showSeconds = true, ref, ...props })=>{
     if (null == value) return /*#__PURE__*/ jsxs(Tooltip, {
         children: [
             /*#__PURE__*/ jsx(TooltipTrigger, {
@@ -67,54 +67,34 @@ const FormatDateTime = ({ value, format = 'relative', showSeconds = true, ref, .
             })
         ]
     });
-    if ('datetime' === format) return /*#__PURE__*/ jsxs(Tooltip, {
+    if ('datetime' === format) return /*#__PURE__*/ jsxs("time", {
+        ref: ref,
+        dateTime: isoString,
+        className: cn('inline-flex whitespace-nowrap', 'inline' === layout ? 'items-baseline gap-4' : 'flex-col'),
+        "data-slot": "format-date-time",
+        ...props,
         children: [
-            /*#__PURE__*/ jsx(TooltipTrigger, {
-                asChild: true,
-                children: /*#__PURE__*/ jsxs("time", {
-                    ref: ref,
-                    dateTime: isoString,
-                    className: "inline-flex flex-col whitespace-nowrap",
-                    "data-slot": "format-date-time",
-                    ...props,
-                    children: [
-                        /*#__PURE__*/ jsx(Text, {
-                            size: "sm",
-                            children: formatAbsoluteDate(date)
-                        }),
-                        /*#__PURE__*/ jsx(Text, {
-                            size: "sm",
-                            color: "secondary",
-                            children: formatTimeOnly(date)
-                        })
-                    ]
-                })
+            /*#__PURE__*/ jsx(Text, {
+                size: "sm",
+                children: formatAbsoluteDate(date)
             }),
-            /*#__PURE__*/ jsx(TooltipContent, {
-                children: tooltipText
+            /*#__PURE__*/ jsx(Text, {
+                size: "sm",
+                color: "secondary",
+                children: formatTimeOnly(date)
             })
         ]
     });
-    return /*#__PURE__*/ jsxs(Tooltip, {
-        children: [
-            /*#__PURE__*/ jsx(TooltipTrigger, {
-                asChild: true,
-                children: /*#__PURE__*/ jsx("time", {
-                    ref: ref,
-                    dateTime: isoString,
-                    className: "inline-flex flex-col whitespace-nowrap",
-                    "data-slot": "format-date-time",
-                    ...props,
-                    children: /*#__PURE__*/ jsx(Text, {
-                        size: "sm",
-                        children: formatAbsoluteDate(date)
-                    })
-                })
-            }),
-            /*#__PURE__*/ jsx(TooltipContent, {
-                children: tooltipText
-            })
-        ]
+    return /*#__PURE__*/ jsx("time", {
+        ref: ref,
+        dateTime: isoString,
+        className: "inline-flex flex-col whitespace-nowrap",
+        "data-slot": "format-date-time",
+        ...props,
+        children: /*#__PURE__*/ jsx(Text, {
+            size: "sm",
+            children: formatAbsoluteDate(date)
+        })
     });
 };
 FormatDateTime.displayName = 'FormatDateTime';

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.88.0",
-  "generatedAt": "2026-08-11T12:56:16.025Z",
+  "version": "0.88.2",
+  "generatedAt": "2026-08-12T09:08:55.589Z",
   "components": [
     {
       "name": "Accordion",
@@ -31450,11 +31450,18 @@
           "description": "Display format. Default: 'relative'",
           "defaultValue": "relative"
         },
+        {
+          "name": "layout",
+          "type": "FormatDateTimeLayout | undefined",
+          "required": false,
+          "description": "Datetime layout. `stacked` puts date over time; `inline` puts them on one\nline. Only affects `format='datetime'`. Default: 'stacked'",
+          "defaultValue": "stacked"
+        },
         {
           "name": "showSeconds",
           "type": "boolean | undefined",
           "required": false,
-          "description": "Show seconds in tooltip absolute time. Default: true",
+          "description": "Show seconds in the relative-format tooltip. Default: true",
           "defaultValue": "true"
         }
       ],
@@ -31473,6 +31480,10 @@
           "name": "DatetimeFormat",
           "code": "() => (\n  <VStack gap={12} align='start'>\n    <FormatDateTime value='2026-01-01T11:00:00' format='datetime' />\n    <FormatDateTime value='2026-02-11T14:32:07' format='datetime' />\n    <FormatDateTime value='2025-12-25T23:59:59' format='datetime' />\n  </VStack>\n)"
         },
+        {
+          "name": "DatetimeLayout",
+          "code": "() => (\n  <HStack gap={64} align='start'>\n    <VStack gap={12} align='start'>\n      <Text size='sm' color='secondary'>\n        Stacked (default)\n      </Text>\n      <FormatDateTime value='2026-01-01T11:00:00' format='datetime' layout='stacked' />\n      <FormatDateTime value='2026-02-11T14:32:07' format='datetime' layout='stacked' />\n      <FormatDateTime value='2025-12-25T23:59:59' format='datetime' layout='stacked' />\n    </VStack>\n    <VStack gap={12} align='start'>\n      <Text size='sm' color='secondary'>\n        Inline\n      </Text>\n      <FormatDateTime value='2026-01-01T11:00:00' format='datetime' layout='inline' />\n      <FormatDateTime value='2026-02-11T14:32:07' format='datetime' layout='inline' />\n      <FormatDateTime value='2025-12-25T23:59:59' format='datetime' layout='inline' />\n    </VStack>\n  </HStack>\n)"
+        },
         {
           "name": "WithDescription",
           "code": "() => (\n  <VStack gap={12} align='start'>\n    <VStack gap={2}>\n      <FormatDateTime value='2026-01-01T00:00:00' format='date' />\n      <Text size='sm' color='secondary'>\n        Created by admin\n      </Text>\n    </VStack>\n    <VStack gap={2}>\n      <FormatDateTime value='2026-02-11T14:32:07' format='date' />\n      <Text size='sm' color='secondary'>\n        Last modified\n      </Text>\n    </VStack>\n  </VStack>\n)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.88.1",
+  "version": "0.89.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",