@delightui/components 0.1.115 → 0.1.117

package/dist/index.d.ts

@@ -426,6 +426,11 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'>
      * Icon to be displayed after the input.
      */
     trailingIcon?: React.ReactNode;
+    /**
+     * a function that will preprocess the value before updating the value for form
+     * and onValueChange value
+     */
+    preProcessInput?: (text: string) => string;
     /**
      * provide a way to override the styling
      */
@@ -436,6 +441,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
     inputType?: InputTypeEnum;
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
+    preProcessInput?: (text: string) => string;
     'component-variant'?: string;
 } & React$1.RefAttributes<HTMLInputElement>>;
 
@@ -1162,29 +1168,27 @@ declare const Card: (props: CardProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * Enum for the alignment of the list.
- *
- * @typedef {'Horizontal' | 'Vertical'} ListAlignEnum
  */
 type ListAlignEnum = 'Horizontal' | 'Vertical';
 /**
  * Represents a generic list item.
- *
- * @property {string | number} [id] - A unique identifier for the list item. This is optional and can be auto-generated if not provided.
- * @property {string} [itemClassName] - Additional class for styling the list item.
- * @property {React.CSSProperties} [itemStyle] - Additional styles for the list item.
  */
-type ListItemType = object & {
+type ListItemType = {
     id?: string | number;
     itemClassName?: string;
     itemStyle?: React.CSSProperties;
 };
+/**
+ * Base props shared by all list components.
+ */
+type BaseListProps<T extends ListItemType> = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+    component: React.FC<any>;
+    align?: ListAlignEnum;
+    wrap?: boolean;
+    className?: string;
+};
 /**
  * Props for an individual list item component.
- *
- * @template T - The type of the list item.
- * @property {string | number} id - The unique identifier of the list item.
- * @property {React.FC<any>} component - The React functional component used to render the list item.
- * @property {T} item - The data for the list item.
  */
 type ListItemProps<T extends ListItemType> = Omit<HTMLAttributes<HTMLLIElement>, 'id' | 'children'> & {
     id: string | number;
@@ -1193,69 +1197,39 @@ type ListItemProps<T extends ListItemType> = Omit<HTMLAttributes<HTMLLIElement>,
 };
 /**
  * Props for the repeater list component.
- *
- * @template T - The type of the list items.
  */
-type RepeaterListProps<T extends ListItemType> = Omit<ListProps<T>, 'keyExtractor' | 'sortable' | 'updateSortOrder' | 'align' | 'wrap'>;
+type RepeaterListProps<T extends ListItemType> = BaseListProps<T> & {
+    data?: T[];
+};
+/**
+ * Function type for handling sort order updates.
+ */
+type SortOrderFunction<T extends ListItemType> = (data: T[], oldIndex: number, newIndex: number) => T[] | undefined;
 type SortableTriggerProps = IconButtonProps;
 /**
- * Props for the list wrapper component.
- *
- * @template T - The type of the list items.
- * @property {T[]} [data] - The data to be rendered in the list.
- * @property {React.FC<any>} component - The React functional component used to render each list item.
- * @property {(item: T, index: number) => string | number} [keyExtractor] - A function to extract unique keys for each item.
- * @property {'Horizontal' | 'Vertical'} [align='Vertical'] - The alignment of the list. Defaults to `'Vertical'`.
- * @property {boolean} [wrap] - Whether the list content should wrap.
- * @property {string} [className] - Additional class for styling the list.
- * @property {boolean} [sortable] - Whether the list items can be sorted using drag-and-drop.
- * @property {Dispatch<SetStateAction<T[]>>} [updateSortOrder] - Callback function to update the order of the list items after sorting.
- */
-type ListProps<T extends ListItemType> = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+ * Props for the main List facade component.
+ */
+type ListProps<T extends ListItemType> = BaseListProps<T> & {
     /**
      * The data to be rendered in the list.
      */
     data?: T[];
     /**
-     * The component used to render each item in the list.
-     */
-    component: React.FC<any>;
-    /**
-     * Function to extract keys.
+     * Function to extract keys for items without IDs.
      */
     keyExtractor?: (item: T, index: number) => string | number;
     /**
-     * The alignment of the list.
-     * @default 'Vertical'
-     */
-    align?: ListAlignEnum;
-    /**
-     * Flag to control if the content should wrap.
-     */
-    wrap?: boolean;
-    /**
-     * Additional class for styling.
-     */
-    className?: string;
-    /**
-     * Flag to enable sorting of list items
+     * Flag to enable sorting of list items.
      */
     sortable?: boolean;
     /**
-     * callback function to update the current order of data
-     *
-     * @param data
-     * @returns
+     * Callback function to update the current order of data.
      */
-    updateSortOrder?: (data: T[], oldIndex: number, newIndex: number) => void;
+    updateSortOrder?: SortOrderFunction<T>;
 };
 
 /**
  * A wrapper component that manages the rendering of either a sortable or regular list based on the provided props.
- *
- * @template T - The type of the list items.
- * @param {ListProps<T>} props - The properties for the list wrapper.
- * @returns {JSX.Element} The rendered list component.
  */
 declare const List: <T extends ListItemType>(props: ListProps<T>) => react_jsx_runtime.JSX.Element;
 
@@ -1268,6 +1242,13 @@ declare const List: <T extends ListItemType>(props: ListProps<T>) => react_jsx_r
  */
 declare const SortableItem: <T extends ListItemType>(props: ListItemProps<T>) => react_jsx_runtime.JSX.Element;
 
+/**
+ * A list component that renders a list of items without any parent container.
+ *
+ * @template T - The type of the list item.
+ * @param {RepeaterListProps<T>} props - The properties for the repeater list.
+ * @returns {JSX.Element} The rendered repeater list.
+ */
 declare const RepeaterList: <T extends ListItemType>(props: RepeaterListProps<T>) => react_jsx_runtime.JSX.Element;
 
 declare const SortableTrigger: (props: SortableTriggerProps) => react_jsx_runtime.JSX.Element;

package/docs/components/molecules/List.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-A flexible list component that renders collections of data with support for custom item components, sorting functionality, and both horizontal and vertical layouts. Provides efficient rendering for dynamic data sets with keyboard navigation and accessibility features.
+A flexible list component that renders collections of data with support for custom item components, sorting functionality, and both horizontal and vertical layouts. The component acts as a facade that automatically chooses between BasicList and SortableList implementations based on the `sortable` prop. Provides efficient rendering for dynamic data sets with keyboard navigation and accessibility features.
 
 ## Aliases
 
@@ -24,7 +24,7 @@ A flexible list component that renders collections of data with support for cust
 | `wrap` | `boolean` | - | No | Whether list content should wrap |
 | `align` | `'Horizontal' \| 'Vertical'` | `'Vertical'` | No | Layout direction for the list |
 | `sortable` | `boolean` | - | No | Enable drag-and-drop sorting |
-| `updateSortOrder` | `(data: T[], oldIndex: number, newIndex: number) => void` | - | No | Callback when sort order changes |
+| `updateSortOrder` | `(data: T[], oldIndex: number, newIndex: number) => T[] \| undefined` | - | No | Callback when sort order changes. Return new data array or undefined to use default behavior |
 | `className` | `string` | - | No | Additional CSS class names |
 
 Plus all standard HTML ul attributes (role, aria-*, data-*, etc.).
@@ -147,12 +147,17 @@ function SortableListExample() {
     </div>
   );
 
+  const handleSortUpdate = (newData, oldIndex, newIndex) => {
+    setTasks(newData);
+    return newData; // Return the new data to update internal state
+  };
+
   return (
     <List 
       data={tasks}
       component={TaskItem}
       sortable
-      updateSortOrder={setTasks}
+      updateSortOrder={handleSortUpdate}
       keyExtractor={(task) => task.id}
     />
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delightui/components",
-  "version": "0.1.115",
+  "version": "0.1.117",
   "private": false,
   "scripts": {
     "start": "vite",

package/dist/cjs/components/molecules/List/components/RepeaterList.d.ts

@@ -1,3 +0,0 @@
-import { ListItemType, RepeaterListProps } from "../List.types";
-declare const RepeaterList: <T extends ListItemType>(props: RepeaterListProps<T>) => import("react/jsx-runtime").JSX.Element;
-export default RepeaterList;

package/dist/esm/components/molecules/List/components/RepeaterList.d.ts

@@ -1,3 +0,0 @@
-import { ListItemType, RepeaterListProps } from "../List.types";
-declare const RepeaterList: <T extends ListItemType>(props: RepeaterListProps<T>) => import("react/jsx-runtime").JSX.Element;
-export default RepeaterList;