feat: New InputGroup component

tugcekucukoglu · tugcekucukoglu · commit 647df38bc20c · 2025-08-11T16:19:37.000+03:00
diff --git a/packages/headless/src/inputgroup/index.ts b/packages/headless/src/inputgroup/index.ts
@@ -0,0 +1,2 @@
+export * from './useInputGroup';
+export * from './useInputGroup.props';
diff --git a/packages/headless/src/inputgroup/useInputGroup.props.ts b/packages/headless/src/inputgroup/useInputGroup.props.ts
@@ -0,0 +1,3 @@
+import type { useInputGroupProps } from '@primereact/types/shared/inputgroup';
+
+export const defaultProps: useInputGroupProps = {};
diff --git a/packages/headless/src/inputgroup/useInputGroup.test.ts b/packages/headless/src/inputgroup/useInputGroup.test.ts
diff --git a/packages/headless/src/inputgroup/useInputGroup.ts b/packages/headless/src/inputgroup/useInputGroup.ts
@@ -0,0 +1,7 @@
+import { withHeadless } from '@primereact/core/headless';
+import { defaultProps } from './useInputGroup.props';
+
+export const useInputGroup = withHeadless({
+    name: 'useInputGroup',
+    defaultProps
+});
diff --git a/packages/primereact/src/inputgroup/InputGroup.context.ts b/packages/primereact/src/inputgroup/InputGroup.context.ts
@@ -0,0 +1,4 @@
+import { createOptionalContext } from '@primereact/core/utils';
+import type { InputGroupInstance } from '@primereact/types/shared/inputgroup';
+
+export const [InputGroupProvider, useInputGroupContext] = createOptionalContext<InputGroupInstance>();
diff --git a/packages/primereact/src/inputgroup/InputGroup.props.ts b/packages/primereact/src/inputgroup/InputGroup.props.ts
@@ -0,0 +1,5 @@
+import type { InputGroupProps } from '@primereact/types/shared/inputgroup';
+
+export const defaultProps: InputGroupProps = {
+    as: 'div'
+};
diff --git a/packages/primereact/src/inputgroup/InputGroup.test.ts b/packages/primereact/src/inputgroup/InputGroup.test.ts
diff --git a/packages/primereact/src/inputgroup/InputGroup.tsx b/packages/primereact/src/inputgroup/InputGroup.tsx
@@ -0,0 +1,41 @@
+'use client';
+import { Component } from '@primereact/core/component';
+import { useInputGroup } from '@primereact/headless/inputgroup';
+import { styles } from '@primereact/styles/inputgroup';
+import { mergeProps } from '@primeuix/utils';
+import { withComponent } from 'primereact/base';
+import * as React from 'react';
+import { InputGroupProvider } from './InputGroup.context';
+import { defaultProps } from './InputGroup.props';
+import { InputGroupAddon } from './addon';
+
+export const InputGroup = withComponent({
+    name: 'InputGroup',
+    defaultProps,
+    styles,
+    setup(instance) {
+        const inputgroup = useInputGroup(instance?.inProps);
+
+        return inputgroup;
+    },
+    render(instance) {
+        const { id, props, ptmi, cx } = instance;
+
+        const rootProps = mergeProps(
+            {
+                id,
+                className: cx('root')
+            },
+            ptmi('root')
+        );
+
+        return (
+            <InputGroupProvider value={instance}>
+                <Component instance={instance} attrs={rootProps} children={props.children} />
+            </InputGroupProvider>
+        );
+    },
+    components: {
+        Addon: InputGroupAddon
+    }
+});
diff --git a/packages/primereact/src/inputgroup/addon/InputGroupAddon.props.ts b/packages/primereact/src/inputgroup/addon/InputGroupAddon.props.ts
@@ -0,0 +1,5 @@
+import type { InputGroupAddonProps } from '@primereact/types/shared/inputgroup';
+
+export const defaultAddonProps: InputGroupAddonProps = {
+    as: 'div'
+};
diff --git a/packages/primereact/src/inputgroup/addon/InputGroupAddon.tsx b/packages/primereact/src/inputgroup/addon/InputGroupAddon.tsx
@@ -0,0 +1,30 @@
+'use client';
+import { Component } from '@primereact/core/component';
+import { mergeProps } from '@primeuix/utils';
+import { withComponent } from 'primereact/base';
+import * as React from 'react';
+import { useInputGroupContext } from '../InputGroup.context';
+import { defaultAddonProps } from './InputGroupAddon.props';
+
+export const InputGroupAddon = withComponent({
+    name: 'InputGroupAddon',
+    defaultProps: defaultAddonProps,
+    setup() {
+        const inputgroup = useInputGroupContext();
+
+        return { inputgroup };
+    },
+    render(instance) {
+        const { props, ptmi, inputgroup } = instance;
+
+        const rootProps = mergeProps(
+            {
+                className: inputgroup?.cx('addon')
+            },
+            inputgroup?.ptm('addon'),
+            ptmi('root')
+        );
+
+        return <Component instance={instance} attrs={rootProps} children={props.children} />;
+    }
+});
diff --git a/packages/primereact/src/inputgroup/addon/index.ts b/packages/primereact/src/inputgroup/addon/index.ts
@@ -0,0 +1,3 @@
+'use client';
+export * from './InputGroupAddon';
+export * from './InputGroupAddon.props';
diff --git a/packages/primereact/src/inputgroup/index.ts b/packages/primereact/src/inputgroup/index.ts
@@ -0,0 +1,4 @@
+'use client';
+export * from './InputGroup';
+export * from './InputGroup.context';
+export * from './InputGroup.props';
diff --git a/packages/styles/src/inputgroup/InputGroup.style.ts b/packages/styles/src/inputgroup/InputGroup.style.ts
@@ -0,0 +1,12 @@
+import { createStyles } from '@primereact/styles/utils';
+import type { InputGroupInstance } from '@primereact/types/shared/inputgroup';
+import { style } from '@primeuix/styles/inputgroup';
+
+export const styles = createStyles<InputGroupInstance>({
+    name: 'inputgroup',
+    style,
+    classes: {
+        root: 'p-inputgroup',
+        addon: 'p-inputgroupaddon'
+    }
+});
diff --git a/packages/styles/src/inputgroup/index.ts b/packages/styles/src/inputgroup/index.ts
@@ -0,0 +1 @@
+export * from './InputGroup.style';
diff --git a/packages/types/src/shared/inputgroup/InputGroup.types.ts b/packages/types/src/shared/inputgroup/InputGroup.types.ts
@@ -0,0 +1,69 @@
+/**
+ *
+ * InputGroup displays text, icon, buttons and other content can be grouped next to an input.
+ *
+ * [Live Demo](https://www.primereact.org/inputgroup/)
+ *
+ * @module inputgroup
+ * @group components
+ *
+ */
+import type { ComponentInstance } from '@primereact/types/core';
+import type { BaseComponentProps, PassThroughType } from '..';
+import type { useInputGroupExposes, useInputGroupProps, useInputGroupState } from './useInputGroup.types';
+
+/**
+ * Defines passthrough(pt) options type in InputGroup component.
+ */
+export type InputGroupPassThroughType<E> = PassThroughType<InputGroupInstance, E>;
+
+/**
+ * Defines passthrough(pt) options of InputGroup component.
+ */
+export interface InputGroupPassThrough {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: InputGroupPassThroughType<React.InputHTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to pass attributes to the addon's DOM element.
+     */
+    addon?: InputGroupPassThroughType<React.InputHTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines valid properties in InputGroup component.
+ */
+export interface InputGroupProps extends BaseComponentProps<InputGroupInstance, useInputGroupProps, InputGroupPassThrough> {}
+
+/**
+ * Defines valid state in InputGroup component.
+ * @extends useInputGroupState
+ */
+export interface InputGroupState extends useInputGroupState {}
+
+/**
+ * Defines the methods and properties exposed by InputGroup component.
+ * @extends useInputGroupExposes
+ */
+export interface InputGroupExposes extends useInputGroupExposes {}
+
+/**
+ * Defines the CSS class names used in the InputGroup component.
+ */
+export const InputGroupClassNames = {
+    /**
+     * Class name of the root element
+     */
+    root: 'p-inputgroup'
+} as const;
+
+/**
+ * Type representing the CSS class names used in the InputGroup component.
+ */
+export type InputGroupClassNamesType = (typeof InputGroupClassNames)[keyof typeof InputGroupClassNames];
+
+/**
+ * Instance of InputGroup component.
+ */
+export type InputGroupInstance = ComponentInstance<InputGroupProps, InputGroupState, InputGroupExposes>;
diff --git a/packages/types/src/shared/inputgroup/InputGroupAddon.types.ts b/packages/types/src/shared/inputgroup/InputGroupAddon.types.ts
@@ -0,0 +1,68 @@
+/**
+ *
+ * InputGroupAddon is a component that displays a addon.
+ *
+ * [Live Demo](https://www.primereact.org/inputgroup/)
+ *
+ * @module inputgroupaddon
+ * @group components
+ *
+ */
+import type { ComponentInstance } from '@primereact/types/core';
+import type { BaseComponentProps, PassThroughType } from '..';
+import type { InputGroupInstance } from './InputGroup.types';
+
+/**
+ * Defines passthrough(pt) options type in InputGroupAddon component.
+ */
+export type InputGroupAddonPassThroughType<E> = PassThroughType<InputGroupAddonInstance, E>;
+
+/**
+ * Defines passthrough(pt) options of InputGroupAddon component.
+ */
+export interface InputGroupAddonPassThrough {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: InputGroupAddonPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+}
+
+/**
+ * Defines valid properties in InputGroupAddon component.
+ */
+export interface InputGroupAddonProps extends BaseComponentProps<InputGroupAddonInstance, unknown, InputGroupAddonPassThrough> {}
+
+/**
+ * Defines valid state in InputGroupAddon component.
+ */
+export interface InputGroupAddonState {}
+
+/**
+ * Defines the methods and properties exposed by InputGroupAddon component.
+ */
+export interface InputGroupAddonExposes {
+    /**
+     * Instance of the InputGroup component.
+     */
+    inputgroup: InputGroupInstance | undefined | null;
+}
+
+/**
+ * Defines the CSS class names used in the InputGroupAddon component.
+ */
+export const InputGroupAddonClassNames = {
+    /**
+     * Class name of the root element
+     */
+    root: 'p-inputgroup-addon'
+} as const;
+
+/**
+ * Type representing the CSS class names used in the InputGroupAddon component.
+ */
+export type InputGroupAddonClassNamesType = (typeof InputGroupAddonClassNames)[keyof typeof InputGroupAddonClassNames];
+
+/**
+ * Instance of InputGroupAddon component.
+ */
+export type InputGroupAddonInstance = ComponentInstance<InputGroupAddonProps, InputGroupAddonState, InputGroupAddonExposes>;
diff --git a/packages/types/src/shared/inputgroup/index.ts b/packages/types/src/shared/inputgroup/index.ts
@@ -0,0 +1,3 @@
+export * from './InputGroup.types';
+export * from './InputGroupAddon.types';
+export * from './useInputGroup.types';
diff --git a/packages/types/src/shared/inputgroup/useInputGroup.types.ts b/packages/types/src/shared/inputgroup/useInputGroup.types.ts
@@ -0,0 +1,31 @@
+/**
+ *
+ * The useInputGroup manages the state and functionality of an input group component.
+ *
+ * [Live Demo](https://www.primereact.org/inputgroup/)
+ *
+ * @module useInputGroup
+ * @group headless
+ *
+ */
+import type { HeadlessInstance } from '@primereact/types/core';
+
+/**
+ * Defines valid properties in useInputGroup.
+ */
+export interface useInputGroupProps {}
+
+/**
+ * Defines valid state in useInputGroup.
+ */
+export interface useInputGroupState {}
+
+/**
+ * Defines the methods and properties exposed by useInputGroup.
+ */
+export interface useInputGroupExposes {}
+
+/**
+ * Instance of useInputGroup headless.
+ */
+export type useInputGroupInstance = HeadlessInstance<useInputGroupProps, useInputGroupState, useInputGroupExposes>;

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