@povio/ui 2.2.9-rc.10 → 2.2.9-rc.12

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

@@ -5,6 +5,7 @@ import { Typography } from "../../../text/Typography/Typography.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { DateField } from "./DateField.js";
+import { datePickerInputContentRow } from "./datePickerInput.cva.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { inputBase, inputSize } from "../../shared/input.cva.js";
@@ -18,6 +19,7 @@ import { getLocalTimeZone, now, toCalendarDateTime, today } from "@international
 var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, ...props }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const [canClear, setCanClear] = useState(false);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
@@ -101,7 +103,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 				as,
 				...headerProps
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-input-gap-input-text-to-elements",
+				className: datePickerInputContentRowCva({ size }),
 				children: [
 					disableManualEntry && /* @__PURE__ */ jsx(Button, {
 						onPress: onOpenDropdown,

package/dist/components/inputs/DateTime/shared/datePickerInput.cva.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputSizeProps } from '../../shared/input.cva';
+export declare const datePickerInputContentRow: (props?: ({
+    size?: "small" | "default" | "extra-small" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DatePickerInputContentRowProps extends VariantProps<typeof datePickerInputContentRow>, InputSizeProps {
+}

package/dist/components/inputs/DateTime/shared/datePickerInput.cva.js

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/DateTime/shared/datePickerInput.cva.ts
+var datePickerInputContentRow = cva("flex items-center gap-input-gap-input-text-to-elements", {
+	variants: { size: {
+		"extra-small": "",
+		small: "",
+		default: "",
+		large: ""
+	} },
+	defaultVariants: { size: "default" }
+});
+//#endregion
+export { datePickerInputContentRow };

package/dist/components/inputs/FormField/FormField.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, Ref } from 'react';
+import { FocusEventHandler, MouseEventHandler, PropsWithChildren, Ref } from 'react';
 import { FormFieldErrorProps } from './FormFieldError';
 import { FormFieldHeaderProps } from './FormFieldHeader';
 import { TextInputProps } from '../Input/TextInput/TextInput';
@@ -13,8 +13,8 @@ interface FormFieldComponentProps extends PropsWithChildren<FormFieldProps> {
     labelProps?: FormFieldHeaderProps["labelProps"];
     as?: TextInputProps["as"];
     tabIndex?: number;
-    onMouseEnter?: () => void;
-    onFocusCapture?: () => void;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onFocusCapture?: FocusEventHandler<HTMLDivElement>;
 }
 export declare const FormField: ({ ref, as, label, tooltipText, helperText, isRequired, rightContent, isDisabled, error, hideLabel, headerClassName, errorClassName, children, className, labelProps, isHeaderHidden, tabIndex, onMouseEnter, onFocusCapture, }: FormFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -84,6 +84,8 @@ var TextInputBase = (props) => {
 					...rest
 				}), inputClassName),
 				onClick: () => inputRef.current?.focus(),
+				"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+				"data-is-required": isRequired || void 0,
 				children: /* @__PURE__ */ jsx(InputContent, {
 					...inputContentProps,
 					headerProps,

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js

@@ -11,7 +11,7 @@ var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, ...props
 		const extractedData = Array.isArray(data) ? data : data.pages.flatMap((page) => page.items ?? []);
 		return queryMap?.(extractedData) ?? extractedData;
 	};
-	const { items, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
+	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
 		query,
 		queryParams,
 		queryOptions,
@@ -26,10 +26,11 @@ var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, ...props
 		onSearchChange: setSearch,
 		isClientSearchDisabled: true,
 		isLoading,
+		totalItems,
 		onMouseEnter: handleEnableQuery,
 		onFocusCapture: handleEnableQuery,
 		hasLoadMore: hasNextPage,
-		onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0
+		onLoadMore: fetchNextPage
 	});
 };
 //#endregion

package/dist/components/inputs/Selection/Select/QuerySelect.js

@@ -8,7 +8,7 @@ import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/QuerySelect.tsx
 var QuerySelect = ({ query, queryParams, queryOptions, queryMap, ...props }) => {
 	const ui = UIConfig.useConfig();
-	const { items, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
+	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
 		query,
 		queryParams,
 		queryOptions,
@@ -25,8 +25,9 @@ var QuerySelect = ({ query, queryParams, queryOptions, queryMap, ...props }) =>
 				ref: mergeRefs(ref, field.ref),
 				items,
 				isLoading,
+				totalItems,
 				hasLoadMore: hasNextPage,
-				onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0,
+				onLoadMore: fetchNextPage,
 				value: field.value,
 				onChange: (value) => {
 					field.onChange(value);
@@ -46,6 +47,7 @@ var QuerySelect = ({ query, queryParams, queryOptions, queryMap, ...props }) =>
 		...restProps,
 		items,
 		isLoading,
+		totalItems,
 		hasLoadMore: hasNextPage,
 		onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0,
 		onMouseEnter: handleEnableQuery,

package/dist/components/inputs/Selection/shared/SelectBase.js

@@ -17,7 +17,7 @@ var SelectBase = (dProps) => {
 		isClearable: dProps.isClearable ?? ui.input.isClearable,
 		isSearchable: dProps.isSearchable ?? ui.select.isSearchable,
 		selectedTagsType: dProps.selectedTagsType ?? ui.select.selectedTagsType,
-		ignoreTriggerWidth: dProps.virtualizerOptions || dProps.items.length > 100 ? false : dProps.ignoreTriggerWidth ?? false,
+		ignoreTriggerWidth: dProps.virtualizerOptions || (dProps.totalItems ?? 0) > 100 || dProps.hasLoadMore ? false : dProps.ignoreTriggerWidth ?? false,
 		collapseAfter: dProps.collapseAfter ?? ui.select.collapseAfter,
 		hideSearchIcon: dProps.hideSearchIcon ?? ui.select.hideSearchIcon,
 		fireBlurOnChange: dProps.fireBlurOnChange ?? ui.select.fireBlurOnChange,

package/dist/components/inputs/Selection/shared/SelectDesktop.js

@@ -6,6 +6,7 @@ import "./useSelectItems.js";
 import { SelectContext } from "./select.context.js";
 import { SelectInput } from "./SelectInput.js";
 import { SelectListBox } from "./SelectListBox.js";
+import { selectPopoverCva } from "./selectDesktop.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Fragment as Fragment$1, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -16,6 +17,7 @@ import { mergeRefs } from "@react-aria/utils";
 var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
 	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
 	const popoverCva = UIStyle.useCva("popover.cva", popover);
+	const selectPopoverCva$1 = UIStyle.useCva("select.popoverCva", selectPopoverCva);
 	const formFieldProps = {
 		error,
 		label,
@@ -113,14 +115,14 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 					className: clsx("w-full", containerClassName)
 				},
 				as,
+				onMouseEnter,
+				onFocusCapture,
 				ref: wrapperRef,
 				children: [customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, {
 					...dialogTriggerProps,
 					children: /* @__PURE__ */ jsx("div", {
 						...fieldProps,
 						ref: mergeRefs(ref, triggerRef),
-						onMouseEnter,
-						onFocusCapture,
 						children: customTrigger
 					})
 				}) : /* @__PURE__ */ jsx(SelectInput, {
@@ -153,7 +155,7 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 					triggerRef,
 					isOpen,
 					onOpenChange: setIsOpen,
-					className: "my-4 outline-none",
+					className: selectPopoverCva$1({}),
 					style: { width: !ignoreTriggerWidth ? popoverWidth : void 0 },
 					offset: 0,
 					children: /* @__PURE__ */ jsx(SelectListBox, {

package/dist/components/inputs/Selection/shared/SelectListBox.d.ts

@@ -1,9 +1,9 @@
 import { AriaListBoxProps } from 'react-aria';
 import { SelectBaseProps } from './SelectBase';
 import { SelectItem } from './select.types';
-export interface SelectListBoxProps extends Pick<SelectBaseProps, "label" | "newItemRender" | "onLoadMore" | "selectionMode" | "isSearchable" | "virtualizerOptions">, Omit<AriaListBoxProps<SelectItem>, "children" | "aria-label" | "selectionMode" | "items" | "selectedKeys" | "onSelectionChange" | "escapeKeyBehavior" | "shouldSelectOnPressUp" | "label"> {
+export interface SelectListBoxProps extends Pick<SelectBaseProps, "label" | "newItemRender" | "onLoadMore" | "selectionMode" | "isSearchable" | "virtualizerOptions" | "totalItems" | "hasLoadMore">, Omit<AriaListBoxProps<SelectItem>, "children" | "aria-label" | "selectionMode" | "items" | "selectedKeys" | "onSelectionChange" | "escapeKeyBehavior" | "shouldSelectOnPressUp" | "label"> {
     className?: string;
     isScrollable?: boolean;
     onClose?: () => void;
 }
-export declare const SelectListBox: ({ label, selectionMode, isSearchable, isScrollable, virtualizerOptions, newItemRender, onLoadMore, className, onClose, ...props }: SelectListBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectListBox: ({ label, selectionMode, isSearchable, isScrollable, virtualizerOptions, totalItems, hasLoadMore, newItemRender, onLoadMore, className, onClose, ...props }: SelectListBoxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/shared/SelectListBox.js

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { ListBox, ListLayout, Virtualizer } from "react-aria-components";
 //#region src/components/inputs/Selection/shared/SelectListBox.tsx
-var SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, newItemRender, onLoadMore, className, onClose, ...props }) => {
+var SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, totalItems, hasLoadMore, newItemRender, onLoadMore, className, onClose, ...props }) => {
 	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll } = SelectContext.useSelect();
 	const onSelectionChange = (value) => {
 		const ids = Array.from(value);
@@ -42,7 +42,7 @@ var SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true,
 			newItemRender
 		}, item.id);
 	};
-	if (virtualizerOptions || listItems.length > 100) return /* @__PURE__ */ jsx(Virtualizer, {
+	if (virtualizerOptions || (totalItems ?? listItems.length) > 100 || hasLoadMore) return /* @__PURE__ */ jsx(Virtualizer, {
 		layout: ListLayout,
 		layoutOptions: virtualizerOptions,
 		children: /* @__PURE__ */ jsx(ListBox, {

package/dist/components/inputs/Selection/shared/SelectMobile.js

@@ -57,13 +57,13 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 		as,
 		labelProps,
 		className: clsx("w-full", containerClassName),
+		onMouseEnter,
+		onFocusCapture,
 		children: /* @__PURE__ */ jsxs(DialogTrigger, {
 			...dialogTriggerProps,
 			children: [customTrigger ? /* @__PURE__ */ jsx("div", {
 				...fieldProps,
 				ref,
-				onMouseEnter,
-				onFocusCapture,
 				children: customTrigger
 			}) : /* @__PURE__ */ jsx(SelectInput, {
 				ref,

package/dist/components/inputs/Selection/shared/select.types.d.ts

@@ -54,6 +54,7 @@ export interface SelectAsyncProps {
     onLoadMore?: () => void;
 }
 export interface SelectVirtualizationProps {
+    totalItems?: number;
     virtualizerOptions?: {
         rowHeight?: number;
         estimatedRowHeight?: number;

package/dist/components/inputs/Selection/shared/selectDesktop.cva.d.ts

@@ -0,0 +1,3 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const selectPopoverCva: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export type SelectPopoverCva = VariantProps<typeof selectPopoverCva>;

package/dist/components/inputs/Selection/shared/selectDesktop.cva.js

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/Selection/shared/selectDesktop.cva.ts
+var selectPopoverCva = cva("my-4 outline-none");
+//#endregion
+export { selectPopoverCva };

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

@@ -4,10 +4,13 @@ import { BreadcrumbChevronVariantProps, BreadcrumbIconVariantProps, BreadcrumbIt
 import { ButtonVariantProps } from '../components/buttons/Button/button.cva';
 import { PillButtonVariants } from '../components/buttons/PillButton/pillButton.cva';
 import { CheckboxIconVariantProps, CheckboxVariantProps } from '../components/inputs/Checkbox/checkbox.cva';
+import { DatePickerInputContentRowProps } from '../components/inputs/DateTime/shared/datePickerInput.cva';
 import { FormFieldErrorVariantProps } from '../components/inputs/FormField/formFieldError.cva';
 import { FormFieldHeaderVariantProps } from '../components/inputs/FormField/formFieldHeader.cva';
 import { FormFieldHelperVariantProps } from '../components/inputs/FormField/formFieldHelper.cva';
 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 { LabelBaseProps } from '../components/inputs/shared/label.cva';
 import { ToggleVariantProps } from '../components/inputs/Toggle/toggle.cva';
@@ -25,7 +28,6 @@ import { LinkVariantProps } from '../components/text/Link/link.cva';
 import { TagVariantProps } from '../components/text/Tag/tag.cva';
 import { TypographyVariantProps } from '../components/text/Typography/typography.cva';
 import { CompoundMapper, ConfigSchema } from '../utils/compoundMapper';
-import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
 export declare namespace UIStyle {
     export type Cva<T> = (props: (T & ClassProp) | ClassProp) => string;
     type OptionKey = {
@@ -70,6 +72,9 @@ export declare namespace UIStyle {
             sizeCva?: Cva<InputSizeProps>;
             sideCva?: Cva<InputSideProps>;
         };
+        datePickerInput: {
+            contentRowCva?: Cva<DatePickerInputContentRowProps>;
+        };
         label: {
             cva?: Cva<LabelBaseProps>;
             typography?: CompoundMapper<TypographyVariantProps, LabelBaseProps>;
@@ -155,6 +160,7 @@ export declare namespace UIStyle {
         };
         select: {
             listBoxItemCva?: Cva<SelectListBoxItemCva>;
+            popoverCva?: Cva<SelectPopoverCva>;
         };
     }
     interface ProviderProps {

package/dist/hooks/useQueryAutocomplete.d.ts

@@ -18,6 +18,7 @@ export declare const useQueryAutocomplete: <TQueryFn extends QueryFn, TKey exten
     isQueryEnabled: boolean;
     handleEnableQuery: () => void;
     items: SelectItem<TKey>[];
+    totalItems: any;
     hasNextPage: boolean;
     fetchNextPage: (() => Promise<unknown>) | ((options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<any, Error>>) | undefined;
     isFetchingNextPage: boolean;

package/dist/hooks/useQueryAutocomplete.js

@@ -22,6 +22,7 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 	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 +33,7 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 		isQueryEnabled,
 		handleEnableQuery,
 		items,
+		totalItems,
 		hasNextPage,
 		fetchNextPage,
 		isFetchingNextPage

package/package.json

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