Merge pull request #78 from kleros/chore/bug-fixes

Chore/bug fixes

Author: tractorss

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",

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)}

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)}

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={() => {

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",

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,
   });

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";

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",