@povio/ui 2.2.9-rc.3 → 2.2.9-rc.30

package/dist/hooks/useQueryAutocomplete.js

@@ -1,10 +1,19 @@
+import { ApiQueryUtils } from "../utils/query.utils.js";
 import { useMemo, useState } from "react";
 //#region src/hooks/useQueryAutocomplete.ts
+var isFilterSearchParams = (params) => {
+	return typeof params === "object" && params !== null && "filter" in params;
+};
 var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search }) => {
 	const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState);
 	const queryResult = query(search === void 0 ? queryParams : {
+		...queryParams,
+		limit: queryParams?.limit ?? ApiQueryUtils.DEFAULT_LIMIT,
 		search,
-		...queryParams
+		...isFilterSearchParams(queryParams) ? { filter: {
+			...queryParams.filter,
+			search
+		} } : {}
 	}, {
 		...queryOptions,
 		enabled: isQueryEnabled && (queryOptions?.enabled ?? true)
@@ -14,14 +23,14 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 	const isInfiniteQueryResult = (result) => {
 		return "hasNextPage" in result && "fetchNextPage" in result;
 	};
-	const isInfiniteQuery = isInfiniteQueryResult(queryResult);
 	const handleEnableQuery = () => {
 		setIsQueryEnabled(true);
 	};
-	const infiniteQueryResult = isInfiniteQuery ? queryResult : void 0;
+	const infiniteQueryResult = isInfiniteQueryResult(queryResult) ? queryResult : void 0;
 	const hasNextPage = infiniteQueryResult?.hasNextPage ?? false;
 	const fetchNextPage = infiniteQueryResult?.fetchNextPage;
 	const isFetchingNextPage = infiniteQueryResult?.isFetchingNextPage ?? false;
+	const totalItems = infiniteQueryResult?.data?.pages?.[0]?.totalItems;
 	const items = useMemo(() => {
 		if (!data) return [];
 		return mapItems(data);
@@ -32,6 +41,7 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 		isQueryEnabled,
 		handleEnableQuery,
 		items,
+		totalItems,
 		hasNextPage,
 		fetchNextPage,
 		isFetchingNextPage

package/dist/index.d.ts

@@ -78,6 +78,8 @@ export type { FormFieldProps } from './components/inputs/FormField/FormField';
 export { FormField } from './components/inputs/FormField/FormField';
 export type { ControlledNumberInputProps, NumberInputProps } from './components/inputs/Input/NumberInput/NumberInput';
 export { NumberInput } from './components/inputs/Input/NumberInput/NumberInput';
+export type { ControlledNumberRangeInputProps, NumberRangeInputProps, NumberRangeValue, } from './components/inputs/Input/NumberRangeInput/NumberRangeInput';
+export { NumberRangeInput } from './components/inputs/Input/NumberRangeInput/NumberRangeInput';
 export type { ControlledPasswordInputProps, PasswordInputProps, } from './components/inputs/Input/PasswordInput/PasswordInput';
 export { PasswordInput } from './components/inputs/Input/PasswordInput/PasswordInput';
 export type { ControlledTextAreaProps, TextAreaProps } from './components/inputs/Input/TextArea/TextArea';
@@ -94,11 +96,16 @@ export type { RadioVariantProps } from './components/inputs/RadioGroup/radio.cva
 export type { AutocompleteProps, ControlledAutocompleteProps, } from './components/inputs/Selection/Autocomplete/Autocomplete';
 export { Autocomplete } from './components/inputs/Selection/Autocomplete/Autocomplete';
 export { QueryAutocomplete } from './components/inputs/Selection/Autocomplete/QueryAutocomplete';
+export type { SelectBaseProps } from './components/inputs/Selection/shared/SelectBase';
+export type { DefaultInitialSelectItem, SelectAsyncProps, SelectItem, } from './components/inputs/Selection/shared/select.types';
+export type { QuerySelectProps } from './components/inputs/Selection/Select/QuerySelect';
+export { QuerySelect } from './components/inputs/Selection/Select/QuerySelect';
 export type { ControlledSelectProps, SelectProps } from './components/inputs/Selection/Select/Select';
 export { Select } from './components/inputs/Selection/Select/Select';
 export type { ControlledSliderProps, SliderProps } from './components/inputs/Slider/Slider';
 export { Slider } from './components/inputs/Slider/Slider';
 export type { InputVariantProps } from './components/inputs/shared/input.cva';
+export type { TooltipWrapperTriggerVariantProps } from './components/inputs/shared/tooltipWrapper.cva';
 export type { ControlledToggleProps, ToggleProps } from './components/inputs/Toggle/Toggle';
 export { Toggle } from './components/inputs/Toggle/Toggle';
 export type { MenuProps } from './components/Menu/Menu';

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";
@@ -85,6 +85,7 @@ import { FileUpload } from "./components/inputs/File/FileUpload.js";
 import { FileUploadContainer } from "./components/inputs/File/FileUploadContainer.js";
 import { InputUpload } from "./components/inputs/File/InputUpload.js";
 import { NumberInput } from "./components/inputs/Input/NumberInput/NumberInput.js";
+import { NumberRangeInput } from "./components/inputs/Input/NumberRangeInput/NumberRangeInput.js";
 import { PasswordInput } from "./components/inputs/Input/PasswordInput/PasswordInput.js";
 import { TextArea } from "./components/inputs/Input/TextArea/TextArea.js";
 import { Autocomplete } from "./components/inputs/Selection/Autocomplete/Autocomplete.js";
@@ -92,6 +93,7 @@ import { QueryAutocomplete } from "./components/inputs/Selection/Autocomplete/Qu
 import { Slider } from "./components/inputs/Slider/Slider.js";
 import { Toggle } from "./components/inputs/Toggle/Toggle.js";
 import { Segment } from "./components/segment/Segment.js";
+import { QuerySelect } from "./components/inputs/Selection/Select/QuerySelect.js";
 import { ResponsivePopover } from "./components/overlays/ResponsivePopover/ResponsivePopover.js";
 import { StringUtils } from "./utils/string.utils.js";
 import { dynamicInputs } from "./helpers/dynamicInputs.js";
@@ -135,4 +137,4 @@ import { useTableColumnConfig } from "./hooks/useTableColumnConfig.js";
 import { ArrayUtils } from "./utils/array.utils.js";
 import { QueriesUtils } from "./utils/queries.utils.js";
 import { RoutingUtils } from "./utils/routing.utils.js";
-export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIRouter, UIStyle, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, compoundMapper, dynamicColumns, dynamicInputs, isEqual, logger, ns, resources, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };
+export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberRangeInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, QuerySelect, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIRouter, UIStyle, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, compoundMapper, dynamicColumns, dynamicInputs, isEqual, logger, ns, resources, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };

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

@@ -1,14 +1,35 @@
 import { CalendarDate, CalendarDateTime, DateValue, ZonedDateTime } from '@internationalized/date';
 export declare namespace DateTimeUtils {
-    function fromISOtoZonedDateTime(isoString: string): ZonedDateTime;
-    function fromDateValueToISO(dateValue: DateValue): string;
-    function fromLocalToZonedDateTime(date: Date): ZonedDateTime;
-    function fromDateValueToLocal(dateValue: DateValue): Date;
-    function fromCalendarDateToUTCISO(calendarDate: CalendarDate, options?: {
+    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;
+    }, locale?: string): string;
+    export function formatCalendarDateTimeLocalized(calendarDateTime: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute">, locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function fromISOtoZonedDateTime(isoString: string): ZonedDateTime;
+    export function fromDateValueToISO(dateValue: DateValue): string;
+    export function fromLocalToZonedDateTime(date: Date): ZonedDateTime;
+    export function fromDateValueToLocal(dateValue: DateValue): Date;
+    export function fromCalendarDateToUTCISO(calendarDate: CalendarDate, options?: {
         endOfDay?: boolean;
     }): string;
-    function fromUTCISOToCalendarDate(isoString: string): CalendarDate;
-    function fromCalendarDateTimeToUTCISO(calendarDateTime: CalendarDateTime): string;
-    function fromUTCISOToCalendarDateTime(isoString: string): CalendarDateTime;
-    function formatTextDateToCalendarDateTime(textDate: string | null): CalendarDateTime | null;
+    export function fromUTCISOToCalendarDate(isoString: string): CalendarDate;
+    export function fromCalendarDateTimeToUTCISO(calendarDateTime: CalendarDateTime): string;
+    export function fromUTCISOToCalendarDateTime(isoString: string): CalendarDateTime;
+    export function formatTextDateToCalendarDateTime(textDate: string | null): CalendarDateTime | null;
+    export {};
 }

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

@@ -1,7 +1,119 @@
-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 getDayMonthFormat = (shouldForceLeadingZeros = false) => shouldForceLeadingZeros ? "2-digit" : "numeric";
+	const getDatePlaceholderFormatter = (locale, options) => new Intl.DateTimeFormat(locale, {
+		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		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, options) => new Intl.DateTimeFormat(getResolvedLocale(locale), {
+		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		year: "numeric",
+		timeZone: "UTC"
+	});
+	const getTimeFormatter = (locale) => new DateFormatter(getResolvedLocale(locale), {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23",
+		timeZone: "UTC"
+	});
+	const getDateTimeFormatter = (locale, options) => new Intl.DateTimeFormat(getResolvedLocale(locale), {
+		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23",
+		timeZone: "UTC"
+	});
+	const repeatLocalizedFieldLabel = (type, length, locale) => {
+		const placeholderChar = new Intl.DisplayNames(getResolvedLocale(locale), { type: "dateTimeField" }).of(type)?.trim().charAt(0).toLocaleLowerCase(getResolvedLocale(locale));
+		if (!placeholderChar) return null;
+		return placeholderChar.repeat(length);
+	};
+	const mapTypeToPlaceholder = (type, locale) => {
+		switch (type) {
+			case "day": return repeatLocalizedFieldLabel(type, 2, locale);
+			case "month": return repeatLocalizedFieldLabel(type, 2, locale);
+			case "year": return repeatLocalizedFieldLabel(type, 4, locale);
+			case "hour": return "hh";
+			case "minute": return "mm";
+			default: return null;
+		}
+	};
+	const formatPlaceholder = (formatter, sampleDate) => {
+		return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type, formatter.resolvedOptions().locale) ?? part.value.replace(/\s+/gu, "")).join("");
+	};
+	const removeLeadingZero = (value) => value.replace(/^0+(?=\d)/u, "");
+	const removeDateSeparatorSpacing = (value) => value.replace(/([./-])\s+(?=\d)/gu, "$1");
+	const formatLocalizedDateParts = (formatter, date, options) => {
+		if (options?.shouldForceLeadingZeros !== false) return removeDateSeparatorSpacing(formatter.format(date));
+		return removeDateSeparatorSpacing(formatter.formatToParts(date).map((part) => {
+			if (part.type === "day" || part.type === "month") return removeLeadingZero(part.value);
+			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);
+	}
+	_DateTimeUtils.getDatePlaceholder = getDatePlaceholder;
+	function getTimePlaceholder(locale) {
+		return formatPlaceholder(getTimePlaceholderFormatter(locale), TIME_SAMPLE_DATE_UTC);
+	}
+	_DateTimeUtils.getTimePlaceholder = getTimePlaceholder;
+	function getDateTimePlaceholder(locale, options) {
+		return `${getDatePlaceholder(locale, options)}, ${getTimePlaceholder(locale)}`;
+	}
+	_DateTimeUtils.getDateTimePlaceholder = getDateTimePlaceholder;
+	function getDateRangePlaceholder(locale, options) {
+		const datePlaceholder = getDatePlaceholder(locale, options);
+		return `${datePlaceholder} – ${datePlaceholder}`;
+	}
+	_DateTimeUtils.getDateRangePlaceholder = getDateRangePlaceholder;
+	function formatCalendarDateLocalized(calendarDate, locale, options) {
+		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"));
+	}
+	_DateTimeUtils.formatTimeLocalized = formatTimeLocalized;
+	function formatCalendarDateTimeLocalized(calendarDateTime, locale, options) {
+		const normalizedValue = new CalendarDateTime(calendarDateTime.year, calendarDateTime.month, calendarDateTime.day, calendarDateTime.hour, calendarDateTime.minute);
+		return formatLocalizedDateParts(getDateTimeFormatter(locale, options), normalizedValue.toDate("UTC"), options);
+	}
+	_DateTimeUtils.formatCalendarDateTimeLocalized = formatCalendarDateTimeLocalized;
 	function fromISOtoZonedDateTime(isoString) {
 		return parseAbsoluteToLocal(isoString);
 	}

package/dist/utils/query.utils.d.ts

@@ -0,0 +1,4 @@
+export declare namespace ApiQueryUtils {
+    const DEFAULT_LIMIT = 20;
+    const DEFAULT_PAGE = 1;
+}

package/dist/utils/query.utils.js

@@ -0,0 +1,8 @@
+//#region src/utils/query.utils.ts
+var ApiQueryUtils;
+(function(_ApiQueryUtils) {
+	_ApiQueryUtils.DEFAULT_LIMIT = 20;
+	_ApiQueryUtils.DEFAULT_PAGE = 1;
+})(ApiQueryUtils || (ApiQueryUtils = {}));
+//#endregion
+export { ApiQueryUtils };

package/package.json

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