@wallarm-org/design-system 0.27.0 → 0.27.1-rc-feature-WDS-96-update-data-input-component.2

package/dist/components/DateInput/DateInput.js

@@ -5,9 +5,11 @@ import { useDateField } from "@react-aria/datepicker";
 import { useLocale } from "@react-aria/i18n";
 import { useDateFieldState } from "@react-stately/datepicker";
 import { cn } from "../../utils/cn.js";
-import { useTemporalField } from "../TemporalCore/index.js";
+import { getDefaultTemporalPlaceholder, useTemporalField } from "../TemporalCore/index.js";
 import { DateInputInternal } from "./DateInputInternal.js";
-const DateInput = /*#__PURE__*/ forwardRef(({ icon, value: controlledValue, defaultValue, onChange, error = false, disabled = false, granularity = 'day', placeholder, showTimeDropdown, timeStep, hourCycle, className, ...props }, forwardedRef)=>{
+const DateInput = /*#__PURE__*/ forwardRef(({ icon, value: controlledValue, defaultValue, onChange, error = false, disabled = false, granularity = 'day', placeholder = getDefaultTemporalPlaceholder({
+    granularity
+}), showTimeDropdown, timeStep, hourCycle, className, ...props }, forwardedRef)=>{
     const { locale } = useLocale();
     const ref = useRef(null);
     const finalRef = forwardedRef || ref;

package/dist/components/DateRangeInput/DateRangeContext/DateRangeProvider.js

@@ -3,9 +3,12 @@ import { forwardRef, useCallback, useRef } from "react";
 import { CalendarDate } from "@internationalized/date";
 import { useDateRangePicker } from "@react-aria/datepicker";
 import { useDateRangePickerState } from "@react-stately/datepicker";
-import { useTemporalField } from "../../TemporalCore/index.js";
+import { getDefaultTemporalPlaceholder, useTemporalField } from "../../TemporalCore/index.js";
 import { DateRangeContext } from "./context.js";
-const DateRangeProvider = /*#__PURE__*/ forwardRef(({ children, value: controlledValue, defaultValue, onChange, error = false, disabled = false, readOnly = false, granularity = 'day', hourCycle, placeholder, showTimeDropdown, timeStep, icon }, forwardedRef)=>{
+const DateRangeProvider = /*#__PURE__*/ forwardRef(({ children, value: controlledValue, defaultValue, onChange, error = false, disabled = false, readOnly = false, granularity = 'day', hourCycle, placeholder = getDefaultTemporalPlaceholder({
+    granularity,
+    isRange: true
+}), showTimeDropdown, timeStep, icon }, forwardedRef)=>{
     const ref = useRef(null);
     const finalRef = forwardedRef || ref;
     const startRef = useRef(null);

package/dist/components/DateRangeInput/DateRangeGroup.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { useDateRangeContext } from "./DateRangeContext/index.js";
-const dateRangeGroupVariants = cva(cn('group/temporal flex-1 h-full flex items-center gap-4', 'focus-within:outline-none', 'data-disabled:opacity-50 data-disabled:cursor-not-allowed'));
+const dateRangeGroupVariants = cva(cn('relative group/temporal flex-1 h-full flex items-center gap-4', 'focus-within:outline-none', 'data-disabled:opacity-50 data-disabled:cursor-not-allowed'));
 const DateRangeGroup = ({ children })=>{
     const context = useDateRangeContext();
     const { groupProps = {}, finalRef, disabled, error } = context ?? {};

package/dist/components/DateRangeInput/DateRangeInputInternal.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { InputGroup, InputGroupAddon } from "../InputGroup/index.js";
-import { TemporalClear } from "../TemporalCore/index.js";
+import { TemporalClear, TemporalPlaceholder } from "../TemporalCore/index.js";
 import { useDateRangeContext } from "./DateRangeContext/index.js";
 import { DateRangeGroup } from "./DateRangeGroup.js";
 import { DateRangeSegmentGroup } from "./DateRangeSegmentGroup.js";
@@ -11,6 +11,7 @@ const DateRangeInputInternal = ({ icon: IconComponent })=>{
     const context = useDateRangeContext();
     const [startHasValue, setStartHasValue] = useState(false);
     const [endHasValue, setEndHasValue] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
     const [clearKey, setClearKey] = useState(0);
     const hasAnyValue = startHasValue || endHasValue;
     const handleClear = useCallback(()=>{
@@ -20,10 +21,17 @@ const DateRangeInputInternal = ({ icon: IconComponent })=>{
     }, [
         context
     ]);
+    const handleFocusCapture = ()=>setIsFocused(true);
+    const handleBlurCapture = (event)=>{
+        if (!event.currentTarget.contains(event.relatedTarget)) setIsFocused(false);
+    };
     if (!context) return null;
-    const { startFieldProps, startRef, endFieldProps, endRef, disabled } = context;
+    const { startFieldProps, startRef, endFieldProps, endRef, disabled, placeholder } = context;
+    const showPlaceholder = Boolean(placeholder && !hasAnyValue && !isFocused);
     return /*#__PURE__*/ jsx("div", {
         className: cn('**:data-[slot=input]:first:pr-0 **:data-[slot=input]:last:pl-0 min-w-284'),
+        onFocusCapture: handleFocusCapture,
+        onBlurCapture: handleBlurCapture,
         children: /*#__PURE__*/ jsxs(InputGroup, {
             children: [
                 IconComponent && /*#__PURE__*/ jsx(InputGroupAddon, {
@@ -31,19 +39,27 @@ const DateRangeInputInternal = ({ icon: IconComponent })=>{
                 }),
                 /*#__PURE__*/ jsxs(DateRangeGroup, {
                     children: [
-                        /*#__PURE__*/ jsx(DateRangeSegmentGroup, {
-                            ...startFieldProps,
-                            ref: startRef,
-                            type: "start",
-                            onHasPartialValueChange: setStartHasValue
-                        }, `start-${clearKey}`),
-                        /*#__PURE__*/ jsx(DateRangeSeparator, {}),
-                        /*#__PURE__*/ jsx(DateRangeSegmentGroup, {
-                            ...endFieldProps,
-                            ref: endRef,
-                            type: "end",
-                            onHasPartialValueChange: setEndHasValue
-                        }, `end-${clearKey}`)
+                        showPlaceholder && placeholder && /*#__PURE__*/ jsx(TemporalPlaceholder, {
+                            text: placeholder
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: cn('contents', showPlaceholder && '[&>*]:opacity-0'),
+                            children: [
+                                /*#__PURE__*/ jsx(DateRangeSegmentGroup, {
+                                    ...startFieldProps,
+                                    ref: startRef,
+                                    type: "start",
+                                    onHasPartialValueChange: setStartHasValue
+                                }, `start-${clearKey}`),
+                                /*#__PURE__*/ jsx(DateRangeSeparator, {}),
+                                /*#__PURE__*/ jsx(DateRangeSegmentGroup, {
+                                    ...endFieldProps,
+                                    ref: endRef,
+                                    type: "end",
+                                    onHasPartialValueChange: setEndHasValue
+                                }, `end-${clearKey}`)
+                            ]
+                        })
                     ]
                 }),
                 /*#__PURE__*/ jsx(InputGroupAddon, {

package/dist/components/DateRangeInput/DateRangeSegmentGroup.js

@@ -5,14 +5,13 @@ import { useDateField } from "@react-aria/datepicker";
 import { useLocale } from "@react-aria/i18n";
 import { useDateFieldState } from "@react-stately/datepicker";
 import { cn } from "../../utils/cn.js";
-import { TemporalPlaceholder, TemporalSegmentGroup, TimeDropdown, useTimeDropdownKeyCapture } from "../TemporalCore/index.js";
+import { TemporalSegmentGroup, TimeDropdown, useTimeDropdownKeyCapture } from "../TemporalCore/index.js";
 import { useDateRangeContext } from "./DateRangeContext/index.js";
 const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValueChange, ...props }, ref)=>{
     const context = useDateRangeContext();
-    const { disabled = false, error = false, readOnly = false, placeholder, showTimeDropdown, timeStep = 30, hourCycle, icon } = context ?? {};
+    const { disabled = false, error = false, readOnly = false, showTimeDropdown, timeStep = 30, hourCycle, icon } = context ?? {};
     const { locale } = useLocale();
     const dropdownRef = useRef(null);
-    const [isFocused, setIsFocused] = useState(false);
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const blurTimeoutRef = useRef(null);
     const fieldState = useDateFieldState({
@@ -24,7 +23,6 @@ const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValu
     });
     const { fieldProps } = useDateField(props, fieldState, ref);
     const hasPartialValue = fieldState.segments.some((seg)=>seg.isEditable && !seg.isPlaceholder);
-    const showPlaceholder = placeholder && !hasPartialValue && !isFocused;
     useEffect(()=>{
         onHasPartialValueChange?.(hasPartialValue);
     }, [
@@ -34,7 +32,6 @@ const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValu
     const hasTimeSegments = fieldState.segments.some((seg)=>'hour' === seg.type || 'minute' === seg.type);
     const hasDateSegments = fieldState.segments.some((seg)=>'year' === seg.type || 'month' === seg.type || 'day' === seg.type);
     const handleFocus = ()=>{
-        setIsFocused(true);
         if (blurTimeoutRef.current) {
             clearTimeout(blurTimeoutRef.current);
             blurTimeoutRef.current = null;
@@ -44,7 +41,6 @@ const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValu
         if (showTimeDropdown && hasTimeSegments && !isDropdownOpen) setIsDropdownOpen(true);
     };
     const handleBlur = ()=>{
-        setIsFocused(false);
         blurTimeoutRef.current = window.setTimeout(()=>{
             setIsDropdownOpen(false);
         }, 200);
@@ -88,15 +84,11 @@ const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValu
         onKeyDownCapture: handleKeyDownCapture,
         onClick: handleClick,
         children: [
-            showPlaceholder && /*#__PURE__*/ jsx(TemporalPlaceholder, {
-                text: placeholder,
-                className: "overflow-hidden text-ellipsis"
-            }),
             /*#__PURE__*/ jsx(TemporalSegmentGroup, {
                 ...fieldProps,
                 ref: ref,
                 "data-slot": "input",
-                className: cn('h-36', showPlaceholder && 'opacity-0'),
+                className: cn('h-36'),
                 "aria-disabled": disabled || void 0,
                 "aria-invalid": error || void 0,
                 "data-field-type": type,

package/dist/components/TemporalCore/TemporalSegment.js

@@ -4,14 +4,14 @@ import { useDateSegment } from "@react-aria/datepicker";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { getMonthSegmentText } from "./utils.js";
-const segmentVariants = cva(cn('relative outline-none text-left', 'font-sans text-sm transition-all', 'focus:bg-bg-fill-brand focus:text-text-primary-alt', 'focus:outline-none'), {
+const segmentVariants = cva(cn('relative outline-none text-left', 'font-sans text-sm transition-all', 'focus:bg-states-primary-pressed', 'focus:outline-none'), {
     variants: {
         isPlaceholder: {
             true: 'text-text-secondary',
             false: 'text-text-primary'
         },
         disabled: {
-            true: 'cursor-not-allowed opacity-50',
+            true: 'cursor-not-allowed',
             false: 'hover:bg-states-primary-default-alt cursor-text'
         },
         type: {

package/dist/components/TemporalCore/index.d.ts

@@ -5,3 +5,4 @@ export { TemporalSegmentGroup } from './TemporalSegmentGroup';
 export { TimeDropdown, type TimeDropdownHandle } from './TimeDropdown';
 export { useTemporalField } from './useTemporalField';
 export { useTimeDropdownKeyCapture } from './useTimeDropdownKeyCapture';
+export { getDefaultTemporalPlaceholder, type TemporalGranularity } from './utils';

package/dist/components/TemporalCore/index.js

@@ -5,4 +5,5 @@ import { TemporalSegmentGroup } from "./TemporalSegmentGroup.js";
 import { TimeDropdown } from "./TimeDropdown.js";
 import { useTemporalField } from "./useTemporalField.js";
 import { useTimeDropdownKeyCapture } from "./useTimeDropdownKeyCapture.js";
-export { TemporalClear, TemporalPlaceholder, TemporalSegment, TemporalSegmentGroup, TimeDropdown, useTemporalField, useTimeDropdownKeyCapture };
+import { getDefaultTemporalPlaceholder } from "./utils.js";
+export { TemporalClear, TemporalPlaceholder, TemporalSegment, TemporalSegmentGroup, TimeDropdown, getDefaultTemporalPlaceholder, useTemporalField, useTimeDropdownKeyCapture };

package/dist/components/TemporalCore/utils.d.ts

@@ -1,2 +1,10 @@
 export declare function getMonthName(monthNumber: number): string;
 export declare function getMonthSegmentText(value: number | null, placeholder?: string): string;
+export type TemporalGranularity = 'day' | 'hour' | 'minute' | 'second';
+interface DefaultPlaceholderOptions {
+    granularity?: TemporalGranularity;
+    isRange?: boolean;
+    isTimeOnly?: boolean;
+}
+export declare function getDefaultTemporalPlaceholder({ granularity, isRange, isTimeOnly, }: DefaultPlaceholderOptions): string;
+export {};

package/dist/components/TemporalCore/utils.js

@@ -8,4 +8,9 @@ function getMonthSegmentText(value, placeholder = 'MM') {
     if (null == value) return placeholder;
     return getMonthName(value);
 }
-export { getMonthName, getMonthSegmentText };
+function getDefaultTemporalPlaceholder({ granularity, isRange = false, isTimeOnly = false }) {
+    if (isTimeOnly) return 'Select time';
+    if ('day' === granularity || void 0 === granularity) return isRange ? 'Select a date range' : 'Select a date';
+    return isRange ? 'Select date and time range' : 'Select date and time';
+}
+export { getDefaultTemporalPlaceholder, getMonthName, getMonthSegmentText };

package/dist/components/TimeInput/TimeInput.js

@@ -4,8 +4,10 @@ import { useTimeField } from "@react-aria/datepicker";
 import { useLocale } from "@react-aria/i18n";
 import { useTimeFieldState } from "@react-stately/datepicker";
 import { DateInputInternal } from "../DateInput/index.js";
-import { useTemporalField } from "../TemporalCore/index.js";
-const TimeInput = /*#__PURE__*/ forwardRef(({ icon, value: controlledValue, defaultValue, onChange, error = false, disabled = false, granularity = 'minute', placeholder, showTimeDropdown, timeStep, hourCycle, ...props }, forwardedRef)=>{
+import { getDefaultTemporalPlaceholder, useTemporalField } from "../TemporalCore/index.js";
+const TimeInput = /*#__PURE__*/ forwardRef(({ icon, value: controlledValue, defaultValue, onChange, error = false, disabled = false, granularity = 'minute', placeholder = getDefaultTemporalPlaceholder({
+    isTimeOnly: true
+}), showTimeDropdown, timeStep, hourCycle, ...props }, forwardedRef)=>{
     const { locale } = useLocale();
     const ref = useRef(null);
     const finalRef = forwardedRef || ref;

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.26.0",
-  "generatedAt": "2026-04-20T13:27:55.627Z",
+  "version": "0.27.0",
+  "generatedAt": "2026-04-20T18:34:10.247Z",
   "components": [
     {
       "name": "Alert",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.27.0",
+  "version": "0.27.1-rc-feature-WDS-96-update-data-input-component.2",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",