From 05fc770feed6e4f15c434e49326fb80f91a69967 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 5 May 2025 17:03:59 +0530
Subject: [PATCH 1/3] chore: bug-fixes

---
 src/lib/accordion/custom.tsx                       | 8 ++++++--
 src/lib/accordion/index.tsx                        | 6 ++++--
 src/lib/form/bignumber-field/index.tsx             | 4 ++++
 src/lib/form/bignumber-field/useBigNumberField.tsx | 2 --
 src/lib/index.ts                                   | 1 +
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/lib/accordion/custom.tsx b/src/lib/accordion/custom.tsx
index 6cd1bd2..3a5d75c 100644
--- a/src/lib/accordion/custom.tsx
+++ b/src/lib/accordion/custom.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, useState } from "react";
 import AccordionItem from "./accordion-item";
-import { cn } from "../../utils";
+import { cn, isUndefined } from "../../utils";
 
 interface AccordionItem {
   title: ReactNode;
@@ -10,14 +10,18 @@ interface AccordionItem {
 interface AccordionProps {
   items: AccordionItem[];
   className?: string;
+  defaultExpanded?: number;
 }
 
 const CustomAccordion: React.FC<AccordionProps> = ({
   items,
   className,
+  defaultExpanded,
   ...props
 }) => {
-  const [expanded, setExpanded] = useState(-1);
+  const [expanded, setExpanded] = useState(
+    !isUndefined(defaultExpanded) ? defaultExpanded : -1,
+  );
   return (
     <div
       className={cn("box-border flex w-[1000px] flex-col", className)}
diff --git a/src/lib/accordion/index.tsx b/src/lib/accordion/index.tsx
index 0bf99ce..2d3ea2a 100644
--- a/src/lib/accordion/index.tsx
+++ b/src/lib/accordion/index.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, useState } from "react";
 import AccordionItem from "./accordion-item";
-import { cn } from "../../utils";
+import { cn, isUndefined } from "../../utils";
 
 interface AccordionItem {
   title: string;
@@ -28,7 +28,9 @@ const Accordion: React.FC<AccordionProps> = ({
   className,
   ...props
 }) => {
-  const [expanded, setExpanded] = useState(defaultExpanded ?? -1);
+  const [expanded, setExpanded] = useState(
+    !isUndefined(defaultExpanded) ? defaultExpanded : -1,
+  );
   return (
     <div
       className={cn("box-border flex w-[1000px] flex-col", className)}
diff --git a/src/lib/form/bignumber-field/index.tsx b/src/lib/form/bignumber-field/index.tsx
index a113013..e0375ae 100644
--- a/src/lib/form/bignumber-field/index.tsx
+++ b/src/lib/form/bignumber-field/index.tsx
@@ -15,6 +15,8 @@ interface BigNumberFieldComponentProps extends BigNumberFieldProps {
   message?: string;
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
   className?: string;
+  /** The name of the input element, used when submitting an HTML form.*/
+  name?: string;
 }
 
 /** A number field that handles big numbers.
@@ -29,6 +31,7 @@ function BigNumberField({
   isDisabled,
   id: propId,
   isReadOnly,
+  name,
   ...props
 }: Readonly<BigNumberFieldComponentProps>) {
   // Generate an ID if one is not provided
@@ -65,6 +68,7 @@ function BigNumberField({
           <>
             <Input
               {...inputProps}
+              name={name}
               className={cn(
                 "hover-short-transition bg-klerosUIComponentsWhiteBackground size-full",
                 "rounded-base border-klerosUIComponentsStroke text-klerosUIComponentsPrimaryText border text-base",
diff --git a/src/lib/form/bignumber-field/useBigNumberField.tsx b/src/lib/form/bignumber-field/useBigNumberField.tsx
index df30954..7c7b8c2 100644
--- a/src/lib/form/bignumber-field/useBigNumberField.tsx
+++ b/src/lib/form/bignumber-field/useBigNumberField.tsx
@@ -566,7 +566,6 @@ export function useBigNumberField(props: BigNumberFieldProps) {
     type: "button" as const,
     "aria-label": "Increment",
     "aria-controls": id,
-    slot: "increment",
     isDisabled: !canIncrement(),
     onPress: increment,
   });
@@ -576,7 +575,6 @@ export function useBigNumberField(props: BigNumberFieldProps) {
     type: "button" as const,
     "aria-label": "Decrement",
     "aria-controls": id,
-    slot: "decrement",
     isDisabled: !canDecrement(),
     onPress: decrement,
   });
diff --git a/src/lib/index.ts b/src/lib/index.ts
index baf83b2..5cc56fe 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -15,6 +15,7 @@ export { default as DisplaySmall } from "./display/small";
 export { default as DropdownSelect } from "./dropdown/select";
 export { default as DropdownCascader } from "./dropdown/cascader";
 
+export { default as Form } from "./form/index";
 export { default as NumberField } from "./form/number-field";
 export { default as BigNumberField } from "./form/bignumber-field";
 export { default as TextField } from "./form/text-field";

From 5db1c0c12e35ef5220c3dfd8862547fc444a944f Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 5 May 2025 17:19:06 +0530
Subject: [PATCH 2/3] feat(draggable-list):
 add-flags-to-disable-drag-and-deletion

---
 src/lib/draggable-list/index.tsx       | 14 +++++++++++---
 src/stories/draggable-list.stories.tsx | 24 ++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/lib/draggable-list/index.tsx b/src/lib/draggable-list/index.tsx
index b9bdb92..5d4b9a4 100644
--- a/src/lib/draggable-list/index.tsx
+++ b/src/lib/draggable-list/index.tsx
@@ -30,6 +30,10 @@ interface IDraggableList
     | "onSelectionChange"
   > {
   items: ListItem[];
+  /** Flag to disable drag operations in list. */
+  dragDisabled?: boolean;
+  /** Flag to disable delete operations in list. */
+  deletionDisabled?: boolean;
   /** Returns the updated list after a delete or move operation. */
   updateCallback?: (updatedItems: ListItem[]) => void;
   /** Returns the selected item. */
@@ -45,6 +49,8 @@ function DraggableList({
   selectionCallback,
   className,
   renderDragPreview,
+  dragDisabled = false,
+  deletionDisabled = false,
   ...props
 }: Readonly<IDraggableList>) {
   const list = useListData({
@@ -76,7 +82,7 @@ function DraggableList({
       aria-label={props["aria-label"] ?? "Reorderable list"}
       selectionMode="single"
       items={list.items}
-      dragAndDropHooks={dragAndDropHooks}
+      dragAndDropHooks={dragDisabled ? undefined : dragAndDropHooks}
       onSelectionChange={(keys) => {
         const keyArr = Array.from(keys);
         const selectedItem = list.getItem(keyArr[0]);
@@ -106,11 +112,13 @@ function DraggableList({
         >
           {({ isHovered }) => (
             <>
-              <DragAndDropIcon className="size-4 cursor-grab" />
+              {dragDisabled ? null : (
+                <DragAndDropIcon className="size-4 cursor-grab" />
+              )}
               <span className="text-klerosUIComponentsPrimaryText flex-1 text-base">
                 {item.name}
               </span>
-              {isHovered ? (
+              {isHovered && !deletionDisabled ? (
                 <Button
                   className={"cursor-pointer hover:scale-105"}
                   onPress={() => {
diff --git a/src/stories/draggable-list.stories.tsx b/src/stories/draggable-list.stories.tsx
index 8504a32..7ccbc55 100644
--- a/src/stories/draggable-list.stories.tsx
+++ b/src/stories/draggable-list.stories.tsx
@@ -9,6 +9,14 @@ const meta = {
   component: DraggableList,
   title: "Draggable List",
   tags: ["autodocs"],
+  argTypes: {
+    dragDisabled: {
+      control: "boolean",
+    },
+    deletionDisabled: {
+      control: "boolean",
+    },
+  },
 } satisfies Meta<typeof DraggableList>;
 
 export default meta;
@@ -30,6 +38,22 @@ export const Default: Story = {
   },
 };
 
+/** Drag operations can be disabled with `dragDisabled ` */
+export const DragDisabled: Story = {
+  args: {
+    ...Default.args,
+    dragDisabled: true,
+  },
+};
+
+/** Delete operation can be disabled with `deletionDisabled ` */
+export const DeletionDisabled: Story = {
+  args: {
+    ...Default.args,
+    deletionDisabled: true,
+  },
+};
+
 export const CustomDragPreview: Story = {
   args: {
     themeUI: "light",

From eeba3c40a6a703b90788218c9ba25a62166b73d5 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 12 May 2025 15:54:53 +0530
Subject: [PATCH 3/3] chore: bump version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ac4a067..4d48010 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kleros/ui-components-library",
-  "version": "3.2.3",
+  "version": "3.3.4",
   "description": "UI components library which implements the Kleros design system.",
   "source": "./src/lib/index.ts",
   "main": "./dist/index.js",