@fuf-stack/uniform 1.4.1 → 1.5.0

package/dist/chunk-DYTE5N3B.cjs

@@ -0,0 +1,684 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkTTD3KL6Ecjs = require('./chunk-TTD3KL6E.cjs');
+
+
+
+
+var _chunkC5GIWGQRcjs = require('./chunk-C5GIWGQR.cjs');
+
+
+var _chunkNHEZXA4Hcjs = require('./chunk-NHEZXA4H.cjs');
+
+
+var _chunkZ353BLWIcjs = require('./chunk-Z353BLWI.cjs');
+
+
+
+
+var _chunk555JRYCScjs = require('./chunk-555JRYCS.cjs');
+
+// src/FieldArray/FieldArray.tsx
+var _react = require('react');
+var _pixelmotion = require('@fuf-stack/pixel-motion');
+var _pixelutils = require('@fuf-stack/pixel-utils');
+
+// src/FieldArray/subcomponents/ElementAppendButton.tsx
+var _fa = require('react-icons/fa');
+
+var _pixels = require('@fuf-stack/pixels');
+var _jsxruntime = require('react/jsx-runtime');
+var ElementAppendButton = ({
+  appendButtonText = "Add Element",
+  className = void 0,
+  onClick,
+  testId = void 0
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _pixels.Button,
+    {
+      disableAnimation: true,
+      className: _pixelutils.cn.call(void 0, className),
+      onClick,
+      size: "sm",
+      testId,
+      variant: "light",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaPlus, {}),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: appendButtonText })
+      ]
+    }
+  );
+};
+var ElementAppendButton_default = ElementAppendButton;
+
+// src/FieldArray/subcomponents/FieldArrayElement.tsx
+
+var _sortable = require('@dnd-kit/sortable');
+var _utilities = require('@dnd-kit/utilities');
+
+
+
+// src/FieldArray/subcomponents/ElementActionsMenu.tsx
+
+var _vsc = require('react-icons/vsc');
+
+
+
+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__ */ _jsxruntime.jsx.call(void 0, _fa.FaCopy, {})
+    });
+  }
+  if (insertAfter) {
+    menuItems.push({
+      key: "insertAfter",
+      label: "Insert After",
+      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _vsc.VscInsert, {})
+    });
+  }
+  if (showRemove) {
+    menuItems.push({
+      key: "remove",
+      className: "text-danger",
+      label: "Remove",
+      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimes, {})
+    });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _pixels.Menu,
+    {
+      ariaLabel: "Element actions",
+      items: menuItems,
+      onAction: handleAction,
+      placement: "right",
+      testId,
+      triggerButtonProps: {
+        className: _pixelutils.cn.call(void 0, className),
+        disableRipple: true,
+        size: "md",
+        variant: "light"
+      }
+    }
+  );
+};
+var ElementActionsMenu_default = ElementActionsMenu;
+
+// src/FieldArray/subcomponents/ElementRemoveButton.tsx
+
+
+
+
+var ElementRemoveButton = ({
+  className = void 0,
+  onClick,
+  testId = void 0
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _pixels.Button,
+    {
+      ariaLabel: "remove element",
+      className: _pixelutils.cn.call(void 0, className),
+      color: "danger",
+      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimes, {}),
+      onClick,
+      size: "sm",
+      testId,
+      variant: "light"
+    }
+  );
+};
+var ElementRemoveButton_default = ElementRemoveButton;
+
+// src/FieldArray/subcomponents/SortDragHandle.tsx
+
+
+
+
+var SortDragHandle = ({
+  className = void 0,
+  id,
+  testId = void 0
+}) => {
+  const { attributes, listeners } = _sortable.useSortable.call(void 0, { id });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
+      className: _pixelutils.cn.call(void 0, className),
+      "data-testid": testId
+    }, attributes), listeners), {
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaGripVertical, {})
+    })
+  );
+};
+var SortDragHandle_default = SortDragHandle;
+
+// src/FieldArray/subcomponents/FieldArrayElement.tsx
+
+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 } = _sortable.useSortable.call(void 0, { id });
+  const sortingStyle = sortable ? {
+    transform: _utilities.CSS.Translate.toString(transform),
+    transition,
+    zIndex: isDragging ? 50 : void 0
+  } : void 0;
+  const [isVisible, setIsVisible] = _react.useState.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0, 
+    _pixelmotion.AnimatePresence,
+    {
+      mode: "wait",
+      onExitComplete: () => {
+        methods.remove();
+      },
+      children: isVisible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _pixelmotion.motion.li,
+        {
+          ref: setNodeRef,
+          animate: disableAnimation ? void 0 : "visible",
+          className: _pixelutils.cn.call(void 0, 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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _pixelutils.cn.call(void 0, className.listItemInner), children: [
+            sortable ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              SortDragHandle_default,
+              {
+                className: className.sortDragHandle,
+                id,
+                testId: `${testId}_sort_drag_handle`
+              }
+            ) : null,
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkTTD3KL6Ecjs.Grid_default,
+              {
+                className: _pixelutils.cn.call(void 0, className.elementFieldsGrid),
+                testId: `${testId}_element_fields_grid`,
+                children
+              }
+            ),
+            duplicate || insertAfter ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              ElementActionsMenu_default,
+              {
+                className: className.actionsMenuButton,
+                duplicate,
+                insertAfter,
+                showRemove: !(lastNotDeletable && fields.length === 1),
+                testId: `${testId}_actions_menu`,
+                methods: _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, methods), {
+                  remove: () => {
+                    if (disableAnimation) {
+                      methods.remove();
+                    } else {
+                      setIsVisible(false);
+                    }
+                  }
+                })
+              }
+            ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              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
+
+
+var FieldArrayLabel = ({
+  className = void 0,
+  label: _label,
+  name
+}) => {
+  var _a;
+  const { error, getLabelProps, invalid, label } = _chunkC5GIWGQRcjs.useUniformField.call(void 0, {
+    name,
+    showInvalidWhen: "immediate",
+    label: _label
+  });
+  if (!_label) {
+    return null;
+  }
+  const hasErrors = invalid && (error == null ? void 0 : error._errors);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getLabelProps()), {
+      "aria-level": 3,
+      role: "heading",
+      className: _pixelutils.cn.call(void 0, (_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
+
+
+
+
+
+
+
+var FieldArrayValidationError = ({
+  name
+}) => {
+  var _a;
+  const {
+    error,
+    getErrorMessageProps,
+    getHelperWrapperProps,
+    invalid,
+    testId
+  } = _chunkC5GIWGQRcjs.useUniformField.call(void 0, {
+    name,
+    showInvalidWhen: "immediate"
+  });
+  const disableAnimation = _pixelmotion.useReducedMotion.call(void 0, );
+  const hasErrors = invalid && (error == null ? void 0 : error._errors);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pixelmotion.AnimatePresence, { initial: !disableAnimation, children: hasErrors ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _pixelmotion.motion.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__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), {
+          className: _pixelutils.cn.call(void 0, 
+            (_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__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkNHEZXA4Hcjs.FieldValidationError_default,
+            {
+              error: error._errors,
+              testId
+            }
+          ) }))
+        })
+      )
+    },
+    "field-array-errors"
+  ) : null });
+};
+var FieldArrayValidationError_default = FieldArrayValidationError;
+
+// src/FieldArray/subcomponents/SortContext.tsx
+
+
+
+
+
+
+
+var _core = require('@dnd-kit/core');
+
+
+
+var _modifiers = require('@dnd-kit/modifiers');
+
+
+
+
+
+var SortContext = ({
+  children,
+  sortable,
+  fields,
+  move
+}) => {
+  const sensors = _core.useSensors.call(void 0, 
+    _core.useSensor.call(void 0, _core.PointerSensor),
+    _core.useSensor.call(void 0, _core.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__ */ _jsxruntime.jsx.call(void 0, 
+    _core.DndContext,
+    {
+      collisionDetection: _core.closestCenter,
+      modifiers: [_modifiers.restrictToVerticalAxis, _modifiers.restrictToWindowEdges],
+      onDragEnd: handleDragEnd,
+      sensors,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _sortable.SortableContext,
+        {
+          strategy: _sortable.verticalListSortingStrategy,
+          items: fields.map((field) => {
+            return field.id;
+          }),
+          children
+        }
+      )
+    }
+  );
+};
+var SortContext_default = SortContext;
+
+// src/FieldArray/FieldArray.tsx
+
+var fieldArrayVariants = _pixelutils.tv.call(void 0, {
+  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 = _chunk555JRYCScjs.__objRest.call(void 0, _b, [
+    "appendButtonText",
+    "children",
+    "className",
+    "duplicate",
+    "elementInitialValue",
+    "elementMarginBottom",
+    "flat",
+    "insertAfter",
+    "lastElementNotRemovable",
+    "name",
+    "sortable"
+  ]);
+  const { control, error, getValues, invalid, testId } = _chunkC5GIWGQRcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
+    name,
+    showInvalidWhen: "immediate"
+  }, uniformFieldProps));
+  const { fields, append, remove, insert, move } = _chunkC5GIWGQRcjs.useFieldArray.call(void 0, {
+    control,
+    name
+  });
+  const { trigger } = _chunkC5GIWGQRcjs.useFormContext.call(void 0, );
+  _react.useEffect.call(void 0, () => {
+    setTimeout(() => {
+      trigger(name);
+    }, 200);
+  }, [fields.length]);
+  const elementInitialValue = flat ? { [_chunkZ353BLWIcjs.flatArrayKey]: _elementInitialValue != null ? _elementInitialValue : null } : _elementInitialValue != null ? _elementInitialValue : {};
+  const prefersReducedMotion = _pixelmotion.useReducedMotion.call(void 0, );
+  const disableAnimationRef = _react.useRef.call(void 0, true);
+  _react.useEffect.call(void 0, () => {
+    if (!prefersReducedMotion) {
+      disableAnimationRef.current = false;
+    }
+  }, [prefersReducedMotion]);
+  if (lastElementNotRemovable && fields.length === 0) {
+    append(elementInitialValue);
+  }
+  const variants = fieldArrayVariants({ hasLabel: !!uniformFieldProps.label });
+  const className = _pixelutils.variantsToClassNames.call(void 0, variants, _className, "base");
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: className.base, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      FieldArrayLabel_default,
+      {
+        className: className.label,
+        label: uniformFieldProps.label,
+        name
+      }
+    ),
+    fields.length ? (
+      /* list wrapper */
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _pixelutils.cn.call(void 0, className.listWrapper), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortContext_default, { fields, move, sortable, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: className.list, "data-testid": testId, children: fields.map((field, index) => {
+        const elementName = flat ? `${name}.${index}.${_chunkZ353BLWIcjs.flatArrayKey}` : `${name}.${index}`;
+        const elementTestId = `${testId}_${index}`;
+        const elementMethods = {
+          append: () => {
+            append(elementInitialValue);
+          },
+          duplicate: () => {
+            const values = getValues(name);
+            const currentValue = values[index];
+            const nextValue = flat ? { [_chunkZ353BLWIcjs.flatArrayKey]: currentValue } : currentValue;
+            insert(index + 1, nextValue);
+          },
+          insert: () => {
+            insert(index + 1, elementInitialValue);
+          },
+          remove: () => {
+            remove(index);
+          }
+        };
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          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__ */ _jsxruntime.jsx.call(void 0, 
+      ElementAppendButton_default,
+      {
+        appendButtonText,
+        testId: `${testId}_append_button`,
+        className: _pixelutils.cn.call(void 0, 
+          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__ */ _jsxruntime.jsx.call(void 0, FieldArrayValidationError_default, { name })
+  ] });
+};
+var FieldArray_default = FieldArray;
+
+// src/FieldArray/index.ts
+var FieldArray_default2 = FieldArray_default;
+
+
+
+
+exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
+//# sourceMappingURL=chunk-DYTE5N3B.cjs.map