@asgardeo/react/dist/components/primitives/KeyValueInput/KeyValueInput.d.ts

React implementation of Asgardeo JavaScript SDK.

/**
 * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
 *
 * WSO2 LLC. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import { FC } from 'react';
export interface KeyValuePair {
    key: string;
    value: string;
}
export interface KeyValueInputProps {
    /**
     * CSS class name for styling the component.
     */
    className?: string;
    /**
     * Whether the input is disabled.
     */
    disabled?: boolean;
    /**
     * Error message to display.
     */
    error?: string;
    /**
     * Help text to display below the input.
     */
    helperText?: string;
    /**
     * Label for the key input field.
     */
    keyLabel?: string;
    /**
     * Placeholder text for the key input field.
     */
    keyPlaceholder?: string;
    /**
     * Label for the component.
     */
    label?: string;
    /**
     * Maximum number of key-value pairs allowed.
     */
    maxPairs?: number;
    /**
     * Callback fired when the key-value pairs change.
     */
    onChange?: (pairs: KeyValuePair[]) => void;
    /**
     * Callback fired when a pair is added.
     */
    onAdd?: (pair: KeyValuePair) => void;
    /**
     * Callback fired when a pair is removed.
     */
    onRemove?: (pair: KeyValuePair, index: number) => void;
    /**
     * Whether the component is in read-only mode.
     */
    readOnly?: boolean;
    /**
     * Text for the remove button.
     */
    removeButtonText?: string;
    /**
     * Whether the component is required.
     */
    required?: boolean;
    /**
     * Current key-value pairs.
     */
    value?: Record<string, any> | KeyValuePair[];
    /**
     * Label for the value input field.
     */
    valueLabel?: string;
    /**
     * Placeholder text for the value input field.
     */
    valuePlaceholder?: string;
}
/**
 * KeyValueInput component allows users to manage key-value pairs with add/remove functionality.
 * It provides a user-friendly interface for editing organization attributes or similar data structures.
 *
 * @example
 * ```tsx
 * // Basic usage
 * <KeyValueInput
 *   label="Organization Attributes"
 *   onChange={(pairs) => console.log(pairs)}
 * />
 *
 * // With initial values
 * <KeyValueInput
 *   label="Organization Attributes"
 *   value={{department: 'IT', location: 'New York'}}
 *   onChange={(pairs) => console.log(pairs)}
 * />
 *
 * // With add/remove callbacks
 * <KeyValueInput
 *   label="Custom Attributes"
 *   value={attributes}
 *   onChange={(pairs) => setAttributes(pairs)}
 *   onAdd={(pair) => console.log('Added:', pair)}
 *   onRemove={(pair, index) => console.log('Removed:', pair, 'at index:', index)}
 * />
 * ```
 */
declare const KeyValueInput: FC<KeyValueInputProps>;
export default KeyValueInput;