@povio/ui 2.3.0 → 2.3.2-rc.1

package/dist/components/inputs/DateTime/shared/datePickerTodayIcon.js

@@ -0,0 +1,117 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { button, buttonContent, buttonIconSize, buttonSize } from "../../../buttons/Button/button.cva.js";
+import { IconButton } from "../../../buttons/IconButton/IconButton.js";
+import { TodayIcon } from "../../../../assets/icons/Today.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { cloneElement, isValidElement } from "react";
+//#region src/components/inputs/DateTime/shared/datePickerTodayIcon.tsx
+var getDatePickerTodayIcon = (todayIcon) => {
+	if (!todayIcon) return null;
+	return todayIcon === true ? TodayIcon : todayIcon;
+};
+var renderDatePickerTodayIcon = (todayIcon, options) => {
+	const icon = getDatePickerTodayIcon(todayIcon);
+	if (!icon) return;
+	const { className, isDisabled, onPress, renderStatic, size = "none" } = options ?? {};
+	const todayIconClassName = className ?? "relative z-1";
+	if (renderStatic) return /* @__PURE__ */ jsx(StaticDatePickerTodayIcon, {
+		icon,
+		className: todayIconClassName,
+		isDisabled,
+		size
+	});
+	return /* @__PURE__ */ jsx(IconButton, {
+		label: "",
+		icon,
+		size,
+		isDisabled,
+		onPress,
+		className: todayIconClassName
+	});
+};
+var StaticDatePickerTodayIcon = (t0) => {
+	const $ = c(19);
+	const { icon, className, isDisabled, size } = t0;
+	const uiConfig = UIConfig.useConfig();
+	const buttonCva = UIStyle.useCva("button.cva", button);
+	const buttonSizeCva = UIStyle.useCva("button.sizeCva", buttonSize);
+	const buttonContentCva = UIStyle.useCva("button.contentCva", buttonContent);
+	const buttonIconSizeCva = UIStyle.useCva("button.iconSize", buttonIconSize);
+	let t1;
+	if ($[0] !== buttonIconSizeCva || $[1] !== icon || $[2] !== size) {
+		const iconClassName = buttonIconSizeCva({
+			size,
+			className: "shrink-0"
+		});
+		bb0: {
+			if (isValidElement(icon)) {
+				t1 = cloneElement(icon, { className: clsx(iconClassName, icon.props.className) });
+				break bb0;
+			}
+			const Icon = icon;
+			let t2;
+			if ($[4] !== Icon || $[5] !== iconClassName) {
+				t2 = /* @__PURE__ */ jsx(Icon, { className: iconClassName });
+				$[4] = Icon;
+				$[5] = iconClassName;
+				$[6] = t2;
+			} else t2 = $[6];
+			t1 = t2;
+		}
+		$[0] = buttonIconSizeCva;
+		$[1] = icon;
+		$[2] = size;
+		$[3] = t1;
+	} else t1 = $[3];
+	const renderedIcon = t1;
+	const variant = uiConfig.button.variant;
+	let t2;
+	if ($[7] !== buttonContentCva || $[8] !== buttonCva || $[9] !== buttonSizeCva || $[10] !== className || $[11] !== size || $[12] !== variant) {
+		t2 = clsx(buttonCva({
+			className,
+			size,
+			variant,
+			width: "hug"
+		}), buttonSizeCva({
+			iconOnly: true,
+			size
+		}), buttonContentCva({
+			iconOnly: true,
+			iconPosition: "left",
+			size
+		}));
+		$[7] = buttonContentCva;
+		$[8] = buttonCva;
+		$[9] = buttonSizeCva;
+		$[10] = className;
+		$[11] = size;
+		$[12] = variant;
+		$[13] = t2;
+	} else t2 = $[13];
+	let t3;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx("span", { className: "sr-only" });
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== isDisabled || $[16] !== renderedIcon || $[17] !== t2) {
+		t4 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-hidden": "true",
+			tabIndex: -1,
+			disabled: isDisabled,
+			className: t2,
+			children: [renderedIcon, t3]
+		});
+		$[15] = isDisabled;
+		$[16] = renderedIcon;
+		$[17] = t2;
+		$[18] = t4;
+	} else t4 = $[18];
+	return t4;
+};
+//#endregion
+export { renderDatePickerTodayIcon };

package/dist/components/inputs/DateTime/shared/dateSegment.utils.d.ts

@@ -0,0 +1,2 @@
+import { DateSegment } from '@react-stately/datepicker';
+export declare const getTimeSegmentValue: (segment: DateSegment | undefined, fallbackValue?: number) => number;

package/dist/components/inputs/DateTime/shared/dateSegment.utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/DateTime/shared/staticDateTimeSegments.d.ts

@@ -0,0 +1,39 @@
+import { CalendarDate } from '@internationalized/date';
+import { ReactNode } from 'react';
+import { DateValue, TimeValue } from 'react-aria';
+interface StaticSegmentProps {
+    isDisabled?: boolean;
+    hidePlaceholder?: boolean;
+}
+interface StaticManualEntryPlaceholderProps {
+    disableManualEntry?: boolean;
+    placeholder?: ReactNode;
+}
+type StaticDateGranularity = "day" | "month" | "year";
+interface StaticCalendarDateSegmentsProps extends StaticSegmentProps, StaticManualEntryPlaceholderProps {
+    value?: CalendarDate | null;
+    locale: string;
+    shouldForceLeadingZeros?: boolean;
+    dateGranularity?: StaticDateGranularity;
+}
+interface StaticCalendarDateTimeSegmentsProps extends StaticSegmentProps, StaticManualEntryPlaceholderProps {
+    value?: DateValue | null;
+    locale: string;
+    shouldForceLeadingZeros?: boolean;
+}
+interface StaticDateRangeSegmentsProps extends StaticSegmentProps, StaticManualEntryPlaceholderProps {
+    start?: CalendarDate | null;
+    end?: CalendarDate | null;
+    locale: string;
+    shouldForceLeadingZeros?: boolean;
+}
+interface StaticTimeSegmentsProps extends StaticSegmentProps, StaticManualEntryPlaceholderProps {
+    value?: TimeValue | null;
+    locale: string;
+}
+export declare const getStaticCalendarDateSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, dateGranularity, }: StaticCalendarDateSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticCalendarDateTimeSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, }: StaticCalendarDateTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticDateRangeSegments: ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, }: StaticDateRangeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticTimeSegments: ({ value, locale, isDisabled, hidePlaceholder, disableManualEntry, placeholder, }: StaticTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticDateTimePlaceholder: (placeholder: ReactNode) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/DateTime/shared/staticDateTimeSegments.js

@@ -0,0 +1,85 @@
+import { Typography } from "../../../text/Typography/Typography.js";
+import { DateSegmentItemView } from "./DateSegmentItem.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/DateTime/shared/staticDateTimeSegments.tsx
+var getStaticCalendarDateSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, dateGranularity = "day" }) => {
+	if (disableManualEntry && placeholder && !value) return getStaticDateTimePlaceholder(placeholder);
+	return renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(value, locale, { shouldForceLeadingZeros }), {
+		isDisabled,
+		hidePlaceholder,
+		dateGranularity
+	});
+};
+var getStaticCalendarDateTimeSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder }) => {
+	const hasValue = !!(value && "hour" in value);
+	if (disableManualEntry && placeholder && !hasValue) return getStaticDateTimePlaceholder(placeholder);
+	return renderStaticDateTimeParts(DateTimeUtils.formatCalendarDateTimePartsLocalized(hasValue ? value : null, locale, { shouldForceLeadingZeros }), {
+		isDisabled,
+		hidePlaceholder,
+		segmentRole: "spinbutton"
+	});
+};
+var getStaticDateRangeSegments = ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder }) => {
+	if (disableManualEntry && placeholder && !start && !end) return getStaticDateTimePlaceholder(placeholder);
+	const showSeparator = !hidePlaceholder;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(start, locale, { shouldForceLeadingZeros }), {
+			isDisabled,
+			hidePlaceholder: hidePlaceholder && !start
+		}),
+		showSeparator && /* @__PURE__ */ jsx("span", {
+			className: isDisabled ? "pointer-events-none select-none text-interactive-text-secondary-disabled" : "pointer-events-none select-none",
+			children: "–"
+		}),
+		renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(end, locale, { shouldForceLeadingZeros }), {
+			isDisabled,
+			hidePlaceholder: hidePlaceholder && !end
+		})
+	] });
+};
+var getStaticTimeSegments = ({ value, locale, isDisabled, hidePlaceholder, disableManualEntry, placeholder }) => {
+	if (disableManualEntry && placeholder && !value) return getStaticDateTimePlaceholder(placeholder);
+	return renderStaticDateTimeParts(DateTimeUtils.formatTimePartsLocalized(value, locale), {
+		isDisabled,
+		hidePlaceholder,
+		timePickerOnly: true
+	});
+};
+var getStaticDateTimePlaceholder = (placeholder) => /* @__PURE__ */ jsx(Typography, {
+	size: "label-1",
+	className: "text-text-default-3",
+	children: placeholder
+});
+var renderStaticDateTimeParts = (parts, options) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex",
+		children: getStaticDateTimePartsToRender(parts, options.dateGranularity).map((part, index) => /* @__PURE__ */ jsx(DateSegmentItemView, {
+			type: part.type,
+			text: part.value,
+			placeholder: part.placeholder,
+			isPlaceholder: part.isPlaceholder && part.type !== "literal",
+			isInputEmpty: parts.some((item) => item.type !== "literal" && item.isPlaceholder),
+			isDisabled: options.isDisabled,
+			timePickerOnly: options.timePickerOnly,
+			hidePlaceholder: options.hidePlaceholder,
+			role: part.type === "literal" ? void 0 : options.segmentRole
+		}, index))
+	});
+};
+var getStaticDateTimePartsToRender = (parts, dateGranularity = "day") => {
+	const segments = [];
+	for (const part of parts) if (part.type !== "literal") {
+		if (isStaticDatePartVisible(part.type, dateGranularity)) segments.push(part);
+	} else if (segments.length > 0 && segments.at(-1)?.type !== "literal") segments.push(part);
+	if (segments.at(-1)?.type === "literal") segments.pop();
+	return segments;
+};
+var isStaticDatePartVisible = (type, dateGranularity) => {
+	if (dateGranularity === "day") return true;
+	if (dateGranularity === "month") return type !== "day";
+	if (dateGranularity === "year") return type === "year";
+	return true;
+};
+//#endregion
+export { getStaticCalendarDateSegments, getStaticCalendarDateTimeSegments, getStaticDateRangeSegments, getStaticTimeSegments };

package/dist/components/inputs/DateTime/shared/staticDateTimeSegments.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/File/FileUpload.js

@@ -6,6 +6,7 @@ import { FileCardList } from "./shared/FileCardList.js";
 import { FileUploadContentEmpty } from "./shared/FileUploadContentEmpty.js";
 import { FileUploadContent } from "./shared/FileUploadContent.js";
 import { fileUploadDropZone } from "./shared/fileUpload.cva.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useState } from "react";
@@ -16,7 +17,7 @@ import { Controller } from "react-hook-form";
 //#region src/components/inputs/File/FileUpload.tsx
 var FileUploadBase = (props) => {
 	const { t } = useTranslation("ui");
-	const { ref: _ref, label, tooltipText, variant = "vertical", as = "button", helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, allowsMultiple = false, hideLabel, acceptedFileTypes, clearOnSuccess, emptyText = t(($) => $.ui.fileUpload.emptyText), uploadText = t(($) => $.ui.fileUpload.uploadText), browseText = t(($) => $.ui.fileUpload.browse), fileUpload, fileRemove, children, listRenderer, onInvalidFileType, defaultState, ...rest } = props;
+	const { ref: _ref, label, tooltipText, variant = "vertical", as = "button", helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, allowsMultiple = false, hideLabel, acceptedFileTypes, clearOnSuccess, emptyText = t(($) => $.ui.fileUpload.emptyText), uploadText = t(($_0) => $_0.ui.fileUpload.uploadText), browseText = t(($_1) => $_1.ui.fileUpload.browse), fileUpload, fileRemove, children, listRenderer, onInvalidFileType, defaultState, ...rest } = props;
 	const ui = UIConfig.useConfig();
 	const getInitialState = () => {
 		if (props.value != null && props.value.length > 0) return props.value;
@@ -46,76 +47,76 @@ var FileUploadBase = (props) => {
 	const labelProps = useLabels({ "aria-label": label });
 	const handleUpload = async (inputFiles) => {
 		const acceptedFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
-		const invalidFiles = inputFiles.filter((file) => !FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
-		if (invalidFiles.length > 0) if (allowsMultiple) onInvalidFileType?.(invalidFiles.map((file) => file.name));
+		const invalidFiles = inputFiles.filter((file_0) => !FileUtils.isFileTypeAccepted(file_0, acceptedFileTypes));
+		if (invalidFiles.length > 0) if (allowsMultiple) onInvalidFileType?.(invalidFiles.map((file_1) => file_1.name));
 		else onInvalidFileType?.(invalidFiles[0].name);
 		if (acceptedFiles.length === 0 || !fileUpload) return;
 		if (!allowsMultiple) setUploadState([]);
 		const newUploadState = [];
-		acceptedFiles.forEach((file) => {
+		acceptedFiles.forEach((file_2) => {
 			newUploadState.push({
 				state: "uploading",
 				progress: 0,
-				file,
+				file: file_2,
 				abortController: new AbortController()
 			});
 		});
 		const startIndex = allowsMultiple ? uploadState.length : 0;
 		setUploadState((prev) => [...prev, ...newUploadState]);
 		const promises = [];
-		acceptedFiles.forEach(async (file, index) => {
+		acceptedFiles.forEach(async (file_3, index_0) => {
 			promises.push(fileUpload({ data: {
-				resourceName: file.name,
-				fileName: file.name,
-				fileSize: file.size,
+				resourceName: file_3.name,
+				fileName: file_3.name,
+				fileSize: file_3.size,
 				method: "put"
-			} }, file, {
+			} }, file_3, {
 				onUploadProgress: ({ loaded, total }) => {
 					if (total == null) return;
 					const progress = Math.round(loaded / total * 100);
-					setUploadState((prev) => prev.map((state, i) => i === startIndex + index ? {
+					setUploadState((prev_0) => prev_0.map((state, i) => i === startIndex + index_0 ? {
 						...state,
 						progress
 					} : state));
 				},
-				abortController: newUploadState[index]?.abortController
+				abortController: newUploadState[index_0]?.abortController
 			}));
 		});
 		try {
-			(await Promise.all(promises)).forEach((res, index) => {
-				setUploadState((prev) => prev.map((state, i) => i === startIndex + index ? {
-					...state,
+			(await Promise.all(promises)).forEach((res, index_1) => {
+				setUploadState((prev_2) => prev_2.map((state_0, i_1) => i_1 === startIndex + index_1 ? {
+					...state_0,
 					state: "uploaded",
 					id: res.id
-				} : state));
+				} : state_0));
 			});
 			if (clearOnSuccess) setUploadState([]);
-		} catch (error) {
-			setUploadState((prev) => prev.filter((_, i) => i < startIndex));
-			throw error;
+		} catch (error_0) {
+			setUploadState((prev_1) => prev_1.filter((_, i_0) => i_0 < startIndex));
+			throw error_0;
 		}
 	};
-	const handleSelect = (inputFiles) => {
-		if (!inputFiles) return;
-		handleUpload(Array.from(inputFiles));
+	const handleSelect = (inputFiles_0) => {
+		if (!inputFiles_0) return;
+		handleUpload(Array.from(inputFiles_0));
 	};
 	const handleDrop = async (e) => {
 		if (!e.items) return;
-		const promises = [];
-		e.items.forEach((item) => {
-			if (item.kind === "file") promises.push(item.getFile());
+		const promises_0 = [];
+		e.items.forEach((item_0) => {
+			if (item_0.kind === "file") promises_0.push(item_0.getFile());
 		});
-		handleUpload(await Promise.all(promises));
+		handleUpload(await Promise.all(promises_0));
 	};
 	const handleRemove = useCallback((id) => {
 		fileRemove?.({ id });
-		setUploadState((prev) => prev.filter((state) => state.id !== id));
+		setUploadState((prev_3) => prev_3.filter((state_1) => state_1.id !== id));
 	}, [fileRemove]);
-	const handleCancelUpload = useCallback((index) => {
-		const findState = uploadState[index];
+	const handleCancelUpload = useCallback((index_2) => {
+		const findState = uploadState[index_2];
 		if (findState) {
 			findState.abortController?.abort("canceled by user");
-			setUploadState((prev) => prev.filter((_, i) => i !== index));
+			setUploadState((prev_4) => prev_4.filter((__0, i_2) => i_2 !== index_2));
 		}
 	}, [uploadState]);
 	return /* @__PURE__ */ jsxs(FormField, {
@@ -128,6 +129,7 @@ var FileUploadBase = (props) => {
 				...rest,
 				"data-rac": "",
 				"data-disabled": isDisabled || void 0,
+				"data-is-disabled": isDisabled || void 0,
 				"data-invalid": !!error || void 0,
 				"data-multiple": allowsMultiple || void 0,
 				"data-has-files": uploadState.length > 0 || void 0,
@@ -182,22 +184,63 @@ var FileUploadBase = (props) => {
 	});
 };
 var FileUpload = (props) => {
+	const $ = c(15);
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref, ...innerProps } = props;
-		return /* @__PURE__ */ jsx(Controller, {
-			control: formControl.control,
-			name: formControl.name,
-			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(FileUploadBase, {
-				...innerProps,
-				ref: mergeRefs(ref, field.ref),
-				value: field.value,
-				onChange: field.onChange,
-				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message
-			})
-		});
+		let formControl;
+		let innerProps;
+		let ref;
+		if ($[0] !== props) {
+			({formControl, ref, ...innerProps} = props);
+			$[0] = props;
+			$[1] = formControl;
+			$[2] = innerProps;
+			$[3] = ref;
+		} else {
+			formControl = $[1];
+			innerProps = $[2];
+			ref = $[3];
+		}
+		let t0;
+		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
+			t0 = (t1) => {
+				const { field, fieldState: t2 } = t1;
+				const { error } = t2;
+				return /* @__PURE__ */ jsx(FileUploadBase, {
+					...innerProps,
+					ref: mergeRefs(ref, field.ref),
+					value: field.value,
+					onChange: field.onChange,
+					isDisabled: field.disabled || props.isDisabled,
+					error: props.error ?? error?.message
+				});
+			};
+			$[4] = innerProps;
+			$[5] = props.error;
+			$[6] = props.isDisabled;
+			$[7] = ref;
+			$[8] = t0;
+		} else t0 = $[8];
+		let t1;
+		if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Controller, {
+				control: formControl.control,
+				name: formControl.name,
+				render: t0
+			});
+			$[9] = formControl.control;
+			$[10] = formControl.name;
+			$[11] = t0;
+			$[12] = t1;
+		} else t1 = $[12];
+		return t1;
 	}
-	return /* @__PURE__ */ jsx(FileUploadBase, { ...props });
+	let t0;
+	if ($[13] !== props) {
+		t0 = /* @__PURE__ */ jsx(FileUploadBase, { ...props });
+		$[13] = props;
+		$[14] = t0;
+	} else t0 = $[14];
+	return t0;
 };
 //#endregion
 export { FileUpload };

package/dist/components/inputs/File/FileUploadContainer.js

@@ -1,14 +1,22 @@
 import { FileUpload } from "./FileUpload.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/File/FileUploadContainer.tsx
 var FileUploadContainer = (props) => {
-	return /* @__PURE__ */ jsx(FileUpload, {
-		label: "",
-		hideLabel: true,
-		variant: "vertical",
-		as: "button",
-		...props
-	});
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(FileUpload, {
+			label: "",
+			hideLabel: true,
+			variant: "vertical",
+			as: "button",
+			...props
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
 };
 //#endregion
 export { FileUploadContainer };