@povio/ui 2.3.0-rc.2 → 2.3.0-rc.4

package/dist/components/inputs/Checkbox/Checkbox.js

@@ -14,7 +14,9 @@ var CheckboxBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const checkboxTypographyMap = UIStyle.useMapper("checkbox.typography", checkboxTypography);
 	const checkboxContentClassNameMap = UIStyle.useMapper("checkbox.contentClassName", checkboxContentClassName);
-	const { className, children, isDisabled, error, variant = ui.checkbox.variant, hideLabel = ui.input.hideLabel, ...rest } = props;
+	const { className, children, isDisabled, error, variant: variantProp, hideLabel: hideLabelProp, ...rest } = props;
+	const variant = variantProp ?? ui.checkbox.variant;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const formFieldErrorProps = {
 		error,
 		isDisabled

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -24,7 +24,20 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DatePicker/DatePicker.tsx
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, granularity = ui.dateInput.granularity, autoFixYear = ui.dateInput.autoFixYear, format, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as: asProp, hideLabel: hideLabelProp, variant: variantProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, format, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
+	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
+	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
+	const shouldUpdateDateOnMonthYearChange = shouldUpdateDateOnMonthYearChangeProp ?? ui.dateInput.shouldUpdateDateOnMonthYearChange;
+	const granularity = granularityProp ?? ui.dateInput.granularity;
+	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
 	const normalizeByGranularity = useCallback((date) => {
 		if (granularity === "year") return date.set({
 			month: 1,

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -30,7 +30,18 @@ import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, ...rest } = props;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
+	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
+	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
+	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
 	const [validationRangeError, setValidationRangeError] = useState();
 	const datePickerInputRef = useRef(null);
 	const dateRangePickerRef = useMemo(() => ({ get current() {

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -24,7 +24,20 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, timeZone, autoFixYear = ui.dateInput.autoFixYear, format, setDateValueOnDateSelection = ui.dateInput.setDateValueOnDateSelection, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, timeZone, autoFixYear: autoFixYearProp, format, setDateValueOnDateSelection: setDateValueOnDateSelectionProp, ...rest } = props;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
+	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
+	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
+	const shouldUpdateDateOnMonthYearChange = shouldUpdateDateOnMonthYearChangeProp ?? ui.dateInput.shouldUpdateDateOnMonthYearChange;
+	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
+	const setDateValueOnDateSelection = setDateValueOnDateSelectionProp ?? ui.dateInput.setDateValueOnDateSelection;
 	let effectiveTimeZone = getLocalTimeZone();
 	if (timeZone) effectiveTimeZone = timeZone;
 	const formFieldProps = {

package/dist/components/inputs/DateTime/TimePicker/TimePicker.js

@@ -22,7 +22,13 @@ import { useTimeFieldState } from "react-stately";
 //#region src/components/inputs/DateTime/TimePicker/TimePicker.tsx
 var TimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, placeholder, className, inputClassName, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, placeholder, className, inputClassName, variant: variantProp, as: asProp, size: sizeProp, hideLabel: hideLabelProp, isClearable: isClearableProp, disableManualEntry: disableManualEntryProp, ...rest } = props;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
 	const formFieldProps = {
 		error,
 		label,

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

@@ -6,13 +6,16 @@ import { PillButton } from "../../../buttons/PillButton/PillButton.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button, ToggleButtonGroup } from "react-aria-components";
-import { Time } from "@internationalized/date";
+import { CalendarDateTime, Time } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/CalendarHeader.tsx
 var HourCycle = {
 	12: "h12",
 	24: "h23"
 };
+var getTimeFormatterDate = (timeValue, timeZone) => {
+	return new CalendarDateTime(2e3, 1, 1, timeValue.hour, timeValue.minute).toDate(timeZone);
+};
 var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, granularity = "day", toggleState, setToggleState }) => {
 	const formatter = useDateFormatter({
 		month: "long",
@@ -25,9 +28,7 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 	});
 	const year = calendarState.focusedDate.year.toString();
 	const month = formatter.format(calendarState.focusedDate.toDate(calendarState.timeZone));
-	const timeValue = datePickerState?.timeValue || new Time();
-	const date = /* @__PURE__ */ new Date();
-	date.setHours(timeValue.hour, timeValue.minute);
+	const date = getTimeFormatterDate(datePickerState?.timeValue || new Time(0, 0), calendarState.timeZone);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1",
 		children: [

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

@@ -20,7 +20,13 @@ var NumberInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputRef = useRef(null);
-	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, autoFocusOnMount, ...rest } = props;
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions: formatOptionsProp, variant: variantProp, as: asProp, size: sizeProp, hideLabel: hideLabelProp, isClearable: isClearableProp, autoFocusOnMount, ...rest } = props;
+	const formatOptions = formatOptionsProp ?? ui.numberInput.formatOptions;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
 	const numberFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { locale } = useLocale();

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

@@ -20,7 +20,11 @@ var TextAreaBase = (props) => {
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputSideCva = UIStyle.useCva("input.sideCva", inputSide);
 	const textAreaWrapperCva = UIStyle.useCva("textArea.wrapperCva", textAreaWrapper);
-	const { ref, className, inputClassName, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, isClearable = ui.input.isClearable, ...rest } = props;
+	const { ref, className, inputClassName, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, value, onChange, onBlur, as: asProp, hideLabel: hideLabelProp, variant: variantProp, isClearable: isClearableProp, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
 	const textFieldRef = useRef(null);
 	const { labelProps, inputProps } = useTextField({
 		...rest,

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

@@ -18,16 +18,22 @@ var TextInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputRef = useRef(null);
-	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, autoFocusOnMount, ...rest } = props;
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as: asProp, hideLabel: hideLabelProp, variant: variantProp, size: sizeProp, isClearable: isClearableProp, autoFocusOnMount, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
+	const inputValue = value ?? "";
 	const { labelProps, inputProps } = useTextField({
 		...rest,
 		label,
 		isDisabled,
 		isInvalid: !!error,
 		isRequired,
-		value,
+		value: inputValue,
 		onChange,
 		onBlur
 	}, textFieldRef);
@@ -56,7 +62,7 @@ var TextInputBase = (props) => {
 		leadingIcon,
 		trailingIcon,
 		isClearable,
-		value,
+		value: inputValue,
 		onChange,
 		onBlur
 	};

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

@@ -88,13 +88,13 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			...props,
 			isDisabled,
 			className: clsx("w-full", props.containerClassName),
-			inputClassName: clsx("px-0!", props.className, props.inputClassName),
+			inputClassName: clsx(props.className, props.inputClassName),
 			contentWrapperClassName: "flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate",
 			labelPlacement: "content-row",
 			dataAttributes,
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
-			trailingClassName: "pl-1-5",
+			trailingClassName: "pl-1-5 gap-0!",
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",
 				children: props.leadingContent

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

@@ -6,6 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
 var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }) => {
+	"use no memo";
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
 	const { onChange, ...restProps } = props;

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

@@ -34,7 +34,7 @@ function Select({ renderStaticInput, ...props }) {
 	const ui = UIConfig.useConfig();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
 	const rootRef = useRef(null);
-	const { renderRealInput, replayStaticInputChange } = useStaticInputHandoff({
+	const { renderRealInput, replayStaticInputChange, replayStaticInputPress } = useStaticInputHandoff({
 		inputRef: rootRef,
 		renderInput,
 		setRenderInput,
@@ -89,12 +89,12 @@ function Select({ renderStaticInput, ...props }) {
 			...props,
 			isDisabled,
 			className: clsx("w-full", props.containerClassName),
-			inputClassName: clsx("px-0!", props.className, props.inputClassName),
+			inputClassName: clsx(props.className, props.inputClassName),
 			typographySize: "label-1",
 			labelPlacement: "content-row",
 			dataAttributes,
 			renderStatic: true,
-			trailingClassName: "pl-1-5",
+			trailingClassName: "pl-1-5 gap-0!",
 			onStaticInteract: renderRealInput,
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",
@@ -121,6 +121,7 @@ function Select({ renderStaticInput, ...props }) {
 				tabIndex: -1,
 				"data-type": "select-trigger",
 				className: clsx("w-full truncate bg-transparent text-start outline-none disabled:text-interactive-text-secondary-disabled", isMultiple && !isEmpty && "absolute inset-0 z-0"),
+				onPointerDown: replayStaticInputPress,
 				...dataAttributeProps,
 				"data-rac": true,
 				children: buttonContent

package/dist/components/inputs/Slider/Slider.js

@@ -10,7 +10,10 @@ import { Controller } from "react-hook-form";
 //#region src/components/inputs/Slider/Slider.tsx
 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 { label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, unit, hideLabel: hideLabelProp, minValue: minValueProp, maxValue: maxValueProp, ...rest } = props;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const minValue = minValueProp ?? ui.slider.minValue;
+	const maxValue = maxValueProp ?? ui.slider.maxValue;
 	const formFieldProps = {
 		error,
 		label,

package/dist/components/inputs/Toggle/Toggle.js

@@ -14,7 +14,8 @@ var ToggleBase = (props) => {
 	const toggleCva = UIStyle.useCva("toggle.cva", toggle);
 	const toggleTypographyMap = UIStyle.useMapper("toggle.typography", toggleTypography);
 	const toggleContentClassNameMap = UIStyle.useMapper("toggle.contentClassName", toggleContentClassName);
-	const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
+	const { className, children, isDisabled, error, variant: variantProp, ...rest } = props;
+	const variant = variantProp ?? ui.toggle.variant;
 	const formFieldErrorProps = {
 		error,
 		isDisabled

package/dist/components/inputs/shared/useStaticInputHandoff.d.ts

@@ -9,5 +9,6 @@ export declare const useStaticInputHandoff: <TElement extends HTMLElement = HTML
     shouldFocus: boolean;
     renderRealInput: (focus: boolean) => void;
     replayStaticInputChange: (value: string) => void;
+    replayStaticInputPress: () => void;
 };
 export {};

package/dist/components/inputs/shared/useStaticInputHandoff.js

@@ -3,18 +3,23 @@ import { useLayoutEffect, useRef, useState } from "react";
 var useStaticInputHandoff = ({ inputRef, renderInput, setRenderInput, getFocusTarget }) => {
 	const [shouldFocus, setShouldFocus] = useState(false);
 	const pendingStaticChangeRef = useRef(null);
+	const shouldReplayStaticPressRef = useRef(false);
 	useLayoutEffect(() => {
 		if (!renderInput || !shouldFocus) return;
-		const focusRealInput = (replayPendingChange) => {
+		const focusRealInput = (replayPendingInteraction) => {
 			const input = inputRef.current;
 			const pendingValue = pendingStaticChangeRef.current;
 			const focusTarget = input ? getFocusTarget?.(input) ?? input : null;
-			if (replayPendingChange && focusTarget instanceof HTMLInputElement && pendingValue != null) {
+			if (replayPendingInteraction && focusTarget instanceof HTMLInputElement && pendingValue != null) {
 				(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(focusTarget, pendingValue);
 				focusTarget.dispatchEvent(new Event("input", { bubbles: true }));
 				pendingStaticChangeRef.current = null;
 			}
 			focusTarget?.focus();
+			if (replayPendingInteraction && shouldReplayStaticPressRef.current) {
+				shouldReplayStaticPressRef.current = false;
+				focusTarget?.click();
+			}
 		};
 		focusRealInput(true);
 		const frame = requestAnimationFrame(() => {
@@ -40,6 +45,11 @@ var useStaticInputHandoff = ({ inputRef, renderInput, setRenderInput, getFocusTa
 			pendingStaticChangeRef.current = value;
 			setShouldFocus(true);
 			setRenderInput(true);
+		},
+		replayStaticInputPress: () => {
+			shouldReplayStaticPressRef.current = true;
+			setShouldFocus(true);
+			setRenderInput(true);
 		}
 	};
 };

package/dist/components/table/Table.js

@@ -1,3 +1,4 @@
+"use no memo";
 import { ChevronDownIcon } from "../../assets/icons/ChevronDown.js";
 import { ChevronUpIcon } from "../../assets/icons/ChevronUp.js";
 import { UIStyle } from "../../config/uiStyle.context.js";
@@ -26,8 +27,8 @@ var CustomCellContext = (context) => {
 		value: context.getValue()
 	};
 };
-var CellRender = (Comp, props) => {
-	const rendered = typeof Comp === "function" ? Comp(props) : Comp;
+var renderCell = (Comp, props) => {
+	const rendered = flexRender(Comp, props);
 	return typeof rendered === "string" ? /* @__PURE__ */ jsx(CellText, { children: rendered }) : rendered;
 };
 var RowDragHandleCell = ({ rowId }) => {
@@ -68,7 +69,7 @@ var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCv
 			return /* @__PURE__ */ jsx("td", {
 				tabIndex: -1,
 				className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
-				children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+				children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
 			}, cell.id);
 		})
 	});
@@ -245,7 +246,7 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 						return /* @__PURE__ */ jsx("td", {
 							tabIndex: -1,
 							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
-							children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+							children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
 						}, cell.id);
 					})
 				}, row.id);

package/package.json

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