@povio/ui 2.2.11 → 2.3.0-rc.1

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

@@ -4,7 +4,7 @@ import { Typography } from "../../../text/Typography/Typography.js";
 import "../../../../config/i18n.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
-import { inputBase, inputSize } from "../../shared/input.cva.js";
+import { inputBase, inputClearClass, inputSize } from "../../shared/input.cva.js";
 import { SelectInputTags } from "./SelectInputTags.js";
 import { SelectContext } from "./select.context.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -14,9 +14,10 @@ import { Button, ComboBoxStateContext, Input } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectInput.tsx
-var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, onCloseComboBox, onBlur, ...props }) => {
+var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props }) => {
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputClearClassCva = UIStyle.useCva("input.clearClassCva", inputClearClass);
 	const { t } = useTranslation("ui");
 	const state = use(ComboBoxStateContext);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
@@ -44,9 +45,13 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 		if (e.key === "Enter" && !isMultiple && !isLoading && listItems.length === 1 && !listItems[0].isDisabled) {
 			e.preventDefault();
 			onChange(listItems[0].id);
+			if (fireBlurOnChange) onBlur?.({});
 			onCloseComboBox?.(state);
 		}
-		if (e.key === "Backspace" && isMultiple && fieldState.inputValue === "" && Array.isArray(fieldState.value) && fieldState.value.length > 0) onChange(fieldState.value.slice(0, -1));
+		if (e.key === "Backspace" && isMultiple && fieldState.inputValue === "" && Array.isArray(fieldState.value) && fieldState.value.length > 0) {
+			onChange(fieldState.value.slice(0, -1));
+			if (fireBlurOnChange) onBlur?.({});
+		}
 	};
 	const onClick = () => {
 		if (isDisabled) return;
@@ -66,6 +71,7 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 		}),
 		"data-rac": "",
 		"data-disabled": isDisabled || void 0,
+		"data-is-disabled": isDisabled || void 0,
 		"data-hovered": isHovered || void 0,
 		"data-focused": isOpen || isFocused || void 0,
 		"data-focus-within": isFocused || void 0,
@@ -75,7 +81,12 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 		"data-has-search": fieldState.searchValue !== "" || void 0,
 		"data-invalid": isInvalid || void 0,
 		"data-is-empty": isEmpty || void 0,
+		"data-is-filled": !isEmpty || void 0,
+		"data-is-required": isRequired || void 0,
+		"data-is-dirty": isDirty || void 0,
 		"data-select-input": "",
+		onMouseEnter,
+		onFocusCapture,
 		...hoverProps,
 		...focusWithinProps,
 		children: [
@@ -92,6 +103,10 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 						...headerProps,
 						labelProps
 					}),
+					leadingContent && /* @__PURE__ */ jsx("div", {
+						className: "ml-input-side-default flex shrink-0 items-center",
+						children: leadingContent
+					}),
 					(showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
 						className: clsx("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", !isSearchable && "pointer-events-none z-1"),
 						children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
@@ -125,9 +140,17 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 				]
 			}),
 			isClearable && /* @__PURE__ */ jsx(InputClear, {
-				onClear,
+				onClear: () => {
+					onClear();
+					if (fireBlurOnChange) onBlur?.({});
+				},
+				className: inputClearClassCva({ as }),
 				show: showClearButton
 			}),
+			trailingContent && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center",
+				children: trailingContent
+			}),
 			!hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
 				excludeFromTabOrder: true,
 				"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),

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, newItemRender, onLoadMore, className, onClose, ...props }: SelectListBoxProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,8 +7,8 @@ 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 }) => {
-	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll } = SelectContext.useSelect();
+var SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, totalItems, newItemRender, onLoadMore, className, onClose, ...props }) => {
+	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll, hasLoadMore } = SelectContext.useSelect();
 	const onSelectionChange = (value) => {
 		const ids = Array.from(value);
 		if (!isMultiple && ids.length === 0) {
@@ -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.d.ts

@@ -1,5 +1,5 @@
 import { Key } from 'react-aria-components';
 import { SelectBaseProps } from './SelectBase';
 type SelectMobileProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
-export declare const SelectMobile: <TKey extends Key = Key>({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }: SelectMobileProps<TKey>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectMobile: <TKey extends Key = Key>({ ref, error, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }: SelectMobileProps<TKey>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,8 +13,8 @@ import { useRef } from "react";
 import { DialogTrigger } from "react-aria-components";
 import { useLabel } from "react-aria";
 //#region src/components/inputs/Selection/shared/SelectMobile.tsx
-var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
-	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, size, collapseAfter, selectedTagsType } = props;
+var SelectMobile = ({ ref, error, 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, hideSearchIcon, isSearchable, isClearable, as, size, collapseAfter, selectedTagsType } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -57,6 +57,8 @@ 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", {
@@ -79,8 +81,12 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 				onBlur: void 0,
 				fieldProps,
 				headerProps,
+				leadingContent,
+				trailingContent,
 				collapseAfter,
-				selectedTagsType
+				selectedTagsType,
+				isRequired,
+				isDirty
 			}), /* @__PURE__ */ jsx(BottomSheet, {
 				isOpen,
 				onOpenChange: handleOpenChange,

package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts

@@ -0,0 +1,6 @@
+import { UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
+import { Key } from 'react-aria-components';
+import { SelectItem } from './select.types';
+export type QueryFn<TData = any> = (...args: any[]) => UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
+export type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
+export declare const getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => SelectItem<TKey>[];

package/dist/components/inputs/Selection/shared/querySelect.utils.js

@@ -0,0 +1,13 @@
+//#region src/components/inputs/Selection/shared/querySelect.utils.ts
+var getQueryItems = (data, queryMap) => {
+	if (!data) return [];
+	if (queryMap) return queryMap(data);
+	if (Array.isArray(data)) return data;
+	if (typeof data === "object" && data !== null) {
+		if ("items" in data && Array.isArray(data.items)) return data.items;
+		if ("pages" in data && Array.isArray(data.pages)) return data.pages.flatMap((page) => page && typeof page === "object" && "items" in page && Array.isArray(page.items) ? page.items : []);
+	}
+	return [];
+};
+//#endregion
+export { getQueryItems };

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

@@ -17,14 +17,15 @@ export declare namespace SelectContext {
         onClear: () => void;
         onSelectAll: () => void;
         onRemove: (val: Key) => void;
+        onBlur: () => void;
         listItems: ExtendedSelectItem[];
         selectableListItems: SelectItem[];
         selectedItems: SelectItem[];
         selectedIds: Key[];
         isMultiple: boolean;
     } & Pick<SelectBaseProps, "onInputChange" | "isLoading" | "hasLoadMore">;
-    export type ProviderProps = GroupedSelectProps & Pick<SelectBaseProps, "items" | "onInputChange" | "onSearchChange" | "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "onNewItemOption" | "isLoading" | "hasLoadMore" | "mapInitialToSelectItem" | "isSearchable" | "isClientSearchDisabled">;
-    export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, children, mapInitialToSelectItem, ...props }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
+    export type ProviderProps = GroupedSelectProps & Pick<SelectBaseProps, "items" | "onInputChange" | "onSearchChange" | "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "onNewItemOption" | "isLoading" | "hasLoadMore" | "mapInitialToSelectItem" | "isSearchable" | "isClientSearchDisabled" | "ignoreInputValueFiltering">;
+    export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, children, mapInitialToSelectItem, ...props }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
     export const useSelect: () => Type;
     export {};
 }

package/dist/components/inputs/Selection/shared/select.context.js

@@ -10,7 +10,7 @@ var SelectContext;
 		id: item.id,
 		label: item.label ?? item.name ?? ""
 	});
-	_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
+	_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
 		const isMultiple = props.selectionMode === "multiple";
 		const initialSelectedItems = useMemo(() => {
 			if (!props.initialSelection) return null;
@@ -42,9 +42,14 @@ var SelectContext;
 			newItemMinLength,
 			isLoading,
 			hasLoadMore,
-			isClientSearchDisabled
+			isClientSearchDisabled: ignoreInputValueFiltering ?? isClientSearchDisabled
 		});
-		const selectedItems = useMemo(() => allItems.filter(({ id }) => Array.isArray(fieldState.value) ? fieldState.value.includes(id) : id === fieldState.value), [allItems, fieldState.value]);
+		const selectedItems = useMemo(() => {
+			const getItem = (id) => allItems.find((item) => item.id === id) ?? null;
+			if (Array.isArray(fieldState.value)) return fieldState.value.map((id) => getItem(id)).filter((item) => item !== null);
+			const selectedItem = fieldState.value != null ? getItem(fieldState.value) : null;
+			return selectedItem ? [selectedItem] : [];
+		}, [allItems, fieldState.value]);
 		const selectedIds = useMemo(() => selectedItems.map(({ id }) => id), [selectedItems]);
 		const getItem = useCallback((value) => allItems.find((item) => item && item.id === value) ?? null, [allItems]);
 		const updateValue = useCallback((value) => {
@@ -84,7 +89,7 @@ var SelectContext;
 			else updateValue(value);
 		}, [props.value]);
 		useEffect(() => {
-			if (!isMultiple && fieldState.value && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
+			if (!isMultiple && props.value !== null && props.value !== void 0 && fieldState.value !== null && fieldState.value !== void 0 && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
 		}, [allListItems]);
 		const handleInputChange = useCallback((inputValue) => {
 			const newFieldState = {
@@ -144,6 +149,22 @@ var SelectContext;
 			fieldState.value,
 			onChange
 		]);
+		const onBlur = useCallback(() => {
+			if (props.isSearchable && isMultiple && fieldState.searchValue !== "") {
+				const newFieldState = {
+					...fieldState,
+					inputValue: "",
+					searchValue: ""
+				};
+				setFieldState(newFieldState);
+				emitStateChanges(newFieldState);
+				setShowAll(true);
+			}
+		}, [
+			props.isSearchable,
+			isMultiple,
+			fieldState
+		]);
 		const value = useMemo(() => ({
 			fieldState,
 			isOpen,
@@ -154,6 +175,7 @@ var SelectContext;
 			onClear,
 			onSelectAll,
 			onRemove,
+			onBlur,
 			listItems,
 			selectableListItems,
 			selectedItems,
@@ -171,6 +193,7 @@ var SelectContext;
 			onClear,
 			onSelectAll,
 			onRemove,
+			onBlur,
 			listItems,
 			selectableListItems,
 			selectedIds,

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

@@ -1,11 +1,11 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
 import { ControlProps } from '../../shared/form.types';
 export interface SelectItem<TKey extends Key = Key> {
     id: TKey;
     label: string;
-    content?: string | ReactElement;
+    content?: string | ReactNode;
     isDisabled?: boolean;
 }
 export interface ExtendedSelectItem<TKey extends Key = Key> extends SelectItem<TKey> {
@@ -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/components/inputs/Selection/shared/staticSelect.utils.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { Key } from 'react-aria-components';
+import { SelectBaseProps } from './SelectBase';
+import { DefaultInitialSelectItem, SelectItem } from './select.types';
+interface GetStaticSelectValueOptions<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> {
+    items: SelectItem<TKey>[];
+    value: TKey | TKey[] | null | undefined;
+    selectionMode: SelectBaseProps<TKey>["selectionMode"];
+    initialSelection?: TInitialSelectItem | TInitialSelectItem[] | null;
+    mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
+    showSelectionContent?: boolean;
+    isDisabled?: boolean;
+    collapseAfter?: SelectBaseProps<TKey>["collapseAfter"];
+    selectedTagsType?: SelectBaseProps<TKey>["selectedTagsType"];
+}
+interface StaticSelectValueResult<TKey extends Key = Key> {
+    selectedItem: SelectItem<TKey> | null;
+    selectedItems: SelectItem<TKey>[];
+    displayValue: ReactNode;
+    isEmpty: boolean;
+}
+export declare const getStaticSelectValue: <TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>({ items, value, selectionMode, initialSelection, mapInitialToSelectItem, showSelectionContent, isDisabled, collapseAfter, selectedTagsType, }: GetStaticSelectValueOptions<TKey, TInitialSelectItem>) => StaticSelectValueResult<TKey>;
+export {};

package/dist/components/inputs/Selection/shared/staticSelect.utils.js

@@ -0,0 +1,37 @@
+import { SelectInputTags } from "./SelectInputTags.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inputs/Selection/shared/staticSelect.utils.tsx
+var getStaticSelectValue = ({ items, value, selectionMode, initialSelection, mapInitialToSelectItem = ((item) => ({
+	id: item.id,
+	label: item.label ?? item.name ?? ""
+})), showSelectionContent, isDisabled, collapseAfter, selectedTagsType }) => {
+	const initialSelectedItems = initialSelection ? (Array.isArray(initialSelection) ? initialSelection : [initialSelection]).map((item) => mapInitialToSelectItem(item)) : [];
+	const allItemsMap = /* @__PURE__ */ new Map();
+	[...initialSelectedItems, ...items].forEach((item) => allItemsMap.set(item.id, item));
+	const getItem = (id) => allItemsMap.get(id) ?? null;
+	const selectedItems = Array.isArray(value) ? value.map((id) => getItem(id)).filter((item) => item != null) : [];
+	const selectedItem = !Array.isArray(value) && value != null ? getItem(value) : null;
+	if (selectionMode === "multiple") return {
+		selectedItem,
+		selectedItems,
+		displayValue: selectedItems.length > 0 ? /* @__PURE__ */ jsx(SelectInputTags, {
+			selectedItems,
+			isDisabled,
+			collapseAfter,
+			selectedTagsType,
+			onRemove: () => void 0
+		}) : "",
+		isEmpty: selectedItems.length === 0
+	};
+	return {
+		selectedItem,
+		selectedItems,
+		displayValue: selectedItem != null ? showSelectionContent && selectedItem.content ? selectedItem.content : /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1 truncate",
+			children: selectedItem.label
+		}) : "",
+		isEmpty: selectedItem == null
+	};
+};
+//#endregion
+export { getStaticSelectValue };

package/dist/components/inputs/Selection/shared/staticSelect.utils.spec.d.ts

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

package/dist/components/inputs/Skeleton/InputFrame.d.ts

@@ -0,0 +1,77 @@
+import { FC, FocusEventHandler, MouseEventHandler, ReactElement, ReactNode, Ref, SVGProps } from 'react';
+import { InlineIconButtonProps } from '../../buttons/InlineIconButton/InlineIconButton';
+import { FormFieldProps } from '../FormField/FormField';
+import { FormFieldHeaderProps } from '../FormField/FormFieldHeader';
+import { InputVariantProps } from '../shared/input.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
+type InputFrameIcon = FC<SVGProps<SVGSVGElement>> | ReactElement;
+interface InputFrameAction {
+    icon: InlineIconButtonProps["icon"];
+    onClick: () => void;
+    altText: string;
+    className?: string;
+}
+interface InputFrameDataAttributes {
+    dataDisabled?: boolean;
+    dataHasSearch?: boolean;
+    dataHasSelection?: boolean;
+    dataInvalid?: boolean;
+    dataIsDirty?: boolean;
+    dataIsDisabled?: boolean;
+    dataIsEmpty?: boolean;
+    dataIsFilled?: boolean;
+    dataIsRequired?: boolean;
+}
+type InputFrameDataAttributeProps = {
+    "data-disabled"?: boolean;
+    "data-has-search"?: boolean;
+    "data-has-selection"?: boolean;
+    "data-invalid"?: boolean;
+    "data-is-dirty"?: boolean;
+    "data-is-disabled"?: boolean;
+    "data-is-empty"?: boolean;
+    "data-is-filled"?: boolean;
+    "data-is-required"?: boolean;
+};
+type InputFrameChildProps = InputFrameDataAttributeProps & {
+    id: string;
+};
+type InputFrameChildren = ReactNode | ((childProps: InputFrameChildProps) => ReactNode);
+type InputFrameLabelPlacement = "content-wrapper" | "content-row";
+type InputFrameActionContentPlacement = "content-wrapper" | "content-row";
+export interface InputFrameProps extends InputVariantProps, Partial<FormFieldProps> {
+    ref?: Ref<HTMLDivElement>;
+    children: InputFrameChildren;
+    formFieldRef?: Ref<HTMLDivElement>;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+    labelProps?: FormFieldHeaderProps["labelProps"];
+    headerProps?: FormFieldHeaderProps;
+    leadingContent?: ReactNode;
+    leadingIcon?: InputFrameIcon;
+    actionContent?: ReactNode;
+    actionContentPlacement?: InputFrameActionContentPlacement;
+    trailingContent?: ReactNode;
+    trailingIcon?: InputFrameIcon;
+    trailingAction?: ReactNode;
+    unit?: string;
+    isLoading?: boolean;
+    action?: InputFrameAction;
+    isClearable?: boolean;
+    showClear?: boolean;
+    renderStatic?: boolean;
+    onStaticInteract?: (shouldFocus: boolean) => void;
+    clearClassName?: string;
+    onClear?: () => void;
+    dataAttributes?: InputFrameDataAttributes;
+    typographySize?: TypographyVariantProps["size"];
+    id?: string;
+    inputClassName?: string;
+    contentClassName?: string;
+    contentWrapperClassName?: string;
+    wrapContentAndTrailing?: boolean;
+    labelPlacement?: InputFrameLabelPlacement;
+    trailingClassName?: string;
+}
+export declare const InputFrame: (props: InputFrameProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,200 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { typography } from "../../text/Typography/typography.cva.js";
+import { Loader } from "../../status/Loader/Loader.js";
+import { UIConfig } from "../../../config/uiConfig.context.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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { isValidElement, useId } from "react";
+//#region src/components/inputs/Skeleton/InputFrame.tsx
+var InputFrame = (props) => {
+	const ui = UIConfig.useConfig();
+	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 generatedInputId = useId();
+	const { ref, children, formFieldRef, labelProps: labelPropsProp, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, actionContentPlacement = "content-wrapper", trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, wrapContentAndTrailing, labelPlacement = "content-wrapper", trailingClassName, onMouseEnter, onFocusCapture, variant: variantProp, as: asProp, size: sizeProp } = props;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const variant = variantProp ?? ui.input.variant;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const hasClear = !!(isClearableProp ?? ui.input.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 baseLabelProps = headerProps?.labelProps ?? labelPropsProp;
+	const inputId = idProp ?? baseLabelProps?.htmlFor ?? `input-frame_${generatedInputId}`;
+	const labelProps = {
+		...baseLabelProps,
+		htmlFor: inputId
+	};
+	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 ? {
+		...headerProps,
+		labelProps
+	} : {
+		label: label ?? "",
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const labelContent = as && ["filter", "floating"].includes(as) ? /* @__PURE__ */ jsx(FormFieldLabel, {
+		as,
+		size,
+		...resolvedHeaderProps
+	}) : null;
+	const resolvedContentWrapperClassName = contentWrapperClassName ?? inputContentWrapperCva({ as });
+	const contentRow = /* @__PURE__ */ jsxs("div", {
+		className: clsx("group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements", 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)
+			}),
+			labelPlacement === "content-row" && labelContent,
+			actionContentPlacement === "content-row" && actionContent,
+			/* @__PURE__ */ jsxs("div", {
+				className: resolvedContentWrapperClassName,
+				children: [
+					labelPlacement === "content-wrapper" && labelContent,
+					actionContentPlacement === "content-wrapper" && actionContent,
+					typeof children === "function" ? children({
+						...dataAttributeProps,
+						id: inputId
+					}) : children
+				]
+			})
+		]
+	});
+	const trailingRow = hasTrailingContent ? /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex items-center gap-input-gap-trailing-elements", 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
+		]
+	}) : null;
+	const inputFrameContent = wrapContentAndTrailing ? /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center gap-input-gap-input-text-to-elements",
+		children: [contentRow, trailingRow]
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [contentRow, trailingRow] });
+	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: (event) => {
+				onMouseEnter?.(event);
+				if (renderStatic) onStaticInteract?.(false);
+			},
+			onFocusCapture: (event) => {
+				onFocusCapture?.(event);
+				if (renderStatic) onStaticInteract?.(true);
+			},
+			children: /* @__PURE__ */ jsx("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);
+				},
+				"data-rac": "",
+				children: inputFrameContent
+			})
+		})
+	});
+};
+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 };