@povio/ui 2.2.9-rc.31 → 2.2.9-rc.32

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

@@ -215,6 +215,8 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, todayIconButtonSize);
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticCalendarDateSegments({
@@ -247,7 +249,8 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 				setShouldFocus(focus);
 				setRenderInput(true);
 			},
-			actionContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			actionContent: staticTodayIcon,
+			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments
 		});

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

@@ -615,6 +615,8 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, todayIconButtonSize);
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticDateRangeSegments({
@@ -648,7 +650,8 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 				setShouldFocus(focus);
 				setRenderInput(true);
 			},
-			actionContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			actionContent: staticTodayIcon,
+			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments
 		});

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

@@ -229,6 +229,8 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, todayIconButtonSize);
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticCalendarDateTimeSegments({
@@ -261,7 +263,8 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 				setShouldFocus(focus);
 				setRenderInput(true);
 			},
-			actionContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			actionContent: staticTodayIcon,
+			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
 			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0,
 			children: staticSegments
 		});

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

@@ -1,5 +1,5 @@
 import { DOMAttributes } from '@react-types/shared';
-import { ReactNode } from 'react';
+import { LabelHTMLAttributes, ReactNode } from 'react';
 export interface FormFieldHeaderProps {
     label: string;
     tooltipText?: string;
@@ -9,6 +9,6 @@ export interface FormFieldHeaderProps {
     isHeaderHidden?: boolean;
     isDisabled?: boolean;
     className?: string;
-    labelProps?: DOMAttributes<HTMLLabelElement>;
+    labelProps?: DOMAttributes<HTMLLabelElement> & LabelHTMLAttributes<HTMLLabelElement>;
 }
 export declare const FormFieldHeader: ({ label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, isDisabled, className, labelProps, }: FormFieldHeaderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { DOMAttributes } from '@react-types/shared';
-import { RefCallback } from 'react';
+import { LabelHTMLAttributes, RefCallback } from 'react';
 import { InputSizeProps } from '../shared/input.cva';
 import { LabelBaseProps } from '../shared/label.cva';
 export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
@@ -7,7 +7,7 @@ export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
     isRequired?: boolean;
     isDisabled?: boolean;
     ref?: RefCallback<HTMLOrSVGElement>;
-    labelProps?: DOMAttributes<HTMLLabelElement>;
+    labelProps?: DOMAttributes<HTMLLabelElement> & LabelHTMLAttributes<HTMLLabelElement>;
     className?: string;
 }
 export declare const FormFieldLabel: ({ ref, as, label, isRequired, isDisabled, labelProps, className, }: FormFieldLabelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -170,8 +170,10 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 				setRenderInput(true);
 			},
 			isClearable: false,
-			children: (dataAttributeProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			labelPlacement: "content-row",
+			children: ({ id, ...dataAttributeProps }) => /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx("input", {
+					id,
 					readOnly: true,
 					disabled: isDisabled,
 					tabIndex: -1,
@@ -190,6 +192,7 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 					children: "-"
 				}),
 				/* @__PURE__ */ jsx("input", {
+					id: `${id}-max`,
 					readOnly: true,
 					disabled: isDisabled,
 					tabIndex: -1,

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

@@ -33,8 +33,12 @@ type InputFrameDataAttributeProps = {
     "data-is-filled"?: boolean;
     "data-is-required"?: boolean;
 };
-type InputFrameChildren = ReactNode | ((dataAttributeProps: InputFrameDataAttributeProps) => ReactNode);
+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;
@@ -44,6 +48,7 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     leadingContent?: ReactNode;
     leadingIcon?: InputFrameIcon;
     actionContent?: ReactNode;
+    actionContentPlacement?: InputFrameActionContentPlacement;
     trailingContent?: ReactNode;
     trailingIcon?: InputFrameIcon;
     trailingAction?: ReactNode;
@@ -58,6 +63,7 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     onClear?: () => void;
     dataAttributes?: InputFrameDataAttributes;
     typographySize?: TypographyVariantProps["size"];
+    id?: string;
     inputClassName?: string;
     contentClassName?: string;
     contentWrapperClassName?: string;

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

@@ -10,7 +10,7 @@ import { FormField } from "../FormField/FormField.js";
 import { TooltipWrapper } from "../shared/TooltipWrapper.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { isValidElement } from "react";
+import { isValidElement, useId } from "react";
 //#region src/components/inputs/Skeleton/InputFrame.tsx
 var InputFrame = (props) => {
 	const ui = UIConfig.useConfig();
@@ -18,7 +18,8 @@ var InputFrame = (props) => {
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
 	const typographyCva = UIStyle.useCva("typography.cva", typography);
-	const { ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, labelPlacement = "content-wrapper", trailingClassName, variant: variantProp, as: asProp, size: sizeProp } = props;
+	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, labelPlacement = "content-wrapper", trailingClassName, 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;
@@ -29,6 +30,12 @@ var InputFrame = (props) => {
 	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 ?? "",
@@ -43,7 +50,10 @@ var InputFrame = (props) => {
 		errorClassName,
 		className
 	};
-	const resolvedHeaderProps = headerProps ?? {
+	const resolvedHeaderProps = headerProps ? {
+		...headerProps,
+		labelProps
+	} : {
 		label: label ?? "",
 		tooltipText,
 		helperText,
@@ -107,12 +117,16 @@ var InputFrame = (props) => {
 							children: renderIconVisual(leadingIcon)
 						}),
 						labelPlacement === "content-row" && labelContent,
+						actionContentPlacement === "content-row" && actionContent,
 						/* @__PURE__ */ jsxs("div", {
 							className: resolvedContentWrapperClassName,
 							children: [
 								labelPlacement === "content-wrapper" && labelContent,
-								actionContent,
-								typeof children === "function" ? children(dataAttributeProps) : children
+								actionContentPlacement === "content-wrapper" && actionContent,
+								typeof children === "function" ? children({
+									...dataAttributeProps,
+									id: inputId
+								}) : children
 							]
 						})
 					]

package/package.json

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