feat: Add IconField

tugcekucukoglu · tugcekucukoglu · commit 796ec83bf672 · 2025-08-01T15:19:51.000+03:00
diff --git a/packages/headless/src/iconfield/index.ts b/packages/headless/src/iconfield/index.ts
@@ -0,0 +1,2 @@
+export * from './useIconField';
+export * from './useIconField.props';
diff --git a/packages/headless/src/iconfield/useIconField.props.ts b/packages/headless/src/iconfield/useIconField.props.ts
@@ -0,0 +1,3 @@
+import type { useIconFieldProps } from '@primereact/types/shared/iconfield';
+
+export const defaultProps: useIconFieldProps = {};
diff --git a/packages/headless/src/iconfield/useIconField.test.ts b/packages/headless/src/iconfield/useIconField.test.ts
diff --git a/packages/headless/src/iconfield/useIconField.ts b/packages/headless/src/iconfield/useIconField.ts
@@ -0,0 +1,7 @@
+import { withHeadless } from '@primereact/core/headless';
+import { defaultProps } from './useIconField.props';
+
+export const useIconField = withHeadless({
+    name: 'useIconField',
+    defaultProps
+});
diff --git a/packages/primereact/src/iconfield/IconField.context.ts b/packages/primereact/src/iconfield/IconField.context.ts
@@ -0,0 +1,4 @@
+import { createOptionalContext } from '@primereact/core/utils';
+import type { IconFieldInstance } from '@primereact/types/shared/iconfield';
+
+export const [IconFieldProvider, useIconFieldContext] = createOptionalContext<IconFieldInstance>();
diff --git a/packages/primereact/src/iconfield/IconField.props.ts b/packages/primereact/src/iconfield/IconField.props.ts
@@ -0,0 +1,5 @@
+import type { IconFieldProps } from '@primereact/types/shared/iconfield';
+
+export const defaultProps: IconFieldProps = {
+    as: 'div'
+};
diff --git a/packages/primereact/src/iconfield/IconField.test.ts b/packages/primereact/src/iconfield/IconField.test.ts
diff --git a/packages/primereact/src/iconfield/IconField.tsx b/packages/primereact/src/iconfield/IconField.tsx
@@ -0,0 +1,41 @@
+'use client';
+import { Component } from '@primereact/core/component';
+import { useIconField } from '@primereact/headless/iconfield';
+import { styles } from '@primereact/styles/iconfield';
+import { mergeProps } from '@primeuix/utils';
+import { withComponent } from 'primereact/base';
+import * as React from 'react';
+import { IconFieldProvider } from './IconField.context';
+import { defaultProps } from './IconField.props';
+import { InputIcon } from './icon';
+
+export const IconField = withComponent({
+    name: 'IconField',
+    defaultProps,
+    styles,
+    setup(instance) {
+        const inputicon = useIconField(instance?.inProps);
+
+        return inputicon;
+    },
+    render(instance) {
+        const { id, props, ptmi, cx } = instance;
+
+        const rootProps = mergeProps(
+            {
+                id,
+                className: cx('root')
+            },
+            ptmi('root')
+        );
+
+        return (
+            <IconFieldProvider value={instance}>
+                <Component instance={instance} attrs={rootProps} children={props.children} />
+            </IconFieldProvider>
+        );
+    },
+    components: {
+        Icon: InputIcon
+    }
+});
diff --git a/packages/primereact/src/iconfield/icon/InputIcon.props.ts b/packages/primereact/src/iconfield/icon/InputIcon.props.ts
@@ -0,0 +1,5 @@
+import { InputIconProps } from '@primereact/types/shared/iconfield';
+
+export const defaultIconProps: InputIconProps = {
+    as: 'div'
+};
diff --git a/packages/primereact/src/iconfield/icon/InputIcon.tsx b/packages/primereact/src/iconfield/icon/InputIcon.tsx
@@ -0,0 +1,29 @@
+'use client';
+import { Component } from '@primereact/core/component';
+import { mergeProps } from '@primeuix/utils';
+import { withComponent } from 'primereact/base';
+import * as React from 'react';
+import { useIconFieldContext } from '../IconField.context';
+import { defaultIconProps } from './InputIcon.props';
+
+export const InputIcon = withComponent({
+    name: 'InputIcon',
+    defaultProps: defaultIconProps,
+    setup() {
+        const iconfield = useIconFieldContext();
+
+        return { iconfield };
+    },
+    render(instance) {
+        const { props, ptmi, iconfield } = instance;
+
+        const rootProps = mergeProps(
+            {
+                className: iconfield?.cx('icon')
+            },
+            ptmi('root')
+        );
+
+        return <Component instance={instance} attrs={rootProps} children={props.children} />;
+    }
+});
diff --git a/packages/primereact/src/iconfield/icon/index.ts b/packages/primereact/src/iconfield/icon/index.ts
@@ -0,0 +1,3 @@
+'use client';
+export * from './InputIcon';
+export * from './InputIcon.props';
diff --git a/packages/primereact/src/iconfield/index.ts b/packages/primereact/src/iconfield/index.ts
@@ -0,0 +1,4 @@
+'use client';
+export * from './IconField';
+export * from './IconField.context';
+export * from './IconField.props';
diff --git a/packages/styles/src/iconfield/IconField.style.ts b/packages/styles/src/iconfield/IconField.style.ts
@@ -0,0 +1,12 @@
+import { createStyles } from '@primereact/styles/utils';
+import type { IconFieldInstance } from '@primereact/types/shared/iconfield';
+import { style } from '@primeuix/styles/iconfield';
+
+export const styles = createStyles<IconFieldInstance>({
+    name: 'iconfield',
+    style,
+    classes: {
+        root: 'p-iconfield',
+        icon: 'p-inputicon'
+    }
+});
diff --git a/packages/styles/src/iconfield/index.ts b/packages/styles/src/iconfield/index.ts
@@ -0,0 +1 @@
+export * from './IconField.style';
diff --git a/packages/types/src/shared/iconfield/IconField.types.ts b/packages/types/src/shared/iconfield/IconField.types.ts
@@ -0,0 +1,73 @@
+/**
+ *
+ * IconField wraps an input and an icon.
+ *
+ * [Live Demo](https://www.primereact.org/iconfield/)
+ *
+ * @module iconfield
+ * @group components
+ *
+ */
+import type { ComponentInstance } from '@primereact/types/core';
+import type { BaseComponentProps, PassThroughType } from '..';
+import type { useIconFieldExposes, useIconFieldProps, useIconFieldState } from './useIconField.types';
+
+/**
+ * Defines passthrough(pt) options type in IconField component.
+ */
+export type IconFieldPassThroughType<E> = PassThroughType<IconFieldInstance, E>;
+
+/**
+ * Defines passthrough(pt) options of IconField component.
+ */
+export interface IconFieldPassThrough {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: IconFieldPassThroughType<React.InputHTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to pass attributes to the icon's DOM element.
+     */
+    icon?: IconFieldPassThroughType<React.InputHTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines valid properties in IconField component.
+ */
+export interface IconFieldProps extends BaseComponentProps<IconFieldInstance, useIconFieldProps, IconFieldPassThrough> {}
+
+/**
+ * Defines valid state in IconField component.
+ * @extends useIconFieldState
+ */
+export interface IconFieldState extends useIconFieldState {}
+
+/**
+ * Defines the methods and properties exposed by IconField component.
+ * @extends useIconFieldExposes
+ */
+export interface IconFieldExposes extends useIconFieldExposes {}
+
+/**
+ * Defines the CSS class names used in the IconField component.
+ */
+export const IconFieldClassNames = {
+    /**
+     * Class name of the root element
+     */
+    root: 'p-iconfield',
+    /**
+     * Class name of the icon element
+     */
+    icon: 'p-inputicon'
+} as const;
+
+/**
+ * Type representing the CSS class names used in the IconField component.
+ */
+export type IconFieldClassNamesType = (typeof IconFieldClassNames)[keyof typeof IconFieldClassNames];
+
+/**
+ * Instance of IconField component.
+ */
+export type IconFieldInstance = ComponentInstance<IconFieldProps, IconFieldState, IconFieldExposes>;
diff --git a/packages/types/src/shared/iconfield/InputIcon.types.ts b/packages/types/src/shared/iconfield/InputIcon.types.ts
@@ -0,0 +1,68 @@
+/**
+ *
+ * InputIcon is a component that displays an icon.
+ *
+ * [Live Demo](https://www.primereact.org/iconfield/)
+ *
+ * @module inputicon
+ * @group components
+ *
+ */
+import type { ComponentInstance } from '@primereact/types/core';
+import type { BaseComponentProps, PassThroughType } from '..';
+import { IconFieldInstance } from './IconField.types';
+
+/**
+ * Defines passthrough(pt) options type in InputIcon component.
+ */
+export type InputIconPassThroughType<E> = PassThroughType<InputIconInstance, E>;
+
+/**
+ * Defines passthrough(pt) options of InputIcon component.
+ */
+export interface InputIconPassThrough {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: InputIconPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines valid properties in InputIcon component.
+ */
+export interface InputIconProps extends BaseComponentProps<InputIconInstance, unknown, InputIconPassThrough> {}
+
+/**
+ * Defines valid state in InputIcon component.
+ */
+export interface InputIconState {}
+
+/**
+ * Defines the methods and properties exposed by InputIcon component.
+ */
+export interface InputIconExposes {
+    /**
+     * Instance of the IconField component.
+     */
+    iconfield: IconFieldInstance | undefined | null;
+}
+
+/**
+ * Defines the CSS class names used in the InputIcon component.
+ */
+export const InputIconClassNames = {
+    /**
+     * Class name of the root element
+     */
+    root: 'p-inputicon'
+} as const;
+
+/**
+ * Type representing the CSS class names used in the InputIcon component.
+ */
+export type InputIconClassNamesType = (typeof InputIconClassNames)[keyof typeof InputIconClassNames];
+
+/**
+ * Instance of InputIcon component.
+ */
+export type InputIconInstance = ComponentInstance<InputIconProps, InputIconState, InputIconExposes>;
diff --git a/packages/types/src/shared/iconfield/index.ts b/packages/types/src/shared/iconfield/index.ts
@@ -0,0 +1,3 @@
+export * from './IconField.types';
+export * from './InputIcon.types';
+export * from './useIconField.types';
diff --git a/packages/types/src/shared/iconfield/useIconField.types.ts b/packages/types/src/shared/iconfield/useIconField.types.ts
@@ -0,0 +1,31 @@
+/**
+ *
+ * The useIconField manages the state and functionality of an icon field component.
+ *
+ * [Live Demo](https://www.primereact.org/iconfield/)
+ *
+ * @module useIconField
+ * @group headless
+ *
+ */
+import type { HeadlessInstance } from '@primereact/types/core';
+
+/**
+ * Defines valid properties in useIconField.
+ */
+export interface useIconFieldProps {}
+
+/**
+ * Defines valid state in useIconField.
+ */
+export interface useIconFieldState {}
+
+/**
+ * Defines the methods and properties exposed by useIconField.
+ */
+export interface useIconFieldExposes {}
+
+/**
+ * Instance of useIconField headless.
+ */
+export type useIconFieldInstance = HeadlessInstance<useIconFieldProps, useIconFieldState, useIconFieldExposes>;

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from './useIconField';`
	`2`	`+export * from './useIconField.props';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import type { useIconFieldProps } from '@primereact/types/shared/iconfield';`
	`2`	`+`
	`3`	`+export const defaultProps: useIconFieldProps = {};`