@fuf-stack/uniform 0.14.5 → 0.15.0

package/dist/chunk-OBQDQ4RX.js

@@ -0,0 +1,372 @@
+import {
+  FieldCopyTestIdButton_default
+} from "./chunk-2CRY7VDQ.js";
+import {
+  FieldValidationError_default
+} from "./chunk-VX76MJAI.js";
+import {
+  useFieldArray,
+  useFormContext,
+  useInput
+} from "./chunk-MRXNKY72.js";
+import {
+  toNullishString
+} from "./chunk-IEF2GJ22.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
+
+// src/FieldArray/FieldArray.tsx
+import { cn as cn5, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { Button as Button3 } from "@fuf-stack/pixels";
+
+// src/FieldArray/subcomponents/FieldArrayElement.tsx
+import { useSortable as useSortable2 } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn as cn4 } from "@fuf-stack/pixel-utils";
+
+// src/FieldArray/subcomponents/ElementInsertAfterButton.tsx
+import { FaPlus } from "react-icons/fa6";
+import { cn } from "@fuf-stack/pixel-utils";
+import { Button } from "@fuf-stack/pixels";
+import { jsx } from "react/jsx-runtime";
+var ElementInsertAfterButton = ({
+  className = void 0,
+  onClick,
+  testId = void 0
+}) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn(className),
+      color: "success",
+      icon: /* @__PURE__ */ jsx(FaPlus, {}),
+      onClick,
+      size: "sm",
+      testId,
+      variant: "light"
+    }
+  );
+};
+var ElementInsertAfterButton_default = ElementInsertAfterButton;
+
+// src/FieldArray/subcomponents/ElementRemoveButton.tsx
+import { FaTimes } from "react-icons/fa";
+import { cn as cn2 } from "@fuf-stack/pixel-utils";
+import { Button as Button2 } from "@fuf-stack/pixels";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ElementRemoveButton = ({
+  className = void 0,
+  onClick,
+  testId = void 0
+}) => {
+  return /* @__PURE__ */ jsx2(
+    Button2,
+    {
+      ariaLabel: "remove element",
+      className: cn2(className),
+      color: "danger",
+      icon: /* @__PURE__ */ jsx2(FaTimes, {}),
+      onClick,
+      testId,
+      variant: "light"
+    }
+  );
+};
+var ElementRemoveButton_default = ElementRemoveButton;
+
+// src/FieldArray/subcomponents/SortDragHandle.tsx
+import { FaGripVertical } from "react-icons/fa";
+import { useSortable } from "@dnd-kit/sortable";
+import { cn as cn3 } from "@fuf-stack/pixel-utils";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SortDragHandle = ({
+  className = void 0,
+  id,
+  testId = void 0
+}) => {
+  const { attributes, listeners } = useSortable({ id });
+  return /* @__PURE__ */ jsx3(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({
+      className: cn3(className),
+      "data-testid": testId
+    }, attributes), listeners), {
+      children: /* @__PURE__ */ jsx3(FaGripVertical, {})
+    })
+  );
+};
+var SortDragHandle_default = SortDragHandle;
+
+// src/FieldArray/subcomponents/FieldArrayElement.tsx
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+var FieldArrayElement = ({
+  children,
+  className,
+  fields,
+  id,
+  index,
+  insertAfter = false,
+  lastNotDeletable = true,
+  methods,
+  name,
+  sortable = false,
+  testId = void 0
+}) => {
+  var _a;
+  const { getFieldState } = useFormContext();
+  const { error, invalid } = getFieldState(`${name}`, void 0);
+  const { getHelperWrapperProps, getErrorMessageProps } = useInput({
+    classNames: { helperWrapper: "block" },
+    errorMessage: JSON.stringify(error),
+    isInvalid: invalid,
+    labelPlacement: "inside",
+    placeholder: " "
+  });
+  const { setNodeRef, transform, transition } = useSortable2({ id });
+  const sortingStyle = sortable ? {
+    transform: CSS.Translate.toString(transform),
+    transition
+  } : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: cn4(className.listItem),
+        ref: setNodeRef,
+        style: sortingStyle,
+        children: [
+          sortable && /* @__PURE__ */ jsx4(
+            SortDragHandle_default,
+            {
+              className: className.sortDragHandle,
+              id,
+              testId: `${testId}_sort_drag_handle`
+            }
+          ),
+          /* @__PURE__ */ jsx4("div", { className: cn4(className.elementContent), "data-testid": testId, children }),
+          lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ jsx4(
+            ElementRemoveButton_default,
+            {
+              className: className.removeButton,
+              onClick: () => methods.remove(),
+              testId: `${testId}_remove_button`
+            }
+          ),
+          insertAfter && index !== fields.length - 1 && /* @__PURE__ */ jsx4(
+            ElementInsertAfterButton_default,
+            {
+              className: className.insertAfterButton,
+              onClick: () => methods.insert(),
+              testId: `${testId}_insert_after_button`
+            }
+          )
+        ]
+      }
+    ),
+    error && typeof error[index] !== "undefined" && /* @__PURE__ */ jsx4("div", __spreadProps(__spreadValues({}, getHelperWrapperProps()), { children: /* @__PURE__ */ jsx4("div", __spreadProps(__spreadValues({}, getErrorMessageProps()), { children: /* @__PURE__ */ jsx4(
+      FieldValidationError_default,
+      {
+        error: (_a = error[Number(index)]) == null ? void 0 : _a._errors
+      }
+    ) })) }))
+  ] });
+};
+var FieldArrayElement_default = FieldArrayElement;
+
+// src/FieldArray/subcomponents/SortContext.tsx
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  restrictToVerticalAxis,
+  restrictToWindowEdges
+} from "@dnd-kit/modifiers";
+import {
+  SortableContext,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SortContext = ({
+  children,
+  sortable,
+  fields,
+  move
+}) => {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor)
+  );
+  if (!sortable) {
+    return children;
+  }
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (active.id !== (over == null ? void 0 : over.id)) {
+      const oldIndex = fields.findIndex((field) => field.id === active.id);
+      const newIndex = fields.findIndex((field) => field.id === (over == null ? void 0 : over.id));
+      move(oldIndex, newIndex);
+    }
+  };
+  return /* @__PURE__ */ jsx5(
+    DndContext,
+    {
+      collisionDetection: closestCenter,
+      modifiers: [restrictToVerticalAxis, restrictToWindowEdges],
+      onDragEnd: handleDragEnd,
+      sensors,
+      children: /* @__PURE__ */ jsx5(
+        SortableContext,
+        {
+          items: fields.map((field) => field.id),
+          strategy: verticalListSortingStrategy,
+          children
+        }
+      )
+    }
+  );
+};
+var SortContext_default = SortContext;
+
+// src/FieldArray/FieldArray.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var fieldArrayVariants = tv({
+  slots: {
+    appendButton: "w-full",
+    elementContent: "flex-grow",
+    insertAfterButton: "text-xs font-medium",
+    label: "!pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block",
+    list: "m-0 w-full list-none",
+    listItem: "mb-4 flex w-full flex-row items-center",
+    removeButton: "ml-1",
+    sortDragHandle: "mr-2 text-base text-xl"
+  }
+});
+var FieldArray = ({
+  appendButtonText = "Add Element",
+  children,
+  className: _className = void 0,
+  duplicate = false,
+  elementInitialValue: _elementInitialValue = null,
+  insertAfter = false,
+  label: _label = void 0,
+  lastElementNotDeletable = true,
+  name,
+  sortable = false,
+  testId: _testId = void 0
+}) => {
+  var _a;
+  const variants = fieldArrayVariants();
+  const className = variantsToClassNames(variants, _className, "list");
+  const {
+    control,
+    debugMode,
+    getValues,
+    getFieldState,
+    trigger
+    // watch
+  } = useFormContext();
+  const { fields, append, remove, insert, move } = useFieldArray({
+    control,
+    name
+  });
+  const { error, testId, invalid, required } = getFieldState(name, _testId);
+  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = useInput({
+    isInvalid: invalid,
+    isRequired: required,
+    errorMessage: JSON.stringify(error),
+    label: _label,
+    labelPlacement: "inside",
+    placeholder: " ",
+    classNames: { helperWrapper: "block" }
+  });
+  const elementInitialValue = toNullishString(_elementInitialValue);
+  if (lastElementNotDeletable && fields.length === 0) {
+    append(elementInitialValue);
+  }
+  const showTestIdCopyButton = debugMode === "debug-testids";
+  const showLabel = label || showTestIdCopyButton;
+  return /* @__PURE__ */ jsx6(SortContext_default, { sortable, move, fields, children: /* @__PURE__ */ jsxs2(
+    "ul",
+    {
+      className: className.list,
+      "data-testid": testId,
+      onBlur: () => trigger(`${name}`),
+      children: [
+        showLabel && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          label && // eslint-disable-next-line jsx-a11y/label-has-associated-control
+          /* @__PURE__ */ jsx6(
+            "label",
+            __spreadProps(__spreadValues({}, getLabelProps()), {
+              className: cn5((_a = getLabelProps()) == null ? void 0 : _a.className, className.label),
+              children: label
+            })
+          ),
+          showTestIdCopyButton && /* @__PURE__ */ jsx6(FieldCopyTestIdButton_default, { testId })
+        ] }),
+        fields.map((field, index) => {
+          const methods = {
+            append: () => append(elementInitialValue),
+            duplicate: () => {
+              const values = getValues(name);
+              insert(index + 1, values[index]);
+            },
+            insert: () => insert(index + 1, elementInitialValue),
+            remove: () => remove(index)
+          };
+          return /* @__PURE__ */ jsx6(
+            FieldArrayElement_default,
+            {
+              className,
+              fields,
+              id: field.id,
+              index,
+              duplicate,
+              insertAfter,
+              lastNotDeletable: lastElementNotDeletable,
+              methods,
+              name,
+              sortable,
+              testId: `${testId}_${index}`,
+              children: children({
+                index,
+                length: fields.length,
+                methods,
+                name: `${name}.${index}`,
+                testId: `${testId}_${index}`
+              })
+            },
+            field.id
+          );
+        }),
+        /* @__PURE__ */ jsx6(
+          Button3,
+          {
+            className: className.appendButton,
+            onClick: () => append(elementInitialValue),
+            size: "sm",
+            testId: `${testId}_append_button`,
+            children: appendButtonText
+          }
+        ),
+        (error == null ? void 0 : error._errors) && /* @__PURE__ */ jsx6("div", __spreadProps(__spreadValues({}, getHelperWrapperProps()), { children: /* @__PURE__ */ jsx6("div", __spreadProps(__spreadValues({}, getErrorMessageProps()), { children: /* @__PURE__ */ jsx6(FieldValidationError_default, { error: error == null ? void 0 : error._errors }) })) }))
+      ]
+    }
+  ) });
+};
+var FieldArray_default = FieldArray;
+
+// src/FieldArray/index.ts
+var FieldArray_default2 = FieldArray_default;
+
+export {
+  FieldArray_default,
+  FieldArray_default2
+};
+//# sourceMappingURL=chunk-OBQDQ4RX.js.map

package/dist/chunk-OBQDQ4RX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FieldArray/FieldArray.tsx","../src/FieldArray/subcomponents/FieldArrayElement.tsx","../src/FieldArray/subcomponents/ElementInsertAfterButton.tsx","../src/FieldArray/subcomponents/ElementRemoveButton.tsx","../src/FieldArray/subcomponents/SortDragHandle.tsx","../src/FieldArray/subcomponents/SortContext.tsx","../src/FieldArray/index.ts"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { FieldArrayElementMethods } from './subcomponents/FieldArrayElement';\nimport type { FieldArrayProps } from './types';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nimport { toNullishString } from '../helpers';\nimport { useFieldArray, useFormContext, useInput } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayElement from './subcomponents/FieldArrayElement';\nimport SortContext from './subcomponents/SortContext';\n\nexport const fieldArrayVariants = tv({\n  slots: {\n    appendButton: 'w-full',\n    elementContent: 'flex-grow',\n    insertAfterButton: 'text-xs font-medium',\n    label: '!pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block',\n    list: 'm-0 w-full list-none',\n    listItem: 'mb-4 flex w-full flex-row items-center',\n    removeButton: 'ml-1',\n    sortDragHandle: 'mr-2 text-base text-xl',\n  },\n});\n\n/**\n * FieldArray component using TODO\n */\nconst FieldArray = ({\n  appendButtonText = 'Add Element',\n  children,\n  className: _className = undefined,\n  duplicate = false,\n  elementInitialValue: _elementInitialValue = null,\n  insertAfter = false,\n  label: _label = undefined,\n  lastElementNotDeletable = true,\n  name,\n  sortable = false,\n  testId: _testId = undefined,\n}: FieldArrayProps) => {\n  // className from slots\n  const variants = fieldArrayVariants();\n  const className = variantsToClassNames(variants, _className, 'list');\n\n  const {\n    control,\n    debugMode,\n    getValues,\n    getFieldState,\n    trigger,\n    // watch\n  } = useFormContext();\n\n  const { fields, append, remove, insert, move } = useFieldArray({\n    control,\n    name,\n  });\n\n  const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n  // TODO: what about input props?\n  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n    useInput({\n      isInvalid: invalid,\n      isRequired: required,\n      errorMessage: JSON.stringify(error),\n      label: _label,\n      labelPlacement: 'inside',\n      placeholder: ' ',\n      classNames: { helperWrapper: 'block' },\n    });\n\n  // TODO: add info\n  const elementInitialValue = toNullishString(_elementInitialValue);\n\n  if (lastElementNotDeletable && fields.length === 0) {\n    append(elementInitialValue);\n  }\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  return (\n    <SortContext sortable={sortable} move={move} fields={fields}>\n      <ul\n        className={className.list}\n        data-testid={testId}\n        /**\n         * TODO: this trigger causes the field array (not element)\n         * are shown immediately, but this will cause additional\n         * render cycles, not sure if we should do this...\n         */\n        onBlur={() => trigger(`${name}`)}\n      >\n        {/* field array label */}\n        {showLabel && (\n          <>\n            {label && (\n              // eslint-disable-next-line jsx-a11y/label-has-associated-control\n              <label\n                {...getLabelProps()}\n                className={cn(getLabelProps()?.className, className.label)}\n              >\n                {label}\n              </label>\n            )}\n            {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n          </>\n        )}\n\n        {fields.map((field, index) => {\n          // create methods for element\n          const methods: FieldArrayElementMethods = {\n            append: () => append(elementInitialValue),\n            duplicate: () => {\n              const values = getValues(name);\n              insert(index + 1, values[index]);\n            },\n            insert: () => insert(index + 1, elementInitialValue),\n            remove: () => remove(index),\n          };\n\n          return (\n            <FieldArrayElement\n              className={className}\n              fields={fields}\n              id={field.id}\n              index={index}\n              duplicate={duplicate}\n              insertAfter={insertAfter}\n              key={field.id}\n              lastNotDeletable={lastElementNotDeletable}\n              methods={methods}\n              name={name}\n              sortable={sortable}\n              testId={`${testId}_${index}`}\n            >\n              {children({\n                index,\n                length: fields.length,\n                methods,\n                name: `${name}.${index}`,\n                testId: `${testId}_${index}`,\n              })}\n            </FieldArrayElement>\n          );\n        })}\n\n        {/* append elements */}\n        <Button\n          className={className.appendButton}\n          onClick={() => append(elementInitialValue)}\n          size=\"sm\"\n          testId={`${testId}_append_button`}\n        >\n          {appendButtonText}\n        </Button>\n\n        {/* top level field array errors */}\n        {/* @ts-expect-error rhf incompatibility */}\n        {error?._errors && (\n          <div {...getHelperWrapperProps()}>\n            <div {...getErrorMessageProps()}>\n              {/* @ts-expect-error rhf incompatibility */}\n              <FieldValidationError error={error?._errors} />\n            </div>\n          </div>\n        )}\n      </ul>\n    </SortContext>\n  );\n};\n\nexport default FieldArray;\n","/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { FieldArrayFeatures } from '../types';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext, useInput } from '../../hooks';\nimport { FieldValidationError } from '../../partials/FieldValidationError';\nimport ElementInsertAfterButton from './ElementInsertAfterButton';\nimport ElementRemoveButton from './ElementRemoveButton';\nimport SortDragHandle from './SortDragHandle';\n\nexport type FieldArrayElementMethods = {\n  /** Add new element at end */\n  append: () => void;\n  /** Clone current element */\n  duplicate: () => void;\n  /** Add new element after current */\n  insert: () => void;\n  /** Remove current element */\n  remove: () => void;\n};\n\ninterface FieldArrayElementProps extends FieldArrayFeatures {\n  /** Form elements to render inside array element */\n  children: React.ReactNode;\n  /** CSS class names for component parts */\n  className: {\n    /** Class of the content of the li */\n    elementContent?: ClassValue;\n    /** Class for the li */\n    listItem?: ClassValue;\n    /** Class for the insert button between elements */\n    insertAfterButton?: ClassValue;\n    /** Class for the remove element button */\n    removeButton?: ClassValue;\n    /** Class for the drag handle when sorting enabled */\n    sortDragHandle?: ClassValue;\n  };\n  /** All fields in the form array */\n  fields: Record<'id', string>[];\n  /** Unique identifier for drag/drop */\n  id: string | number;\n  /** Field index in array */\n  index: number;\n  /** Prevent deletion of last remaining element */\n  lastNotDeletable?: boolean;\n  /** Field array operation methods */\n  methods: FieldArrayElementMethods;\n  /** Base field name for form context */\n  name: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Form array element component using react-hook-form with drag-drop sorting\n * and validation capabilities\n */\nconst FieldArrayElement = ({\n  children,\n  className,\n  fields,\n  id,\n  index,\n  insertAfter = false,\n  lastNotDeletable = true,\n  methods,\n  name,\n  sortable = false,\n  testId = undefined,\n}: FieldArrayElementProps) => {\n  const { getFieldState } = useFormContext();\n  const { error, invalid } = getFieldState(`${name}`, undefined);\n\n  // TODO: what about input props? and label props? Do we need a label?\n  const { getHelperWrapperProps, getErrorMessageProps } = useInput({\n    classNames: { helperWrapper: 'block' },\n    errorMessage: JSON.stringify(error),\n    isInvalid: invalid,\n    labelPlacement: 'inside',\n    placeholder: ' ',\n  });\n\n  // Apply transform styles when sortable is enabled for smooth drag animations\n  // transform: handles the item's position during drag\n  // transition: controls the animation timing when dropping\n  const { setNodeRef, transform, transition } = useSortable({ id });\n  const sortingStyle = sortable\n    ? {\n        transform: CSS.Translate.toString(transform),\n        transition,\n      }\n    : undefined;\n\n  return (\n    <>\n      <li\n        className={cn(className.listItem)}\n        ref={setNodeRef}\n        style={sortingStyle}\n      >\n        {/** sorting drag handle */}\n        {sortable && (\n          <SortDragHandle\n            className={className.sortDragHandle}\n            id={id}\n            testId={`${testId}_sort_drag_handle`}\n          />\n        )}\n\n        {/** render element fields */}\n        <div className={cn(className.elementContent)} data-testid={testId}>\n          {children}\n        </div>\n\n        {/** remove element */}\n        {lastNotDeletable && fields.length === 1 ? null : (\n          <ElementRemoveButton\n            className={className.removeButton}\n            onClick={() => methods.remove()}\n            testId={`${testId}_remove_button`}\n          />\n        )}\n\n        {/** insertAfter feature when not last element */}\n        {insertAfter && index !== fields.length - 1 && (\n          <ElementInsertAfterButton\n            className={className.insertAfterButton}\n            onClick={() => methods.insert()}\n            testId={`${testId}_insert_after_button`}\n          />\n        )}\n      </li>\n\n      {/** element error */}\n      {error && typeof error[index] !== 'undefined' && (\n        <div {...getHelperWrapperProps()}>\n          <div {...getErrorMessageProps()}>\n            <FieldValidationError\n              /* @ts-expect-error rhf incompatibility */\n              error={error[Number(index)]?._errors}\n            />\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport default FieldArrayElement;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaPlus } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementInsertAfterButtonProps {\n  /** CSS class name */\n  className?: ClassValue;\n  /** click handler */\n  onClick: () => void;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst ElementInsertAfterButton = ({\n  className = undefined,\n  onClick,\n  testId = undefined,\n}: ElementInsertAfterButtonProps) => {\n  return (\n    <Button\n      className={cn(className)}\n      color=\"success\"\n      icon={<FaPlus />}\n      onClick={onClick}\n      size=\"sm\"\n      testId={testId}\n      variant=\"light\"\n    />\n  );\n};\n\nexport default ElementInsertAfterButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaTimes } from 'react-icons/fa';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementRemoveButtonProps {\n  /** CSS class name */\n  className?: ClassValue;\n  /** click handler */\n  onClick: () => void;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst ElementRemoveButton = ({\n  className = undefined,\n  onClick,\n  testId = undefined,\n}: ElementRemoveButtonProps) => {\n  return (\n    <Button\n      ariaLabel=\"remove element\"\n      className={cn(className)}\n      color=\"danger\"\n      icon={<FaTimes />}\n      onClick={onClick}\n      testId={testId}\n      variant=\"light\"\n    />\n  );\n};\n\nexport default ElementRemoveButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaGripVertical } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface SortDragHandleProps {\n  /** Optional CSS class name */\n  className?: ClassValue;\n  /** Unique identifier for sortable item */\n  id: string | number;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Drag handle component that integrates with dnd-kit sortable functionality.\n * Renders a vertical grip icon that can be used to reorder items.\n */\nconst SortDragHandle = ({\n  className = undefined,\n  id,\n  testId = undefined,\n}: SortDragHandleProps) => {\n  // Get dnd-kit sortable attributes and listeners\n  const { attributes, listeners } = useSortable({ id });\n\n  return (\n    <div\n      className={cn(className)}\n      data-testid={testId}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...attributes}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...listeners}\n    >\n      <FaGripVertical />\n    </div>\n  );\n};\n\nexport default SortDragHandle;\n","/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { DragEndEvent } from '@dnd-kit/core';\nimport type { ReactNode } from 'react';\nimport type { UseFieldArrayMove } from 'react-hook-form';\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport {\n  restrictToVerticalAxis,\n  restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\n\ninterface SortContextProps {\n  /** child components */\n  children: ReactNode;\n  /** enable/disable sorting functionality */\n  sortable: boolean;\n  /** Array of objects containing unique IDs for sortable items */\n  fields: Record<'id', string>[];\n  /** react-hook-form's move function to update field array indices */\n  move: UseFieldArrayMove;\n}\n\n/**\n * A wrapper component that provides drag-and-drop sorting functionality for field arrays\n * using dnd-kit and react-hook-form.\n *\n * This component integrates with react-hook-form's field arrays to enable vertical\n * drag-and-drop reordering of form fields. It supports both pointer (mouse/touch)\n * and keyboard interactions for accessibility.\n */\nconst SortContext = ({\n  children,\n  sortable,\n  fields,\n  move,\n}: SortContextProps) => {\n  // Initialize sensors for both pointer (mouse/touch) and keyboard interactions\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor),\n  );\n\n  // Early return if sorting is disabled\n  if (!sortable) {\n    return children;\n  }\n\n  /**\n   * Handles the end of a drag operation by updating field positions\n   * @param event - The drag end event containing active and over elements\n   */\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    // Only move if dropping over a different item\n    if (active.id !== over?.id) {\n      // Find the indices of the dragged item and drop target\n      const oldIndex = fields.findIndex((field) => field.id === active.id);\n      const newIndex = fields.findIndex((field) => field.id === over?.id);\n      // Update the field array order using react-hook-form's move function\n      move(oldIndex, newIndex);\n    }\n  };\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <SortableContext\n        items={fields.map((field) => field.id)}\n        strategy={verticalListSortingStrategy}\n      >\n        {children}\n      </SortableContext>\n    </DndContext>\n  );\n};\n\nexport default SortContext;\n","import FieldArray from './FieldArray';\n\nexport type * from './types';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"],"mappings":"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","names":["cn","Button","useSortable","cn","cn","Button","jsx","cn","jsx","cn","jsx","useSortable","cn","jsx","Fragment","jsx","jsxs","cn","Button","FieldArray_default"]}

package/dist/{chunk-VP7WDLJM.js → chunk-P4PRVNCH.js}

@@ -1,11 +1,14 @@
 import {
   FormContext_default,
-  removeNullishFields,
   useFormContext
-} from "./chunk-BZAPTLMC.js";
+} from "./chunk-MRXNKY72.js";
 import {
-  slugify
-} from "./chunk-V46BHM2U.js";
+  slugify,
+  toValidationFormat
+} from "./chunk-IEF2GJ22.js";
+import {
+  __async
+} from "./chunk-CRTRMMJ7.js";
 
 // src/Form/Form.tsx
 import { cn as cn2 } from "@fuf-stack/pixel-utils";
@@ -26,20 +29,20 @@ var FormDebugViewer = ({ className = void 0 }) => {
     watch
   } = useFormContext();
   const [validationErrors, setValidationErrors] = useState(null);
-  const formValues = removeNullishFields(watch());
+  const validationValues = toValidationFormat(watch());
   const debugTestIdsEnabled = debugMode === "debug-testids";
   useEffect(
     () => {
-      const updateValidationErrors = async () => {
+      const updateValidationErrors = () => __async(void 0, null, function* () {
         if (validation) {
-          const validateResult = await validation?.validateAsync(formValues);
-          setValidationErrors(validateResult?.errors);
+          const validateResult = yield validation == null ? void 0 : validation.validateAsync(validationValues);
+          setValidationErrors(validateResult == null ? void 0 : validateResult.errors);
         }
-      };
+      });
       updateValidationErrors();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(formValues)]
+    [JSON.stringify(validationValues)]
   );
   if (!debugMode || debugMode === "off") {
     return /* @__PURE__ */ jsx(
@@ -84,7 +87,7 @@ var FormDebugViewer = ({ className = void 0 }) => {
           Json,
           {
             value: {
-              values: formValues,
+              values: validationValues,
               errors: validationErrors,
               dirtyFields,
               isValid,
@@ -100,6 +103,7 @@ var FormDebugViewer_default = FormDebugViewer;
 
 // src/Form/Form.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var IS_TEST = process.env.NODE_ENV === "test";
 var Form = ({
   children,
   className = void 0,
@@ -130,7 +134,7 @@ var Form = ({
             children
           }
         ),
-        !debug?.disable && /* @__PURE__ */ jsx2(FormDebugViewer_default, { className: "w-96 flex-shrink" })
+        !IS_TEST && !(debug == null ? void 0 : debug.disable) && /* @__PURE__ */ jsx2(FormDebugViewer_default, { className: "w-96 flex-shrink" })
       ] })
     }
   );
@@ -144,4 +148,4 @@ export {
   Form_default,
   Form_default2
 };
-//# sourceMappingURL=chunk-VP7WDLJM.js.map
+//# sourceMappingURL=chunk-P4PRVNCH.js.map

package/dist/chunk-P4PRVNCH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"sourcesContent":["import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit }) => (\n        <div className=\"flex w-full flex-row justify-between gap-6\">\n          <form\n            className={cn('flex-grow', className)}\n            data-testid={slugify(testId || name || '')}\n            name={name}\n            onSubmit={handleSubmit}\n          >\n            {children}\n          </form>\n          {/* render debug viewer when not in test environment and debug not disabled */}\n          {!IS_TEST && !debug?.disable && (\n            <FormDebugViewer className=\"w-96 flex-shrink\" />\n          )}\n        </div>\n      )}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button, Card, Json } from '@fuf-stack/pixels';\n\nimport { toValidationFormat } from '../../helpers';\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { dirtyFields, isValid, isSubmitting },\n    setDebugMode,\n    validation,\n    watch,\n  } = useFormContext();\n\n  const [validationErrors, setValidationErrors] = useState<\n    VetoError['errors'] | null\n  >(null);\n\n  const validationValues = toValidationFormat(watch());\n  const debugTestIdsEnabled = debugMode === 'debug-testids';\n\n  useEffect(\n    () => {\n      const updateValidationErrors = async () => {\n        if (validation) {\n          const validateResult =\n            await validation?.validateAsync(validationValues);\n          setValidationErrors(validateResult?.errors);\n        }\n      };\n      updateValidationErrors();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(validationValues)],\n  );\n\n  if (!debugMode || debugMode === 'off') {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        onClick={() => setDebugMode('debug')}\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        variant=\"light\"\n        icon={<FaBug />}\n      />\n    );\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            icon={<FaTimes className=\"text-danger\" />}\n            onClick={() => setDebugMode('off')}\n            size=\"sm\"\n            variant=\"flat\"\n          />\n        </div>\n      }\n    >\n      <Button\n        variant={debugTestIdsEnabled ? 'solid' : 'light'}\n        icon={<FaBullseye />}\n        className=\"mb-4 ml-auto mr-auto\"\n        onClick={() =>\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug')\n        }\n      >\n        {debugTestIdsEnabled ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values: validationValues,\n          errors: validationErrors,\n          dirtyFields,\n          isValid,\n          isSubmitting,\n        }}\n      />\n    </Card>\n  );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":"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","names":["cn","jsx","jsxs","cn","Form_default"]}

package/dist/{chunk-PZ4LZQI4.cjs → chunk-QLQR44AD.cjs}

@@ -1,11 +1,14 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
+var _chunk2NSCPLAAcjs = require('./chunk-2NSCPLAA.cjs');
 
-var _chunkXJWEUCV3cjs = require('./chunk-XJWEUCV3.cjs');
 
 
-var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
+var _chunk4AXNPSXGcjs = require('./chunk-4AXNPSXG.cjs');
+
+
+var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
 
 // src/Form/Form.tsx
 var _pixelutils = require('@fuf-stack/pixel-utils');
@@ -24,22 +27,22 @@ var FormDebugViewer = ({ className = void 0 }) => {
     setDebugMode,
     validation,
     watch
-  } = _chunkXJWEUCV3cjs.useFormContext.call(void 0, );
+  } = _chunk2NSCPLAAcjs.useFormContext.call(void 0, );
   const [validationErrors, setValidationErrors] = _react.useState.call(void 0, null);
-  const formValues = _chunkXJWEUCV3cjs.removeNullishFields.call(void 0, watch());
+  const validationValues = _chunk4AXNPSXGcjs.toValidationFormat.call(void 0, watch());
   const debugTestIdsEnabled = debugMode === "debug-testids";
   _react.useEffect.call(void 0, 
     () => {
-      const updateValidationErrors = async () => {
+      const updateValidationErrors = () => _chunk4DAZAO6Ycjs.__async.call(void 0, void 0, null, function* () {
         if (validation) {
-          const validateResult = await _optionalChain([validation, 'optionalAccess', _ => _.validateAsync, 'call', _2 => _2(formValues)]);
-          setValidationErrors(_optionalChain([validateResult, 'optionalAccess', _3 => _3.errors]));
+          const validateResult = yield validation == null ? void 0 : validation.validateAsync(validationValues);
+          setValidationErrors(validateResult == null ? void 0 : validateResult.errors);
         }
-      };
+      });
       updateValidationErrors();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(formValues)]
+    [JSON.stringify(validationValues)]
   );
   if (!debugMode || debugMode === "off") {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -84,7 +87,7 @@ var FormDebugViewer = ({ className = void 0 }) => {
           _pixels.Json,
           {
             value: {
-              values: formValues,
+              values: validationValues,
               errors: validationErrors,
               dirtyFields,
               isValid,
@@ -100,6 +103,7 @@ var FormDebugViewer_default = FormDebugViewer;
 
 // src/Form/Form.tsx
 
+var IS_TEST = process.env.NODE_ENV === "test";
 var Form = ({
   children,
   className = void 0,
@@ -112,7 +116,7 @@ var Form = ({
   validationTrigger = "all"
 }) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkXJWEUCV3cjs.FormContext_default,
+    _chunk2NSCPLAAcjs.FormContext_default,
     {
       debugModeSettings: debug,
       initialValues,
@@ -124,13 +128,13 @@ var Form = ({
           "form",
           {
             className: _pixelutils.cn.call(void 0, "flex-grow", className),
-            "data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, testId || name || ""),
+            "data-testid": _chunk4AXNPSXGcjs.slugify.call(void 0, testId || name || ""),
             name,
             onSubmit: handleSubmit,
             children
           }
         ),
-        !_optionalChain([debug, 'optionalAccess', _4 => _4.disable]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormDebugViewer_default, { className: "w-96 flex-shrink" })
+        !IS_TEST && !(debug == null ? void 0 : debug.disable) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormDebugViewer_default, { className: "w-96 flex-shrink" })
       ] })
     }
   );
@@ -144,4 +148,4 @@ var Form_default2 = Form_default;
 
 
 exports.Form_default = Form_default; exports.Form_default2 = Form_default2;
-//# sourceMappingURL=chunk-PZ4LZQI4.cjs.map
+//# sourceMappingURL=chunk-QLQR44AD.cjs.map

package/dist/chunk-QLQR44AD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-QLQR44AD.cjs","../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"names":["jsx","jsxs","cn","Form_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-QLQR44AD.cjs","sourcesContent":[null,"import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit }) => (\n        <div className=\"flex w-full flex-row justify-between gap-6\">\n          <form\n            className={cn('flex-grow', className)}\n            data-testid={slugify(testId || name || '')}\n            name={name}\n            onSubmit={handleSubmit}\n          >\n            {children}\n          </form>\n          {/* render debug viewer when not in test environment and debug not disabled */}\n          {!IS_TEST && !debug?.disable && (\n            <FormDebugViewer className=\"w-96 flex-shrink\" />\n          )}\n        </div>\n      )}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button, Card, Json } from '@fuf-stack/pixels';\n\nimport { toValidationFormat } from '../../helpers';\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { dirtyFields, isValid, isSubmitting },\n    setDebugMode,\n    validation,\n    watch,\n  } = useFormContext();\n\n  const [validationErrors, setValidationErrors] = useState<\n    VetoError['errors'] | null\n  >(null);\n\n  const validationValues = toValidationFormat(watch());\n  const debugTestIdsEnabled = debugMode === 'debug-testids';\n\n  useEffect(\n    () => {\n      const updateValidationErrors = async () => {\n        if (validation) {\n          const validateResult =\n            await validation?.validateAsync(validationValues);\n          setValidationErrors(validateResult?.errors);\n        }\n      };\n      updateValidationErrors();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(validationValues)],\n  );\n\n  if (!debugMode || debugMode === 'off') {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        onClick={() => setDebugMode('debug')}\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        variant=\"light\"\n        icon={<FaBug />}\n      />\n    );\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            icon={<FaTimes className=\"text-danger\" />}\n            onClick={() => setDebugMode('off')}\n            size=\"sm\"\n            variant=\"flat\"\n          />\n        </div>\n      }\n    >\n      <Button\n        variant={debugTestIdsEnabled ? 'solid' : 'light'}\n        icon={<FaBullseye />}\n        className=\"mb-4 ml-auto mr-auto\"\n        onClick={() =>\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug')\n        }\n      >\n        {debugTestIdsEnabled ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values: validationValues,\n          errors: validationErrors,\n          dirtyFields,\n          isValid,\n          isSubmitting,\n        }}\n      />\n    </Card>\n  );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"]}