@povio/ui 2.1.14 → 2.1.16

package/dist/SelectInputTags.js

@@ -0,0 +1,29 @@
+import { Tag } from "./Tag.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+const SelectInputTags = ({ selectedItems, isDisabled, selectedTagsType, collapseAfter, onRemove }) => {
+	const { displayedItems, remainingCount } = useMemo(() => {
+		if (!collapseAfter || selectedItems.length <= collapseAfter) return {
+			displayedItems: selectedItems,
+			remainingCount: 0
+		};
+		return {
+			displayedItems: selectedItems.slice(0, collapseAfter - 1),
+			remainingCount: selectedItems.length - (collapseAfter - 1)
+		};
+	}, [selectedItems, collapseAfter]);
+	if (selectedTagsType === "tags") return /* @__PURE__ */ jsxs(Fragment, { children: [displayedItems.map((item) => /* @__PURE__ */ jsx(Tag, {
+		dismissable: true,
+		isDisabled,
+		onDismiss: () => onRemove(item.id),
+		excludeFromTabOrder: true,
+		className: "z-1",
+		children: item.label
+	}, item.id)), remainingCount > 0 && /* @__PURE__ */ jsx(Tag, {
+		isDisabled,
+		excludeFromTabOrder: true,
+		children: `+${remainingCount} more`
+	}, "remaining-count")] });
+	return /* @__PURE__ */ jsx("p", { children: selectedItems.map((item) => item.label).join(", ") });
+};
+export { SelectInputTags };

package/dist/SelectListBox.js

@@ -0,0 +1,73 @@
+import { SelectAllItemId } from "./useSelectItems.js";
+import { SelectContext } from "./select.context.js";
+import { SelectListBoxItem } from "./SelectListBoxItem.js";
+import { SelectListBoxItemSelectAll } from "./SelectListBoxItemSelectAll.js";
+import { SelectListBoxLoadingItem } from "./SelectListBoxLoadingItem.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ListBox, ListLayout, Virtualizer } from "react-aria-components";
+const SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, newItemRender, onLoadMore, className, onClose,...props }) => {
+	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll } = SelectContext.useSelect();
+	const onSelectionChange = (value) => {
+		const ids = Array.from(value);
+		if (!isMultiple && ids.length === 0) {
+			if (fieldState.value) {
+				onClose?.();
+				onChange(fieldState.value);
+			}
+			return;
+		}
+		if (isMultiple && ids.includes("all-item-id")) {
+			if (ids.length > selectableListItems.length) onClear();
+			else onSelectAll();
+			return;
+		}
+		if (isMultiple) onChange(ids);
+		else {
+			onClose?.();
+			onChange(ids[0]);
+		}
+	};
+	const renderItem = (item) => {
+		if (item.isSelectAllItem) return /* @__PURE__ */ jsx(SelectListBoxItemSelectAll, { ...item }, item.id);
+		if (item.isLoadingItem) return /* @__PURE__ */ jsx(SelectListBoxLoadingItem, {
+			...item,
+			onLoadMore
+		}, item.id);
+		return /* @__PURE__ */ jsx(SelectListBoxItem, {
+			...item,
+			isSearchable,
+			isNewItem: item.isNewItem,
+			newItemRender
+		}, item.id);
+	};
+	if (virtualizerOptions || listItems.length > 100) return /* @__PURE__ */ jsx(Virtualizer, {
+		layout: ListLayout,
+		layoutOptions: virtualizerOptions,
+		children: /* @__PURE__ */ jsx(ListBox, {
+			...props,
+			"aria-label": label,
+			selectionMode,
+			className: clsx("flex-1 outline-none [&>div:last-child>*]:border-b-0", isScrollable ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
+			items: listItems,
+			selectedKeys: selectedIds,
+			onSelectionChange,
+			escapeKeyBehavior: "none",
+			shouldSelectOnPressUp: true,
+			children: renderItem
+		})
+	});
+	return /* @__PURE__ */ jsx(ListBox, {
+		...props,
+		"aria-label": label,
+		selectionMode,
+		className: clsx("flex-1 outline-none [&>div:last-child]:border-b-0", isScrollable ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
+		items: listItems,
+		selectedKeys: selectedIds,
+		onSelectionChange,
+		escapeKeyBehavior: "none",
+		shouldSelectOnPressUp: true,
+		children: renderItem
+	});
+};
+export { SelectListBox };

package/dist/SelectListBoxItem.js

@@ -0,0 +1,48 @@
+import { CheckboxCheckmark } from "./CheckboxCheckmark2.js";
+import { ns } from "./i18n.js";
+import { SelectContext } from "./select.context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ListBoxItem } from "react-aria-components";
+import { useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+const SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled }) => {
+	const ref = useRef(null);
+	const { t } = useTranslation("ui");
+	const { selectedIds, isMultiple } = SelectContext.useSelect();
+	const itemContent = useMemo(() => {
+		if (isNewItem) return newItemRender?.(label) ?? `${t(($) => $.ui.autocomplete.createNewBtn)} '${label}'`;
+		return content ?? label;
+	}, [
+		isNewItem,
+		newItemRender,
+		label,
+		content,
+		t
+	]);
+	return /* @__PURE__ */ jsxs(ListBoxItem, {
+		ref,
+		id,
+		textValue: label,
+		isDisabled,
+		className: clsx(selectListBoxItemClass, !isMultiple && "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle", isNewItem ? "text-interactive-text-primary-idle" : "text-interactive-text-secondary-idle"),
+		children: [
+			isMultiple && !isSearchable && /* @__PURE__ */ jsx(CheckboxCheckmark, {
+				variant: "default",
+				className: "group-focus-visible:outline-none!"
+			}),
+			isMultiple && isSearchable && /* @__PURE__ */ jsx("div", {
+				className: "group",
+				"data-rac": "",
+				"data-selected": selectedIds.includes(id) || void 0,
+				children: /* @__PURE__ */ jsx(CheckboxCheckmark, {
+					variant: "default",
+					className: "group-focus-visible:outline-none!"
+				})
+			}),
+			itemContent
+		]
+	});
+};
+const selectListBoxItemClass = clsx("group flex cursor-pointer items-center gap-2 px-list-side-item py-list-height-item", "border-b border-b-elevation-outline-default-1 outline-none", "font-labels-default text-interactive-text-secondary-idle text-label-2", "hover:text-interactive-text-secondary-hover", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", "disabled:cursor-default disabled:text-interactive-text-secondary-disabled");
+export { SelectListBoxItem, selectListBoxItemClass };

package/dist/SelectListBoxItemSelectAll.js

@@ -0,0 +1,31 @@
+import { CheckboxCheckmark } from "./CheckboxCheckmark2.js";
+import { ns } from "./i18n.js";
+import { SelectContext } from "./select.context.js";
+import { selectListBoxItemClass } from "./SelectListBoxItem.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ListBoxItem } from "react-aria-components";
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+const SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
+	const ref = useRef(null);
+	const { t } = useTranslation("ui");
+	const { selectableListItems, selectedIds } = SelectContext.useSelect();
+	return /* @__PURE__ */ jsxs(ListBoxItem, {
+		ref,
+		id,
+		textValue: label || t(($) => $.ui.select.allOption),
+		isDisabled,
+		className: selectListBoxItemClass,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "group",
+			"data-rac": "",
+			"data-selected": selectedIds.length === selectableListItems.length || void 0,
+			"data-indeterminate": selectedIds.length > 0 && selectedIds.length < selectableListItems.length || void 0,
+			children: /* @__PURE__ */ jsx(CheckboxCheckmark, {
+				variant: "default",
+				className: "group-focus-visible:!outline-none"
+			})
+		}), t(($) => $.ui.select.allOption)]
+	});
+};
+export { SelectListBoxItemSelectAll };

package/dist/SelectListBoxLoadingItem.js

@@ -0,0 +1,41 @@
+import { Loader } from "./Loader.js";
+import { ns } from "./i18n.js";
+import { SelectContext } from "./select.context.js";
+import { selectListBoxItemClass } from "./SelectListBoxItem.js";
+import { useIntersectionObserver } from "./useIntersectionObserver.js";
+import { jsx } from "react/jsx-runtime";
+import { ListBoxItem } from "react-aria-components";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+const SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
+	const { t } = useTranslation("ui");
+	const { isDebouncing, isLoading, hasLoadMore } = SelectContext.useSelect();
+	const { setRef } = useIntersectionObserver({
+		onIntersection: useCallback(() => {
+			if (!isDebouncing && !isLoading && hasLoadMore) onLoadMore?.();
+		}, [
+			isDebouncing,
+			isLoading,
+			hasLoadMore,
+			onLoadMore
+		]),
+		rootMargin: "40px"
+	});
+	return /* @__PURE__ */ jsx(ListBoxItem, {
+		id,
+		textValue: label || t(($) => $.ui.loadingState.text),
+		isDisabled: true,
+		className: selectListBoxItemClass,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: (ref) => {
+				setRef(ref);
+				return () => {
+					setRef(null);
+				};
+			},
+			className: "flex flex-1 justify-center text-interactive-text-primary-idle",
+			children: /* @__PURE__ */ jsx(Loader, {})
+		})
+	});
+};
+export { SelectListBoxLoadingItem };

package/dist/SelectListBoxSelectionBar.js

@@ -0,0 +1,25 @@
+import { TextButton } from "./TextButton.js";
+import { ns } from "./i18n.js";
+import { SelectContext } from "./select.context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+const SelectListBoxSelectionBar = ({ className }) => {
+	const { t } = useTranslation("ui");
+	const { onClear, onSelectAll } = SelectContext.useSelect();
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex items-center justify-between border-elevation-outline-default-1 border-b px-4 py-3", className),
+		children: [/* @__PURE__ */ jsx(TextButton, {
+			type: "button",
+			color: "primary",
+			onPress: onSelectAll,
+			children: t(($) => $.ui.select.selectAll)
+		}), /* @__PURE__ */ jsx(TextButton, {
+			type: "button",
+			color: "secondary",
+			onPress: onClear,
+			children: t(($) => $.ui.select.clearSelection)
+		})]
+	});
+};
+export { SelectListBoxSelectionBar };

package/dist/SelectMobile.js

@@ -0,0 +1,111 @@
+import { BottomSheet } from "./BottomSheet.js";
+import { FormFieldHeader } from "./FormFieldHeader.js";
+import { FormFieldHeaderClose } from "./FormFieldHeaderClose.js";
+import { FormField } from "./FormField.js";
+import { SelectContext } from "./select.context.js";
+import { SelectInput } from "./SelectInput.js";
+import { SelectListBox } from "./SelectListBox.js";
+import { TextInput } from "./TextInput.js";
+import { SelectListBoxSelectionBar } from "./SelectListBoxSelectionBar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { DialogTrigger } from "react-aria-components";
+import { useRef } from "react";
+import { useLabel } from "react-aria";
+const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur,...props }) => {
+	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, as, collapseAfter, selectedTagsType } = props;
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const { labelProps, fieldProps } = useLabel({ label });
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const { fieldState, isOpen, setIsOpen, onInputChange, isMultiple } = SelectContext.useSelect();
+	const searchInputRef = useRef(null);
+	const dialogTriggerProps = {
+		isOpen,
+		onOpenChange: setIsOpen
+	};
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		as,
+		labelProps,
+		className: clsx("w-full", containerClassName),
+		children: /* @__PURE__ */ jsxs(DialogTrigger, {
+			...dialogTriggerProps,
+			children: [customTrigger ? /* @__PURE__ */ jsx("div", {
+				...fieldProps,
+				ref,
+				children: customTrigger
+			}) : /* @__PURE__ */ jsx(SelectInput, {
+				ref,
+				placeholder,
+				variant,
+				as,
+				isDisabled,
+				isInvalid: !!error,
+				className,
+				hideDropdownIcon,
+				isSearchable: false,
+				isClearable,
+				showSelectionContent,
+				onBlur,
+				fieldProps,
+				headerProps,
+				collapseAfter,
+				selectedTagsType
+			}), /* @__PURE__ */ jsx(BottomSheet, {
+				isOpen,
+				onOpenChange: setIsOpen,
+				onStateChange: (state) => {
+					if (state === "opened") searchInputRef.current?.focus();
+				},
+				label,
+				footer: isMultiple && /* @__PURE__ */ jsx(SelectListBoxSelectionBar, {}),
+				isDismissable: true,
+				children: (close) => /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col",
+					children: [isSearchable ? /* @__PURE__ */ jsx(TextInput, {
+						ref: searchInputRef,
+						label,
+						placeholder,
+						value: fieldState.inputValue,
+						onChange: onInputChange,
+						rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
+						inputClassName,
+						className: "mb-1-5 px-4 pt-3"
+					}) : /* @__PURE__ */ jsx(FormFieldHeader, {
+						label,
+						rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
+						className: "!mb-1-5 px-4 pt-3"
+					}), /* @__PURE__ */ jsx(SelectListBox, {
+						...props,
+						autoFocus: !isSearchable,
+						isScrollable: false,
+						onClose: close
+					})]
+				})
+			})]
+		})
+	});
+};
+export { SelectMobile };

package/dist/Send.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+const SendIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M5.105 7.59c-1.092-1.712.764-3.774 2.58-2.866l10.973 5.487c1.474.737 1.474 2.84 0 3.578L7.685 19.275c-1.816.908-3.672-1.154-2.58-2.865L7.92 12zM17.764 12 6.79 6.513l2.815 4.41a2 2 0 0 1 0 2.153l-2.815 4.41z",
+		clipRule: "evenodd"
+	})
+});
+export { SendIcon };

package/dist/Slider.js

@@ -0,0 +1,93 @@
+import { Typography } from "./Typography.js";
+import { uiOutlineClass } from "./outline.clsx.js";
+import { UIConfig } from "./uiConfig.context.js";
+import { FormField } from "./FormField.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Slider, SliderThumb, SliderTrack } from "react-aria-components";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+var SliderBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const { label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, unit, hideLabel = ui.input.hideLabel, minValue = ui.slider.minValue, maxValue = ui.slider.maxValue,...rest } = props;
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden,
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const defaultValue = props.defaultValue ?? (props.isRange ? [minValue, minValue] : minValue);
+	const getTrackFillStyle = (state) => {
+		const p0 = state.getThumbPercent(0);
+		const p1 = state.getThumbPercent(1);
+		return {
+			left: props.isRange ? `${p0 * 100}%` : 0,
+			width: props.isRange ? `${(p1 - p0) * 100}%` : `${p0 * 100}%`
+		};
+	};
+	return /* @__PURE__ */ jsx(Slider, {
+		...rest,
+		defaultValue,
+		minValue,
+		maxValue,
+		isDisabled,
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [
+					/* @__PURE__ */ jsxs(Typography, {
+						className: "min-w-10 px-slider-side-leading-and-trailing py-slider-height-leading-and-trailing text-text-default-3",
+						size: "label-2",
+						children: [minValue, unit]
+					}),
+					/* @__PURE__ */ jsx(SliderTrack, {
+						className: "relative mx-2 h-6 w-full",
+						children: ({ state }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+							className: "absolute top-1/2 h-1 w-full -translate-y-1/2 overflow-hidden rounded-full bg-elevation-outline-default-1",
+							children: /* @__PURE__ */ jsx("div", {
+								className: clsx("absolute top-0 h-1 rounded-full", props.isDisabled ? "bg-interactive-contained-primary-disabled" : "bg-interactive-contained-primary-idle"),
+								style: getTrackFillStyle(state)
+							})
+						}), state.values.map((_, i) => /* @__PURE__ */ jsx(SliderThumb, {
+							index: i,
+							className: clsx("absolute top-1/2 size-4 cursor-pointer rounded-full bg-interactive-contained-primary-idle disabled:cursor-default", "dragging:bg-interactive-contained-primary-pressed hover:bg-interactive-contained-primary-hover focus-visible:outline-interactive-contained-primary-focus disabled:bg-interactive-contained-primary-disabled", uiOutlineClass),
+							isDisabled
+						}, i))] })
+					}),
+					/* @__PURE__ */ jsxs(Typography, {
+						className: "min-w-10 px-slider-side-leading-and-trailing py-slider-height-leading-and-trailing text-text-default-3",
+						size: "label-2",
+						children: [maxValue, unit]
+					})
+				]
+			})
+		})
+	});
+};
+const Slider$1 = (props) => {
+	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(SliderBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(SliderBase, { ...props });
+};
+export { Slider$1 as Slider };

package/dist/SplitButton.js

@@ -0,0 +1,36 @@
+import { ChevronDownIcon } from "./ChevronDown.js";
+import { Button } from "./Button.js";
+import { IconButton } from "./IconButton.js";
+import { Menu } from "./Menu2.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+const SplitButton = ({ variant, color, width, size, label, labelRight, link, items, className, isLoading,...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group/split flex items-center",
+		"data-split": "",
+		children: [/* @__PURE__ */ jsx(Button, {
+			...props,
+			width,
+			size,
+			variant,
+			color,
+			link,
+			className: clsx("rounded-r-none! border-r border-solid", className),
+			"data-separator": "",
+			isLoading,
+			children: label
+		}), /* @__PURE__ */ jsx(Menu, {
+			trigger: /* @__PURE__ */ jsx(IconButton, {
+				size,
+				variant,
+				color,
+				label: labelRight,
+				icon: ChevronDownIcon,
+				className: "rounded-l-none! border-l-0!",
+				isDisabled: props.isDisabled || isLoading
+			}),
+			items
+		})]
+	});
+};
+export { SplitButton };

package/dist/Strikethrough.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const StrikethroughIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M3.833 13.624a.68.68 0 0 1-.498-.2.68.68 0 0 1-.202-.5q0-.297.202-.499.201-.2.498-.2h16.334q.297 0 .498.2.202.202.202.5a.68.68 0 0 1-.202.498q-.201.201-.498.201zm7.18-3.248V6.983H6.929a.95.95 0 0 1-.699-.288.95.95 0 0 1-.288-.7q0-.412.288-.703A.95.95 0 0 1 6.93 5h10.15q.411 0 .699.288a.95.95 0 0 1 .288.7q0 .413-.288.704a.95.95 0 0 1-.7.291h-4.083v3.393zm0 5.097h1.983v2.54a.95.95 0 0 1-.288.7.95.95 0 0 1-.7.287.96.96 0 0 1-.703-.29.96.96 0 0 1-.292-.706z"
+	})
+});
+export { StrikethroughIcon };