@povio/ui 2.2.9-rc.26 → 2.2.9-rc.27

package/dist/components/inputs/Skeleton/InputFrame.js

@@ -0,0 +1,167 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { typography } from "../../text/Typography/typography.cva.js";
+import { Loader } from "../../status/Loader/Loader.js";
+import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
+import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
+import { InputClear } from "../shared/InputClear.js";
+import { inputBase, inputContentWrapper, inputSize } from "../shared/input.cva.js";
+import { FormField } from "../FormField/FormField.js";
+import { TooltipWrapper } from "../shared/TooltipWrapper.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { isValidElement } from "react";
+//#region src/components/inputs/Skeleton/InputFrame.tsx
+var InputFrame = ({ ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, trailingClassName, variant, as, size }) => {
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
+	const typographyCva = UIStyle.useCva("typography.cva", typography);
+	const hasClear = !!isClearable;
+	const isLeadingIconElement = leadingIcon && isValidElement(leadingIcon);
+	const isTrailingIconElement = trailingIcon && isValidElement(trailingIcon);
+	const hasTrailingContent = hasClear || !!trailingContent || !!unit || !!isLoading || !!action || !!trailingIcon || !!trailingAction;
+	const isTrailingInteractive = !!action || !!trailingAction || !!isTrailingIconElement || hasClear && !!showClear || !!trailingContent;
+	const dataAttributeProps = getInputFrameDataAttributeProps(dataAttributes);
+	const formFieldProps = {
+		error,
+		label: label ?? "",
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName,
+		className
+	};
+	const resolvedHeaderProps = headerProps ?? {
+		label: label ?? "",
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			...dataAttributeProps,
+			ref: formFieldRef,
+			as,
+			labelProps,
+			tabIndex: as === "inline" ? -1 : void 0,
+			onMouseEnter: () => {
+				if (renderStatic) onStaticInteract?.(false);
+			},
+			onFocusCapture: () => {
+				if (renderStatic) onStaticInteract?.(true);
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				ref,
+				...dataAttributeProps,
+				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
+					variant,
+					as
+				}), inputClassName),
+				tabIndex: renderStatic ? isDisabled ? -1 : 0 : void 0,
+				onFocus: () => {
+					if (renderStatic) onStaticInteract?.(true);
+				},
+				onClick: () => {
+					if (renderStatic) onStaticInteract?.(true);
+				},
+				onPointerDown: () => {
+					if (renderStatic) onStaticInteract?.(true);
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: clsx("group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full", inputSizeCva({
+						size,
+						as
+					}), typographySize && typographyCva({ size: typographySize }), contentClassName),
+					children: [
+						leadingContent,
+						leadingIcon && /* @__PURE__ */ jsx("div", {
+							className: clsx(!isLeadingIconElement && "pointer-events-none"),
+							children: renderIconVisual(leadingIcon)
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: clsx(inputContentWrapperCva({ as }), contentWrapperClassName),
+							children: [
+								as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
+									as,
+									size,
+									...resolvedHeaderProps
+								}),
+								actionContent,
+								children
+							]
+						})
+					]
+				}), hasTrailingContent && /* @__PURE__ */ jsxs("div", {
+					className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
+						size,
+						as
+					}), !isTrailingInteractive && "pointer-events-none", trailingClassName),
+					children: [
+						hasClear && /* @__PURE__ */ jsx(InputClear, {
+							onClear: () => onClear?.(),
+							className: clearClassName,
+							show: !!showClear,
+							renderStatic
+						}),
+						trailingContent,
+						unit && /* @__PURE__ */ jsx("span", {
+							className: typographyCva({
+								size: "label-2",
+								sizeMobile: "label-2",
+								variant: "prominent-1",
+								className: "text-text-default-3"
+							}),
+							children: unit
+						}),
+						isLoading && /* @__PURE__ */ jsx("div", {
+							className: "inline-flex",
+							children: /* @__PURE__ */ jsx(Loader, {})
+						}),
+						!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
+							color: "secondary",
+							icon: action.icon,
+							isDisabled,
+							onPress: action.onClick,
+							excludeFromTabOrder: true,
+							label: action.altText,
+							className: clsx("border-0!", action.className)
+						}),
+						!isLoading && !action && trailingIcon && renderIconVisual(trailingIcon),
+						trailingAction
+					]
+				})]
+			})
+		})
+	});
+};
+var renderIconVisual = (icon) => {
+	if (isValidElement(icon)) return icon;
+	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
+};
+var getInputFrameDataAttributeProps = (dataAttributes) => ({
+	"data-is-empty": dataAttributes?.dataIsEmpty || void 0,
+	"data-is-filled": dataAttributes?.dataIsFilled || void 0,
+	"data-is-dirty": dataAttributes?.dataIsDirty || void 0,
+	"data-is-required": dataAttributes?.dataIsRequired || void 0,
+	"data-is-disabled": dataAttributes?.dataIsDisabled || void 0,
+	"data-disabled": dataAttributes?.dataDisabled || void 0,
+	"data-has-search": dataAttributes?.dataHasSearch || void 0,
+	"data-invalid": dataAttributes?.dataInvalid || void 0,
+	"data-has-selection": dataAttributes?.dataHasSelection || void 0
+});
+//#endregion
+export { InputFrame };

package/dist/components/inputs/shared/InputClear.d.ts

@@ -2,8 +2,9 @@ import { CSSProperties } from 'react';
 interface InputClearProps {
     onClear: () => void;
     show?: boolean;
+    renderStatic?: boolean;
     className?: string;
     style?: CSSProperties;
 }
-export declare const InputClear: ({ onClear, className, style, show }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputClear: ({ onClear, className, style, show, renderStatic }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,7 +5,19 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
-var InputClear = ({ onClear, className, style, show }) => {
+var InputClear = ({ onClear, className, style, show, renderStatic }) => {
+	if (renderStatic) return /* @__PURE__ */ jsx("div", {
+		className: clsx("size-6 shrink-0", className),
+		style
+	});
+	return /* @__PURE__ */ jsx(InputClearButton, {
+		onClear,
+		className,
+		style,
+		show
+	});
+};
+var InputClearButton = ({ onClear, className, style, show }) => {
 	const { t } = useTranslation("ui");
 	return /* @__PURE__ */ jsx(InlineIconButton, {
 		color: "secondary",

package/dist/index.js

@@ -67,9 +67,9 @@ import { ToggleButton } from "./components/buttons/ToggleButton/ToggleButton.js"
 import { Checkbox } from "./components/inputs/Checkbox/Checkbox.js";
 import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
 import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
+import { DateTimeUtils } from "./utils/date-time.utils.js";
 import { FormField } from "./components/inputs/FormField/FormField.js";
 import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
-import { DateTimeUtils } from "./utils/date-time.utils.js";
 import { DatePicker } from "./components/inputs/DateTime/DatePicker/DatePicker.js";
 import { Tag } from "./components/text/Tag/Tag.js";
 import { useIntersectionObserver } from "./hooks/useIntersectionObserver.js";

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

@@ -3,11 +3,18 @@ export declare namespace DateTimeUtils {
     interface LocalizedDateFormatOptions {
         shouldForceLeadingZeros?: boolean;
     }
+    export interface LocalizedDatePart {
+        type: Intl.DateTimeFormatPartTypes;
+        value: string;
+        placeholder: string;
+        isPlaceholder: boolean;
+    }
     export function getDatePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
     export function getTimePlaceholder(locale?: string): string;
     export function getDateTimePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
     export function getDateRangePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
     export function formatCalendarDateLocalized(calendarDate: CalendarDate, locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function formatCalendarDatePartsLocalized(calendarDate?: CalendarDate | null, locale?: string, options?: LocalizedDateFormatOptions): LocalizedDatePart[];
     export function formatTimeLocalized(timeValue: {
         hour: number;
         minute: number;

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

@@ -67,6 +67,18 @@ var DateTimeUtils;
 			return part.value;
 		}).join(""));
 	};
+	const formatLocalizedDatePartList = (formatter, date, isPlaceholder, options) => {
+		const locale = formatter.resolvedOptions().locale;
+		return formatter.formatToParts(date).map((part) => {
+			const value = options?.shouldForceLeadingZeros === false && (part.type === "day" || part.type === "month") ? removeLeadingZero(part.value) : part.value.replace(/\s+/gu, "");
+			return {
+				type: part.type,
+				value,
+				placeholder: mapTypeToPlaceholder(part.type, locale) ?? part.value.replace(/\s+/gu, ""),
+				isPlaceholder
+			};
+		});
+	};
 	function getDatePlaceholder(locale, options) {
 		return formatPlaceholder(getDatePlaceholderFormatter(locale, options), DATE_SAMPLE_DATE_UTC);
 	}
@@ -88,6 +100,10 @@ var DateTimeUtils;
 		return formatLocalizedDateParts(getDateFormatter(locale, options), calendarDate.toDate("UTC"), options);
 	}
 	_DateTimeUtils.formatCalendarDateLocalized = formatCalendarDateLocalized;
+	function formatCalendarDatePartsLocalized(calendarDate, locale, options) {
+		return formatLocalizedDatePartList(getDateFormatter(locale, options), calendarDate?.toDate("UTC") ?? DATE_SAMPLE_DATE_UTC, !calendarDate, options);
+	}
+	_DateTimeUtils.formatCalendarDatePartsLocalized = formatCalendarDatePartsLocalized;
 	function formatTimeLocalized(timeValue, locale) {
 		const dateTime = new CalendarDateTime(2e3, 11, 22, timeValue.hour, timeValue.minute);
 		return getTimeFormatter(locale).format(dateTime.toDate("UTC"));

package/package.json

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