@povio/ui 2.2.9-rc.15 → 2.2.9-rc.17

package/dist/components/inputs/shared/StaticInput.js

@@ -0,0 +1,79 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
+import { inputBase, inputSize } from "./input.cva.js";
+import { FormField } from "../FormField/FormField.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/components/inputs/shared/StaticInput.tsx
+var StaticInput = ({ onInteract, as, size, variant, applyMinInputWidth, placeholder, displayValue, isEmpty, leadingVisual, leadingContent, trailingContent, contentRowClassName, inputClassName, className, ...formFieldProps }) => {
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	let hasValue = !!displayValue;
+	if (isEmpty != null) hasValue = !isEmpty;
+	let staticDisplayContent = placeholder;
+	if (hasValue) staticDisplayContent = displayValue;
+	else if (as === "floating") staticDisplayContent = null;
+	const shouldRenderFloatingLineSpacer = as === "floating" && !hasValue;
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		as,
+		className,
+		onMouseEnter: () => onInteract(false),
+		tabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsxs("div", {
+			tabIndex: formFieldProps.isDisabled ? -1 : 0,
+			onFocus: () => onInteract(true),
+			onClick: () => onInteract(true),
+			onPointerDown: () => onInteract(true),
+			"data-is-empty": !hasValue || void 0,
+			"data-disabled": formFieldProps.isDisabled || void 0,
+			"data-is-disabled": formFieldProps.isDisabled || void 0,
+			"data-has-selection": hasValue || void 0,
+			"data-rac": "",
+			className: clsx("group/static-input group/input-content group/select-content relative flex items-center gap-input-gap-input-text-to-elements", applyMinInputWidth && "min-w-input-width-min-width", inputBaseCva({
+				as,
+				variant
+			}), inputClassName),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex w-full items-center gap-input-gap-input-text-to-elements",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: clsx(inputSizeCva({
+						size,
+						as
+					}), "group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full"),
+					children: [leadingVisual && /* @__PURE__ */ jsx("div", {
+						className: "pointer-events-none shrink-0",
+						children: leadingVisual
+					}), /* @__PURE__ */ jsxs("div", {
+						className: clsx("flex w-full truncate", as === "floating" && "flex-col", as === "filter" && "gap-input-gap-input-text-to-elements", contentRowClassName),
+						children: [
+							as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
+								as,
+								size,
+								label: formFieldProps.label,
+								isRequired: formFieldProps.isRequired,
+								isDisabled: formFieldProps.isDisabled
+							}),
+							leadingContent && /* @__PURE__ */ jsx("div", {
+								className: "ml-input-side-default flex shrink-0 items-center",
+								children: leadingContent
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: clsx("w-full truncate", !hasValue && "text-text-default-3"),
+								children: [staticDisplayContent, shouldRenderFloatingLineSpacer && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" })]
+							})
+						]
+					})]
+				})
+			}), trailingContent && /* @__PURE__ */ jsx("div", {
+				className: clsx(inputSizeCva({
+					size,
+					as
+				}), "pointer-events-none flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
+				children: trailingContent
+			})]
+		})
+	});
+};
+//#endregion
+export { StaticInput };

package/dist/components/inputs/shared/input.cva.d.ts

@@ -12,6 +12,11 @@ export declare const inputSize: (props?: ({
 } & ClassProp) | undefined) => string;
 export interface InputSizeProps extends VariantProps<typeof inputSize> {
 }
+export declare const inputClearClass: (props?: ({
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputClearClassProps extends VariantProps<typeof inputClearClass> {
+}
 export declare const inputSide: (props?: ({
     size?: "small" | "default" | "extra-small" | "large" | null | undefined;
     type?: "left" | "right" | "var" | null | undefined;

package/dist/components/inputs/shared/input.cva.js

@@ -191,6 +191,15 @@ var inputSize = cva("", {
 		as: "default"
 	}
 });
+var inputClearClass = cva("", {
+	variants: { as: {
+		default: "",
+		floating: "",
+		filter: "",
+		inline: ""
+	} },
+	defaultVariants: { as: "default" }
+});
 var inputSide = cva("", {
 	variants: {
 		size: {
@@ -277,4 +286,4 @@ var useInputCva = () => {
 	};
 };
 //#endregion
-export { inputBase, inputSide, inputSize, useInputCva };
+export { inputBase, inputClearClass, inputSide, inputSize, useInputCva };

package/dist/components/inputs/shared/tooltipWrapper.cva.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
 //#region src/components/inputs/shared/tooltipWrapper.cva.ts
-var tooltipWrapperTrigger = cva("");
+var tooltipWrapperTrigger = cva("inline-flex");
 //#endregion
 export { tooltipWrapperTrigger };

package/dist/config/uiConfig.context.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { ButtonProps } from '../components/buttons/Button/Button';
 import { CheckboxProps } from '../components/inputs/Checkbox/Checkbox';
 import { DatePickerProps } from '../components/inputs/DateTime/DatePicker/DatePicker';
@@ -19,6 +19,7 @@ export declare namespace UIConfig {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
+        renderStaticInput: boolean;
         input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size">;
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
@@ -34,6 +35,9 @@ export declare namespace UIConfig {
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
         dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "shouldForceLeadingZeros" | "disableManualEntry" | "autoFixYear"> & {
+            calendarIcon?: ReactElement;
+            dateTimeIcon?: ReactElement;
+            timeIcon?: ReactElement;
             setDateValueOnDateSelection?: boolean;
         };
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;

package/dist/config/uiConfig.context.js

@@ -1,3 +1,6 @@
+import { CalendarIcon } from "../assets/icons/Calendar.js";
+import { ClockIcon } from "../assets/icons/Clock.js";
+import { DateTimeIcon } from "../assets/icons/DateTime.js";
 import { ObjectUtils } from "../utils/object.utils.js";
 import { useDeepCompareMemo } from "../hooks/useDeepCompare.js";
 import { jsx } from "react/jsx-runtime";
@@ -6,6 +9,7 @@ import { createContext, use } from "react";
 var UIConfig;
 (function(_UIConfig) {
 	const DEFAULT_CONFIG = {
+		renderStaticInput: true,
 		input: {
 			variant: "outlined",
 			as: "default",
@@ -47,6 +51,9 @@ var UIConfig;
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false,
 			autoFixYear: false,
+			calendarIcon: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-5" }),
+			dateTimeIcon: /* @__PURE__ */ jsx(DateTimeIcon, { className: "size-5" }),
+			timeIcon: /* @__PURE__ */ jsx(ClockIcon, { className: "size-6 text-interactive-text-secondary-idle" }),
 			setDateValueOnDateSelection: false
 		},
 		actionModal: {

package/dist/config/uiStyle.context.d.ts

@@ -11,7 +11,7 @@ import { FormFieldHelperVariantProps } from '../components/inputs/FormField/form
 import { RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
 import { SelectPopoverCva } from '../components/inputs/Selection/shared/selectDesktop.cva';
 import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
-import { InputBaseProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
+import { InputBaseProps, InputClearClassProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
 import { LabelBaseProps } from '../components/inputs/shared/label.cva';
 import { TooltipWrapperTriggerVariantProps } from '../components/inputs/shared/tooltipWrapper.cva';
 import { ToggleVariantProps } from '../components/inputs/Toggle/toggle.cva';
@@ -70,6 +70,7 @@ export declare namespace UIStyle {
         };
         input: {
             baseCva?: Cva<InputBaseProps>;
+            clearClassCva?: Cva<InputClearClassProps>;
             sizeCva?: Cva<InputSizeProps>;
             sideCva?: Cva<InputSideProps>;
         };

package/dist/utils/date-time.utils.d.ts

@@ -1,5 +1,15 @@
 import { CalendarDate, CalendarDateTime, DateValue, ZonedDateTime } from '@internationalized/date';
 export declare namespace DateTimeUtils {
+    function getDatePlaceholder(locale?: string): string;
+    function getTimePlaceholder(locale?: string): string;
+    function getDateTimePlaceholder(locale?: string): string;
+    function getDateRangePlaceholder(locale?: string): string;
+    function formatCalendarDateLocalized(calendarDate: CalendarDate, locale?: string): string;
+    function formatTimeLocalized(timeValue: {
+        hour: number;
+        minute: number;
+    }, locale?: string): string;
+    function formatCalendarDateTimeLocalized(calendarDateTime: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute">, locale?: string): string;
     function fromISOtoZonedDateTime(isoString: string): ZonedDateTime;
     function fromDateValueToISO(dateValue: DateValue): string;
     function fromLocalToZonedDateTime(date: Date): ZonedDateTime;

package/dist/utils/date-time.utils.js

@@ -1,7 +1,88 @@
-import { CalendarDate, CalendarDateTime, fromDate, getLocalTimeZone, parseAbsolute, parseAbsoluteToLocal } from "@internationalized/date";
+import { CalendarDate, CalendarDateTime, DateFormatter, fromDate, getLocalTimeZone, parseAbsolute, parseAbsoluteToLocal } from "@internationalized/date";
 //#region src/utils/date-time.utils.ts
 var DateTimeUtils;
 (function(_DateTimeUtils) {
+	const DATE_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22));
+	const TIME_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22, 13, 45));
+	const getDatePlaceholderFormatter = (locale) => new Intl.DateTimeFormat(locale, {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	});
+	const getTimePlaceholderFormatter = (locale) => new Intl.DateTimeFormat(locale, {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	});
+	const getResolvedLocale = (locale) => {
+		if (locale) return locale;
+		return new Intl.DateTimeFormat().resolvedOptions().locale;
+	};
+	const getDateFormatter = (locale) => new DateFormatter(getResolvedLocale(locale), {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric",
+		timeZone: "UTC"
+	});
+	const getTimeFormatter = (locale) => new DateFormatter(getResolvedLocale(locale), {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23",
+		timeZone: "UTC"
+	});
+	const getDateTimeFormatter = (locale) => new DateFormatter(getResolvedLocale(locale), {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23",
+		timeZone: "UTC"
+	});
+	const mapTypeToPlaceholder = (type) => {
+		switch (type) {
+			case "day": return "dd";
+			case "month": return "mm";
+			case "year": return "yyyy";
+			case "hour": return "hh";
+			case "minute": return "mm";
+			default: return null;
+		}
+	};
+	const formatPlaceholder = (formatter, sampleDate) => {
+		return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type) ?? part.value).join("");
+	};
+	function getDatePlaceholder(locale) {
+		return formatPlaceholder(getDatePlaceholderFormatter(locale), DATE_SAMPLE_DATE_UTC);
+	}
+	_DateTimeUtils.getDatePlaceholder = getDatePlaceholder;
+	function getTimePlaceholder(locale) {
+		return formatPlaceholder(getTimePlaceholderFormatter(locale), TIME_SAMPLE_DATE_UTC);
+	}
+	_DateTimeUtils.getTimePlaceholder = getTimePlaceholder;
+	function getDateTimePlaceholder(locale) {
+		return `${getDatePlaceholder(locale)}, ${getTimePlaceholder(locale)}`;
+	}
+	_DateTimeUtils.getDateTimePlaceholder = getDateTimePlaceholder;
+	function getDateRangePlaceholder(locale) {
+		const datePlaceholder = getDatePlaceholder(locale);
+		return `${datePlaceholder} – ${datePlaceholder}`;
+	}
+	_DateTimeUtils.getDateRangePlaceholder = getDateRangePlaceholder;
+	function formatCalendarDateLocalized(calendarDate, locale) {
+		return getDateFormatter(locale).format(calendarDate.toDate("UTC"));
+	}
+	_DateTimeUtils.formatCalendarDateLocalized = formatCalendarDateLocalized;
+	function formatTimeLocalized(timeValue, locale) {
+		const dateTime = new CalendarDateTime(2e3, 11, 22, timeValue.hour, timeValue.minute);
+		return getTimeFormatter(locale).format(dateTime.toDate("UTC"));
+	}
+	_DateTimeUtils.formatTimeLocalized = formatTimeLocalized;
+	function formatCalendarDateTimeLocalized(calendarDateTime, locale) {
+		const normalizedValue = new CalendarDateTime(calendarDateTime.year, calendarDateTime.month, calendarDateTime.day, calendarDateTime.hour, calendarDateTime.minute);
+		return getDateTimeFormatter(locale).format(normalizedValue.toDate("UTC"));
+	}
+	_DateTimeUtils.formatCalendarDateTimeLocalized = formatCalendarDateTimeLocalized;
 	function fromISOtoZonedDateTime(isoString) {
 		return parseAbsoluteToLocal(isoString);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.2.9-rc.15",
+  "version": "2.2.9-rc.17",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",