@delightui/components 0.1.122 → 0.1.123

package/dist/cjs/components/molecules/ChipInput/ChipInput.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
-import { ChipInputProps } from "./ChipInput.types";
-declare const _default: React.NamedExoticComponent<ChipInputProps>;
-export default _default;
+import { ChipInputProps, OptionLike } from "./ChipInput.types";
+declare const ChipInput: <T extends string[] | OptionLike[]>(props: ChipInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default ChipInput;

package/dist/cjs/components/molecules/ChipInput/ChipInput.presenter.d.ts

@@ -1,28 +1,14 @@
-import { ChipInputProps, ChipListItemProps } from './ChipInput.types';
-declare const usePresenter: (props: ChipInputProps) => {
+import { ChipInputProps } from './ChipInput.types';
+import { ChipProps } from '../../atoms/Chip/Chip.types';
+import { OptionLike } from './ChipInput.types';
+declare const usePresenter: <T extends string[] | OptionLike[]>(props: ChipInputProps<T>) => {
     handleChipInputAreaClick: () => void;
-    chips: (ChipListItemProps | {
-        type: string;
-        props: {
-            onKeyUp: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-            value: string;
-            onValueChange: (value: string) => void;
-            placeholder: string;
-            className: string;
-            disabled: boolean;
-            id: string | undefined;
-        };
-        inputRef: import("react").RefObject<HTMLInputElement>;
-    })[];
-    optionList: {
-        id: string;
-        children: string;
-        className: string;
-        onValueChange: () => void;
-        checked: boolean;
-        value: boolean;
-        labelAlignment: string;
-    }[];
+    handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    inputValue: string;
+    onValueChange: (value: string) => void;
+    chips: ChipProps[];
+    inputRef: import("react").RefObject<HTMLInputElement>;
+    optionList: import("../..").CheckboxItemProps[];
     variantProps: {
         'component-variant': string;
     };

package/dist/cjs/components/molecules/ChipInput/ChipInput.types.d.ts

@@ -1,17 +1,129 @@
-import { RefObject } from 'react';
-import type { ChipProps, InputProps } from "../../atoms";
 import { ControlledFormComponentProps } from '../FormField/FormField.types';
-export type ChipListItemTypeEnum = 'chip' | 'input';
-export type ChipListItemProps = {
-    type: ChipListItemTypeEnum;
-    props: ChipProps | InputProps;
-    inputRef?: RefObject<HTMLInputElement>;
+/**
+ * Represents an option that can be selected in the ChipInput component.
+ * This is the normalized format used internally to handle both string arrays and object arrays.
+ */
+export type OptionLike = {
+    /** Unique identifier for the option. Can be string or number. */
+    key: string | number;
+    /** Display text shown to the user for this option. */
+    label: string;
 };
-export type ChipInputProps = ControlledFormComponentProps<string[]> & {
+/**
+ * Type alias for the key property of OptionLike.
+ * Used for type safety when working with selected values.
+ */
+export type OptionLikeKey = OptionLike['key'];
+/**
+ * Props for the ChipInput component.
+ *
+ * @template T - The type of the value array. Can be string[] or OptionLike[].
+ *               This generic ensures type consistency between input and output.
+ *
+ * @example
+ * ```tsx
+ * // String array usage
+ * const [fruits, setFruits] = useState<string[]>(['apple']);
+ * <ChipInput
+ *   value={fruits}
+ *   onValueChange={setFruits}
+ *   options={['apple', 'banana', 'cherry']}
+ * />
+ *
+ * // OptionLike array usage
+ * const [items, setItems] = useState<OptionLike[]>([{key: 1, label: 'Apple'}]);
+ * <ChipInput
+ *   value={items}
+ *   onValueChange={setItems}
+ *   options={[{key: 1, label: 'Apple'}, {key: 2, label: 'Banana'}]}
+ * />
+ * ```
+ */
+export type ChipInputProps<T = string[] | OptionLike[]> = Omit<ControlledFormComponentProps<OptionLikeKey[]>, 'value' | 'onValueChange'> & {
+    /**
+     * Current selected values. Type matches the generic T parameter.
+     * For string arrays: ['apple', 'banana']
+     * For OptionLike arrays: [{key: 1, label: 'Apple'}, {key: 2, label: 'Banana'}]
+     */
+    value?: T;
+    /**
+     * Callback fired when the selected values change.
+     * Returns the same type as the input value for type consistency.
+     *
+     * @param value - The new array of selected values in the same format as input
+     */
+    onValueChange?: (value: T) => void;
+    /**
+     * Current value of the text input field.
+     * Used for controlled input behavior and filtering.
+     */
     inputValue?: string;
+    /**
+     * Callback fired when the input field value changes.
+     *
+     * @param value - The new input field value
+     */
     onInputChange?: (value: string) => void;
-    options?: string[];
+    /**
+     * Available options for selection. Can be either:
+     * - string[]: Simple array of strings like ['apple', 'banana']
+     * - OptionLike[]: Array of objects like [{key: 1, label: 'Apple'}]
+     *
+     * Options are automatically filtered as the user types in the input field.
+     */
+    options?: string[] | OptionLike[];
+    /**
+     * Placeholder text shown in the input field when it's empty.
+     *
+     * @default undefined
+     */
     placeholder?: string;
+    /**
+     * Additional CSS class name applied to the root element.
+     */
     className?: string;
-    onAddNewOption?: (value: string) => void;
+    /**
+     * Optional callback for creating new items when they don't exist in options.
+     * Can be synchronous or asynchronous for API integration.
+     *
+     * When this prop is provided:
+     * - Optimistic UI updates are applied immediately
+     * - If async, the UI shows loading states and handles errors
+     * - Failed operations are automatically reverted
+     *
+     * @param newItemValue - The text value entered by the user
+     * @returns Promise<OptionLike> for async operations, OptionLike for sync operations
+     *
+     * @example
+     * ```tsx
+     * // Sync operation
+     * onAddItem={(value) => ({ key: value, label: value })}
+     *
+     * // Async operation
+     * onAddItem={async (value) => {
+     *   const newItem = await api.createItem(value);
+     *   return { key: newItem.id, label: newItem.name };
+     * }}
+     * ```
+     */
+    onAddItem?: (newItemValue: string) => Promise<OptionLike> | OptionLike;
+    /**
+     * Optional callback for deleting items.
+     * Typically used for API integration to sync deletions with backend.
+     *
+     * When provided, this callback is called when a chip is removed.
+     * The component handles UI updates automatically.
+     *
+     * @param keyToDelete - The key of the item being deleted
+     * @returns Promise<void> for the deletion operation
+     *
+     * @example
+     * ```tsx
+     * onDeleteItem={async (key) => {
+     *   await api.deleteItem(key);
+     *   // Component automatically updates UI
+     * }}
+     * ```
+     */
+    onDeleteItem?: (keyToDelete: OptionLikeKey) => Promise<void>;
 };

package/dist/cjs/components/molecules/ChipInput/ChipInput.utils.d.ts

@@ -1,2 +1,63 @@
-import React from 'react';
-export declare const onEnterKeyPreventFormSubmit: (onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>) => (e: React.KeyboardEvent<HTMLInputElement>) => void;
+import { ChipProps } from '../../atoms/Chip/Chip.types';
+import { CheckboxItemProps } from '../../atoms/CheckboxItem/CheckboxItem.types';
+import { OptionLike, OptionLikeKey } from './ChipInput.types';
+/**
+ * Normalizes string array or OptionLike array to OptionLike array
+ */
+export declare const normalizeToOptionLike: (options: string[] | OptionLike[]) => OptionLike[];
+/**
+ * Normalizes string array or OptionLike array to OptionLikeKey array
+ */
+export declare const normalizeToOptionLikeKey: (options: string[] | OptionLike[]) => OptionLikeKey[];
+/**
+ * Creates chip props for a selected value using OptionLike
+ */
+export declare const createChipProps: (option: OptionLike, onRemove: (key: OptionLikeKey) => void, className?: string) => ChipProps;
+/**
+ * Creates checkbox item props for context menu options using OptionLike
+ */
+export declare const createCheckboxItemProps: (option: OptionLike, isChecked: boolean, onSelect: (key: OptionLikeKey) => void, className?: string) => CheckboxItemProps;
+/**
+ * Toggles an option key in the selected keys array
+ */
+export declare const toggleOptionInArray: (selectedKeys: OptionLikeKey[], optionKey: OptionLikeKey) => OptionLikeKey[];
+/**
+ * Adds a new OptionLike to available options if it doesn't exist
+ */
+export declare const addUniqueOption: (availableOptions: OptionLike[], newOption: OptionLike) => OptionLike[];
+/**
+ * Handles Enter key press for adding new chips
+ */
+export declare const handleEnterKeyForChip: (event: React.KeyboardEvent<HTMLInputElement>, inputValue: string, onAddChip: (value: string) => void, onClearInput: () => void) => void;
+/**
+ * Finds an OptionLike by its key
+ */
+export declare const findOptionByKey: (options: OptionLike[], key: OptionLikeKey) => OptionLike | undefined;
+/**
+ * Converts OptionLikeKey array back to original format (string[] or OptionLike[])
+ */
+export declare const convertKeysToOriginalFormat: <T extends string[] | OptionLike[]>(keys: OptionLikeKey[], originalValue: T | undefined, availableOptions: OptionLike[]) => T;
+/**
+ * Filters options by input value for search functionality
+ */
+export declare const filterOptionsByInput: (options: OptionLike[], inputValue: string) => OptionLike[];
+/**
+ * Creates an optimistic item for async operations
+ */
+export declare const createOptimisticItem: (value: string) => OptionLike;
+/**
+ * Adds a key to selected keys array
+ */
+export declare const addKeyToSelection: (selectedKeys: OptionLikeKey[], keyToAdd: OptionLikeKey) => OptionLikeKey[];
+/**
+ * Removes a key from selected keys array
+ */
+export declare const removeKeyFromSelection: (selectedKeys: OptionLikeKey[], keyToRemove: OptionLikeKey) => OptionLikeKey[];
+/**
+ * Replaces a temporary key with a real key in selected keys array
+ */
+export declare const replaceKeyInSelection: (selectedKeys: OptionLikeKey[], oldKey: OptionLikeKey, newKey: OptionLikeKey) => OptionLikeKey[];
+/**
+ * Handles async add item operation with optimistic updates
+ */
+export declare const handleAsyncAddItem: (inputValue: string, onAddItem: (value: string) => Promise<OptionLike>, currentOptions: OptionLike[], currentSelectedKeys: OptionLikeKey[], setOptions: (options: OptionLike[]) => void, setSelectedKeys: (keys: OptionLikeKey[]) => void) => Promise<void>;

package/dist/cjs/library.css

@@ -3708,6 +3708,9 @@ span.flatpickr-weekday {
 }
 
 .ChipInput-module_chipInput__tCCgW .ChipInput-module_trigger__KLvR4 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   padding-top: calc(var(--chip-input-padding-top) - var(--chip-input-border-top-width));
   padding-bottom: calc(var(--chip-input-padding-bottom) - var(--chip-input-border-bottom-width));
   padding-left: calc(var(--chip-input-padding-left) - var(--chip-input-border-left-width));