@povio/ui 2.3.3 → 3.0.0-rc.2

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/Selection/shared/useSelectItems.js

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { c } from "react/compiler-runtime";
 import { useFilter } from "react-aria-components";
 //#region src/components/inputs/Selection/shared/useSelectItems.tsx
 var SelectAllItemId = "all-item-id";
@@ -24,61 +24,121 @@ var ReservedItemIds = [
 	NewItemId,
 	LoadingItemId
 ];
-function useSelectItems({ initialSelectedItems, selectedItems, cachedItems, inputValue, showAll, isMultiple, showSelectAllOption, showNewItemOption, newItemMinLength = 3, isLoading, hasLoadMore, isClientSearchDisabled }) {
-	const { contains } = useFilter({ sensitivity: "base" });
-	const allListItems = useMemo(() => {
-		const showSelectAllItem = isMultiple && showSelectAllOption && inputValue.length === 0 && !hasLoadMore;
-		const showNewItem = showNewItemOption && inputValue.length >= newItemMinLength && !cachedItems.find((item) => contains(item.label, inputValue));
-		const showLoadingItem = isLoading || hasLoadMore;
-		return [
-			...showSelectAllItem ? [SelectAllItem(inputValue)] : [],
+function useSelectItems(t0) {
+	const $ = c(37);
+	const { initialSelectedItems, selectedItems, cachedItems, inputValue, showAll, isMultiple, showSelectAllOption, showNewItemOption, newItemMinLength: t1, isLoading, hasLoadMore, isClientSearchDisabled } = t0;
+	const newItemMinLength = t1 === void 0 ? 3 : t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { sensitivity: "base" };
+		$[0] = t2;
+	} else t2 = $[0];
+	const { contains } = useFilter(t2);
+	const showSelectAllItem = isMultiple && showSelectAllOption && inputValue.length === 0 && !hasLoadMore;
+	let t3;
+	if ($[1] !== cachedItems || $[2] !== contains || $[3] !== inputValue || $[4] !== newItemMinLength || $[5] !== showNewItemOption) {
+		t3 = showNewItemOption && inputValue.length >= newItemMinLength && !cachedItems.find((item) => contains(item.label, inputValue));
+		$[1] = cachedItems;
+		$[2] = contains;
+		$[3] = inputValue;
+		$[4] = newItemMinLength;
+		$[5] = showNewItemOption;
+		$[6] = t3;
+	} else t3 = $[6];
+	const showNewItem = t3;
+	const showLoadingItem = isLoading || hasLoadMore;
+	let t4;
+	if ($[7] !== inputValue || $[8] !== showSelectAllItem) {
+		t4 = showSelectAllItem ? [SelectAllItem(inputValue)] : [];
+		$[7] = inputValue;
+		$[8] = showSelectAllItem;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== inputValue || $[11] !== showNewItem) {
+		t5 = showNewItem ? [NewItem(inputValue)] : [];
+		$[10] = inputValue;
+		$[11] = showNewItem;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== inputValue || $[14] !== showLoadingItem) {
+		t6 = showLoadingItem ? [LoadingItem(inputValue)] : [];
+		$[13] = inputValue;
+		$[14] = showLoadingItem;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== cachedItems || $[17] !== t4 || $[18] !== t5 || $[19] !== t6) {
+		t7 = [
+			...t4,
 			...cachedItems,
-			...showNewItem ? [NewItem(inputValue)] : [],
-			...showLoadingItem ? [LoadingItem(inputValue)] : []
+			...t5,
+			...t6
 		];
-	}, [
-		isMultiple,
-		showNewItemOption,
-		inputValue,
-		newItemMinLength,
-		cachedItems,
-		contains,
-		isLoading,
-		hasLoadMore,
-		showSelectAllOption
-	]);
-	const allItems = useMemo(() => {
+		$[16] = cachedItems;
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t7;
+	} else t7 = $[20];
+	const allListItems = t7;
+	let t8;
+	if ($[21] !== allListItems || $[22] !== initialSelectedItems || $[23] !== selectedItems) {
 		const items = [
 			...Array.isArray(initialSelectedItems) ? initialSelectedItems : [initialSelectedItems],
 			...Array.isArray(selectedItems) ? selectedItems : [selectedItems],
 			...allListItems
-		].filter((item) => !!item);
+		].filter(_temp);
 		const allItemsMap = /* @__PURE__ */ new Map();
-		items.forEach((item) => allItemsMap.set(item.id, item));
-		return Array.from(allItemsMap.values());
-	}, [
-		allListItems,
-		initialSelectedItems,
-		selectedItems
-	]);
-	const filteredListItems = useMemo(() => allListItems.filter((item) => contains(item.label, inputValue)), [
-		allListItems,
-		contains,
-		inputValue
-	]);
-	const listItems = useMemo(() => showAll || isClientSearchDisabled ? allListItems : filteredListItems, [
-		showAll,
-		isClientSearchDisabled,
-		allListItems,
-		filteredListItems
-	]);
-	return {
-		allItems,
-		allListItems,
-		filteredListItems,
-		listItems,
-		selectableListItems: useMemo(() => listItems.filter((item) => !item.isDisabled && !ReservedItemIds.includes(String(item.id))), [listItems])
-	};
+		items.forEach((item_1) => allItemsMap.set(item_1.id, item_1));
+		t8 = Array.from(allItemsMap.values());
+		$[21] = allListItems;
+		$[22] = initialSelectedItems;
+		$[23] = selectedItems;
+		$[24] = t8;
+	} else t8 = $[24];
+	const allItems = t8;
+	let t9;
+	if ($[25] !== allListItems || $[26] !== contains || $[27] !== inputValue) {
+		t9 = allListItems.filter((item_2) => contains(item_2.label, inputValue));
+		$[25] = allListItems;
+		$[26] = contains;
+		$[27] = inputValue;
+		$[28] = t9;
+	} else t9 = $[28];
+	const filteredListItems = t9;
+	const listItems = showAll || isClientSearchDisabled ? allListItems : filteredListItems;
+	let t10;
+	if ($[29] !== listItems) {
+		t10 = listItems.filter(_temp2);
+		$[29] = listItems;
+		$[30] = t10;
+	} else t10 = $[30];
+	const selectableListItems = t10;
+	let t11;
+	if ($[31] !== allItems || $[32] !== allListItems || $[33] !== filteredListItems || $[34] !== listItems || $[35] !== selectableListItems) {
+		t11 = {
+			allItems,
+			allListItems,
+			filteredListItems,
+			listItems,
+			selectableListItems
+		};
+		$[31] = allItems;
+		$[32] = allListItems;
+		$[33] = filteredListItems;
+		$[34] = listItems;
+		$[35] = selectableListItems;
+		$[36] = t11;
+	} else t11 = $[36];
+	return t11;
+}
+function _temp2(item_3) {
+	return !item_3.isDisabled && !ReservedItemIds.includes(String(item_3.id));
+}
+function _temp(item_0) {
+	return !!item_0;
 }
 //#endregion
 export { NewItemId, SelectAllItemId, useSelectItems };

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

@@ -0,0 +1,82 @@
+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";
+type InputFrameContentGroup = "date-picker" | "input" | "select";
+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;
+    contentGroup?: InputFrameContentGroup;
+    contentAndTrailingClassName?: string;
+    wrapContentAndTrailing?: boolean;
+    wrapTrailingContent?: boolean;
+    reserveTrailingContent?: boolean;
+    labelPlacement?: InputFrameLabelPlacement;
+    trailingClassName?: string;
+}
+export declare const InputFrame: (props: InputFrameProps) => import("react/jsx-runtime").JSX.Element;
+export {};