@fuf-stack/uniform 1.4.1 → 1.5.0

package/dist/chunk-GST3AQOR.js

@@ -0,0 +1,684 @@
+import {
+  Grid_default
+} from "./chunk-B62HKKMS.js";
+import {
+  useFieldArray,
+  useFormContext,
+  useUniformField
+} from "./chunk-CJD3DW4J.js";
+import {
+  FieldValidationError_default
+} from "./chunk-ELYGQTXB.js";
+import {
+  flatArrayKey
+} from "./chunk-76KOVUDN.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-K2V4ULA2.js";
+
+// src/FieldArray/FieldArray.tsx
+import { useEffect, useRef } from "react";
+import { useReducedMotion as useReducedMotion2 } from "@fuf-stack/pixel-motion";
+import { cn as cn8, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+
+// src/FieldArray/subcomponents/ElementAppendButton.tsx
+import { FaPlus } from "react-icons/fa";
+import { cn } from "@fuf-stack/pixel-utils";
+import { Button } from "@fuf-stack/pixels";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ElementAppendButton = ({
+  appendButtonText = "Add Element",
+  className = void 0,
+  onClick,
+  testId = void 0
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      disableAnimation: true,
+      className: cn(className),
+      onClick,
+      size: "sm",
+      testId,
+      variant: "light",
+      children: [
+        /* @__PURE__ */ jsx(FaPlus, {}),
+        /* @__PURE__ */ jsx("span", { children: appendButtonText })
+      ]
+    }
+  );
+};
+var ElementAppendButton_default = ElementAppendButton;
+
+// src/FieldArray/subcomponents/FieldArrayElement.tsx
+import { useState } from "react";
+import { useSortable as useSortable2 } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { AnimatePresence, motion } from "@fuf-stack/pixel-motion";
+import { cn as cn5 } from "@fuf-stack/pixel-utils";
+
+// src/FieldArray/subcomponents/ElementActionsMenu.tsx
+import { FaCopy, FaTimes } from "react-icons/fa";
+import { VscInsert } from "react-icons/vsc";
+import { cn as cn2 } from "@fuf-stack/pixel-utils";
+import { Menu } from "@fuf-stack/pixels";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ElementActionsMenu = ({
+  className = void 0,
+  duplicate = false,
+  insertAfter = false,
+  showRemove = true,
+  methods,
+  testId = void 0
+}) => {
+  const handleAction = (key) => {
+    switch (key) {
+      case "remove":
+        methods.remove();
+        break;
+      case "duplicate":
+        methods.duplicate();
+        break;
+      case "insertAfter":
+        methods.insert();
+        break;
+      default:
+        break;
+    }
+  };
+  const menuItems = [];
+  if (duplicate) {
+    menuItems.push({
+      key: "duplicate",
+      label: "Duplicate",
+      icon: /* @__PURE__ */ jsx2(FaCopy, {})
+    });
+  }
+  if (insertAfter) {
+    menuItems.push({
+      key: "insertAfter",
+      label: "Insert After",
+      icon: /* @__PURE__ */ jsx2(VscInsert, {})
+    });
+  }
+  if (showRemove) {
+    menuItems.push({
+      key: "remove",
+      className: "text-danger",
+      label: "Remove",
+      icon: /* @__PURE__ */ jsx2(FaTimes, {})
+    });
+  }
+  return /* @__PURE__ */ jsx2(
+    Menu,
+    {
+      ariaLabel: "Element actions",
+      items: menuItems,
+      onAction: handleAction,
+      placement: "right",
+      testId,
+      triggerButtonProps: {
+        className: cn2(className),
+        disableRipple: true,
+        size: "md",
+        variant: "light"
+      }
+    }
+  );
+};
+var ElementActionsMenu_default = ElementActionsMenu;
+
+// src/FieldArray/subcomponents/ElementRemoveButton.tsx
+import { FaTimes as FaTimes2 } from "react-icons/fa";
+import { cn as cn3 } from "@fuf-stack/pixel-utils";
+import { Button as Button2 } from "@fuf-stack/pixels";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ElementRemoveButton = ({
+  className = void 0,
+  onClick,
+  testId = void 0
+}) => {
+  return /* @__PURE__ */ jsx3(
+    Button2,
+    {
+      ariaLabel: "remove element",
+      className: cn3(className),
+      color: "danger",
+      icon: /* @__PURE__ */ jsx3(FaTimes2, {}),
+      onClick,
+      size: "sm",
+      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 cn4 } from "@fuf-stack/pixel-utils";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var SortDragHandle = ({
+  className = void 0,
+  id,
+  testId = void 0
+}) => {
+  const { attributes, listeners } = useSortable({ id });
+  return /* @__PURE__ */ jsx4(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({
+      className: cn4(className),
+      "data-testid": testId
+    }, attributes), listeners), {
+      children: /* @__PURE__ */ jsx4(FaGripVertical, {})
+    })
+  );
+};
+var SortDragHandle_default = SortDragHandle;
+
+// src/FieldArray/subcomponents/FieldArrayElement.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var FieldArrayElement = ({
+  children,
+  className,
+  disableAnimation = false,
+  duplicate = false,
+  elementMarginBottom: _elementMarginBottom = void 0,
+  fields,
+  id,
+  index: _index,
+  insertAfter = false,
+  lastNotDeletable = true,
+  methods,
+  sortable = false,
+  testId = void 0
+}) => {
+  const { setNodeRef, transform, transition, isDragging } = useSortable2({ id });
+  const sortingStyle = sortable ? {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    zIndex: isDragging ? 50 : void 0
+  } : void 0;
+  const [isVisible, setIsVisible] = useState(true);
+  const listItemMotionVariants = {
+    hidden: { opacity: 0, height: 0, marginBottom: 0 },
+    visible: {
+      opacity: 1,
+      height: "auto",
+      transition: { duration: 0.2, ease: "circOut" },
+      // push last visible item down to overlap with append button (hide double border)
+      marginBottom: "-1px"
+    },
+    exit: {
+      opacity: 0,
+      height: 0,
+      marginBottom: 0,
+      transition: {
+        // on exit first fade out, then shrink
+        opacity: { duration: 0.1, ease: "circOut" },
+        height: { delay: 0.1, duration: 0.2, ease: "circOut" }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx5(
+    AnimatePresence,
+    {
+      mode: "wait",
+      onExitComplete: () => {
+        methods.remove();
+      },
+      children: isVisible ? /* @__PURE__ */ jsx5(
+        motion.li,
+        {
+          ref: setNodeRef,
+          animate: disableAnimation ? void 0 : "visible",
+          className: cn5(className.listItem),
+          "data-dragging": isDragging,
+          "data-testid": `${testId}_element`,
+          exit: disableAnimation ? void 0 : "exit",
+          initial: disableAnimation ? false : "hidden",
+          style: sortingStyle,
+          variants: disableAnimation ? void 0 : listItemMotionVariants,
+          children: /* @__PURE__ */ jsxs2("div", { className: cn5(className.listItemInner), children: [
+            sortable ? /* @__PURE__ */ jsx5(
+              SortDragHandle_default,
+              {
+                className: className.sortDragHandle,
+                id,
+                testId: `${testId}_sort_drag_handle`
+              }
+            ) : null,
+            /* @__PURE__ */ jsx5(
+              Grid_default,
+              {
+                className: cn5(className.elementFieldsGrid),
+                testId: `${testId}_element_fields_grid`,
+                children
+              }
+            ),
+            duplicate || insertAfter ? /* @__PURE__ */ jsx5(
+              ElementActionsMenu_default,
+              {
+                className: className.actionsMenuButton,
+                duplicate,
+                insertAfter,
+                showRemove: !(lastNotDeletable && fields.length === 1),
+                testId: `${testId}_actions_menu`,
+                methods: __spreadProps(__spreadValues({}, methods), {
+                  remove: () => {
+                    if (disableAnimation) {
+                      methods.remove();
+                    } else {
+                      setIsVisible(false);
+                    }
+                  }
+                })
+              }
+            ) : /* @__PURE__ */ jsx5(Fragment, { children: lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ jsx5(
+              ElementRemoveButton_default,
+              {
+                className: className.removeButton,
+                testId: `${testId}_remove_button`,
+                onClick: () => {
+                  if (disableAnimation) {
+                    methods.remove();
+                  } else {
+                    setIsVisible(false);
+                  }
+                }
+              }
+            ) })
+          ] })
+        },
+        id
+      ) : null
+    }
+  );
+};
+var FieldArrayElement_default = FieldArrayElement;
+
+// src/FieldArray/subcomponents/FieldArrayLabel.tsx
+import { cn as cn6 } from "@fuf-stack/pixel-utils";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var FieldArrayLabel = ({
+  className = void 0,
+  label: _label,
+  name
+}) => {
+  var _a;
+  const { error, getLabelProps, invalid, label } = useUniformField({
+    name,
+    showInvalidWhen: "immediate",
+    label: _label
+  });
+  if (!_label) {
+    return null;
+  }
+  const hasErrors = invalid && (error == null ? void 0 : error._errors);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    __spreadProps(__spreadValues({}, getLabelProps()), {
+      "aria-level": 3,
+      role: "heading",
+      className: cn6((_a = getLabelProps()) == null ? void 0 : _a.className, className, {
+        // when there are no array level errors, the label should have foreground color
+        "text-foreground!": !hasErrors
+      }),
+      children: label
+    })
+  );
+};
+var FieldArrayLabel_default = FieldArrayLabel;
+
+// src/FieldArray/subcomponents/FieldArrayValidationError.tsx
+import {
+  AnimatePresence as AnimatePresence2,
+  motion as motion2,
+  useReducedMotion
+} from "@fuf-stack/pixel-motion";
+import { cn as cn7 } from "@fuf-stack/pixel-utils";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var FieldArrayValidationError = ({
+  name
+}) => {
+  var _a;
+  const {
+    error,
+    getErrorMessageProps,
+    getHelperWrapperProps,
+    invalid,
+    testId
+  } = useUniformField({
+    name,
+    showInvalidWhen: "immediate"
+  });
+  const disableAnimation = useReducedMotion();
+  const hasErrors = invalid && (error == null ? void 0 : error._errors);
+  return /* @__PURE__ */ jsx7(AnimatePresence2, { initial: !disableAnimation, children: hasErrors ? /* @__PURE__ */ jsx7(
+    motion2.div,
+    {
+      exit: disableAnimation ? void 0 : { opacity: 0, height: 0 },
+      initial: disableAnimation ? false : { height: 0, opacity: 0 },
+      style: { overflow: "hidden" },
+      transition: { duration: 0.2, ease: "circOut" },
+      animate: disableAnimation ? void 0 : { opacity: 1, height: "auto" },
+      children: /* @__PURE__ */ jsx7(
+        "div",
+        __spreadProps(__spreadValues({}, getHelperWrapperProps()), {
+          className: cn7(
+            (_a = getHelperWrapperProps()) == null ? void 0 : _a.className,
+            // force helper to be visible (for some reason it's hidden by default) and add padding/rounded corners
+            "rounded-b-small block px-3 py-2"
+          ),
+          children: /* @__PURE__ */ jsx7("div", __spreadProps(__spreadValues({}, getErrorMessageProps()), { children: /* @__PURE__ */ jsx7(
+            FieldValidationError_default,
+            {
+              error: error._errors,
+              testId
+            }
+          ) }))
+        })
+      )
+    },
+    "field-array-errors"
+  ) : null });
+};
+var FieldArrayValidationError_default = FieldArrayValidationError;
+
+// 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 jsx8 } 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) => {
+        return field.id === active.id;
+      });
+      const newIndex = fields.findIndex((field) => {
+        return field.id === (over == null ? void 0 : over.id);
+      });
+      move(oldIndex, newIndex);
+    }
+  };
+  return /* @__PURE__ */ jsx8(
+    DndContext,
+    {
+      collisionDetection: closestCenter,
+      modifiers: [restrictToVerticalAxis, restrictToWindowEdges],
+      onDragEnd: handleDragEnd,
+      sensors,
+      children: /* @__PURE__ */ jsx8(
+        SortableContext,
+        {
+          strategy: verticalListSortingStrategy,
+          items: fields.map((field) => {
+            return field.id;
+          }),
+          children
+        }
+      )
+    }
+  );
+};
+var SortContext_default = SortContext;
+
+// src/FieldArray/FieldArray.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var fieldArrayVariants = tv({
+  slots: {
+    /** base class for the field array wrapper */
+    base: [
+      // base styles
+      "rounded-small border-divider bg-content1 overflow-hidden border",
+      // divider between items
+      "divide-divider divide-y"
+    ],
+    /** class for the actions menu button */
+    actionsMenuButton: [
+      // base styles
+      "text-default-600 flex items-center justify-center",
+      // fixed height/no round corners/center align
+      "h-full rounded-none"
+    ],
+    /** class for the append button */
+    appendButton: [
+      // base styles
+      "rounded-b-small w-full rounded-t-none",
+      // match label height (p-3 = 12px vertical padding + text-base line height)
+      "!h-[48px] !min-h-0",
+      // focus styles - inset ring with rounded bottom corners to match container
+      "focus-visible:ring-focus outline-none focus-visible:ring-2 focus-visible:ring-inset"
+    ],
+    /** class for the element fields grid */
+    elementFieldsGrid: ["w-full grow p-3"],
+    /** class for the label */
+    label: [
+      // override HeroUI label positioning and display
+      "pointer-events-auto! static! z-auto! block! w-full!",
+      // reset any transforms or translations
+      "translate-x-0! translate-y-0! transform-none!",
+      // card header styling - use text-medium (16px) instead of text-base for correct 48px height
+      "rounded-t-small text-medium p-3 font-semibold"
+    ],
+    /** class for the list */
+    list: ["overflow-hidden"],
+    /** class for the list wrapper */
+    listWrapper: ["overflow-hidden"],
+    /** class for the list item (performs motion animations) */
+    listItem: [
+      // base styles
+      "group relative flex flex-row",
+      // overlap borders by shifting first item up 1px (similar to how last item overlaps with append button)
+      "first:-mt-px"
+    ],
+    /** class for the list item inner */
+    listItemInner: [
+      // base styles
+      "bg-content1 divide-divider flex w-full flex-row items-stretch",
+      // x division and borders
+      "border-divider divide-x divide-solid border-t border-b"
+    ],
+    /** class for the remove button */
+    removeButton: [
+      // base styles
+      "flex items-center justify-center",
+      // fixed height/no round corners
+      "!h-full !min-h-0 !rounded-none px-3",
+      // focus styles - inset ring
+      "focus-visible:ring-focus outline-none focus-visible:ring-2 focus-visible:ring-inset"
+    ],
+    /** class for the sort drag handle */
+    sortDragHandle: [
+      // base styles
+      "text-default-600 flex cursor-grab items-center justify-center px-2 transition-colors",
+      // hover and  dragging state
+      "hover:bg-default-100 group-data-[dragging=true]:bg-default-100 active:cursor-grabbing",
+      // focus styles - inset ring
+      "focus-visible:ring-focus outline-none focus-visible:ring-2 focus-visible:ring-inset"
+    ]
+  },
+  variants: {
+    hasLabel: {
+      false: {
+        // focus styles - when there is no label, the first item actions menu button should have rounded top right corners
+        actionsMenuButton: "group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none",
+        // focus styles - when there is no label, the first item remove button focus ring should have rounded top right corners
+        removeButton: "group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none",
+        // focus styles - when there is no label, the first item sort drag handle focus ring should have rounded top left corners
+        sortDragHandle: "group-[:first-child]:rounded-tl-small group-[:first-child]:group-data-[dragging=true]:rounded-tl-none"
+      }
+    }
+  }
+});
+var FieldArray = (_a) => {
+  var _b = _a, {
+    appendButtonText = "Add Element",
+    children,
+    className: _className = void 0,
+    duplicate = false,
+    elementInitialValue: _elementInitialValue = null,
+    elementMarginBottom = void 0,
+    flat = false,
+    insertAfter = false,
+    lastElementNotRemovable = false,
+    name,
+    sortable = false
+  } = _b, uniformFieldProps = __objRest(_b, [
+    "appendButtonText",
+    "children",
+    "className",
+    "duplicate",
+    "elementInitialValue",
+    "elementMarginBottom",
+    "flat",
+    "insertAfter",
+    "lastElementNotRemovable",
+    "name",
+    "sortable"
+  ]);
+  const { control, error, getValues, invalid, testId } = useUniformField(__spreadValues({
+    name,
+    showInvalidWhen: "immediate"
+  }, uniformFieldProps));
+  const { fields, append, remove, insert, move } = useFieldArray({
+    control,
+    name
+  });
+  const { trigger } = useFormContext();
+  useEffect(() => {
+    setTimeout(() => {
+      trigger(name);
+    }, 200);
+  }, [fields.length]);
+  const elementInitialValue = flat ? { [flatArrayKey]: _elementInitialValue != null ? _elementInitialValue : null } : _elementInitialValue != null ? _elementInitialValue : {};
+  const prefersReducedMotion = useReducedMotion2();
+  const disableAnimationRef = useRef(true);
+  useEffect(() => {
+    if (!prefersReducedMotion) {
+      disableAnimationRef.current = false;
+    }
+  }, [prefersReducedMotion]);
+  if (lastElementNotRemovable && fields.length === 0) {
+    append(elementInitialValue);
+  }
+  const variants = fieldArrayVariants({ hasLabel: !!uniformFieldProps.label });
+  const className = variantsToClassNames(variants, _className, "base");
+  return /* @__PURE__ */ jsxs3("div", { className: className.base, children: [
+    /* @__PURE__ */ jsx9(
+      FieldArrayLabel_default,
+      {
+        className: className.label,
+        label: uniformFieldProps.label,
+        name
+      }
+    ),
+    fields.length ? (
+      /* list wrapper */
+      /* @__PURE__ */ jsx9("div", { className: cn8(className.listWrapper), children: /* @__PURE__ */ jsx9(SortContext_default, { fields, move, sortable, children: /* @__PURE__ */ jsx9("ul", { className: className.list, "data-testid": testId, children: fields.map((field, index) => {
+        const elementName = flat ? `${name}.${index}.${flatArrayKey}` : `${name}.${index}`;
+        const elementTestId = `${testId}_${index}`;
+        const elementMethods = {
+          append: () => {
+            append(elementInitialValue);
+          },
+          duplicate: () => {
+            const values = getValues(name);
+            const currentValue = values[index];
+            const nextValue = flat ? { [flatArrayKey]: currentValue } : currentValue;
+            insert(index + 1, nextValue);
+          },
+          insert: () => {
+            insert(index + 1, elementInitialValue);
+          },
+          remove: () => {
+            remove(index);
+          }
+        };
+        return /* @__PURE__ */ jsx9(
+          FieldArrayElement_default,
+          {
+            className,
+            disableAnimation: disableAnimationRef.current,
+            duplicate,
+            elementMarginBottom,
+            fields,
+            id: field.id,
+            index,
+            insertAfter,
+            lastNotDeletable: lastElementNotRemovable,
+            methods: elementMethods,
+            sortable,
+            testId: elementTestId,
+            children: children({
+              index,
+              length: fields.length,
+              methods: elementMethods,
+              name: elementName,
+              testId: elementTestId
+            })
+          },
+          field.id
+        );
+      }) }) }) })
+    ) : null,
+    /* @__PURE__ */ jsx9(
+      ElementAppendButton_default,
+      {
+        appendButtonText,
+        testId: `${testId}_append_button`,
+        className: cn8(
+          className.appendButton,
+          // only round bottom corners if there are no errors below
+          // @ts-expect-error - error._errors exists but not typed
+          // eslint-disable-next-line no-underscore-dangle
+          { "rounded-none": invalid && (error == null ? void 0 : error._errors) }
+        ),
+        onClick: () => {
+          append(elementInitialValue);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx9(FieldArrayValidationError_default, { name })
+  ] });
+};
+var FieldArray_default = FieldArray;
+
+// src/FieldArray/index.ts
+var FieldArray_default2 = FieldArray_default;
+
+export {
+  FieldArray_default,
+  FieldArray_default2
+};
+//# sourceMappingURL=chunk-GST3AQOR.js.map