@eightshift/ui-components 1.5.0 → 1.6.0

package/dist/components/repeater/repeater-item.js

@@ -1,5 +1,6 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "../button/button.js";
+import { Menu, MenuSeparator, MenuItem } from "../menu/menu.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { useContext } from "react";
@@ -17,6 +18,8 @@ import { RepeaterContext } from "./repeater-context.js";
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
  * @param {string} [props.textValue] - The text value of the item.
  * @param {string} [props.className] - Classes to pass to the item.
+ * @param {JSX.Element|JSX.Element[]} [props.menuOptions] - Additional menu options to display next to the expand button.
+ * @param {bool} [props.noMenuButton] - If `true`, the menu button next to the expand button is not displayed.
  * @param {bool} [props.expandDisabled] - If `true`, the item cannot be expanded.
  *
  * @returns {JSX.Element} The RepeaterItem component.
@@ -26,37 +29,83 @@ import { RepeaterContext } from "./repeater-context.js";
  * @preserve
  */
 const RepeaterItem = (props) => {
-  const { children, icon, label, subtitle, "aria-label": ariaLabel, className, actions, textValue, expandDisabled, ...rest } = props;
-  const { canDelete, handleOpenChange, deleteItem, isDragSource } = useContext(RepeaterContext);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  const { children, icon, label, subtitle, "aria-label": ariaLabel, className, actions, textValue, expandDisabled, menuOptions, noMenuButton, ...rest } = props;
+  const { deleteItem, duplicateItem, isDragged, isOutOfBounds, isSelected, canDelete, canAdd } = useContext(RepeaterContext);
+  return /* @__PURE__ */ jsx(
     Expandable,
     {
-      disabled: canDelete,
-      icon,
-      label,
-      subtitle,
-      className: clsx(isDragSource && "es-uic-border es-uic-border-gray-100 es-uic-bg-white/50 es-uic-shadow-md es-uic-backdrop-blur-lg"),
-      labelClassName: className,
-      onOpenChange: (isOpen) => handleOpenChange(isOpen),
-      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        actions,
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            hidden: !canDelete,
-            ariaLabel: __("Remove item", "eightshift-ui-components"),
-            size: "small",
-            type: "ghost",
-            icon: icons.trash,
-            onPress: () => deleteItem(),
-            className: "es-uic-translate-x-px"
-          }
-        )
-      ] }),
+      icon: isOutOfBounds ? icons.trash : icon,
+      label: isOutOfBounds ? __("Release to delete", "eightshift-ui-components") : label,
+      subtitle: isOutOfBounds ? null : subtitle,
+      className: clsx(
+        "es-uic-transition",
+        isDragged && "es-uic-border es-uic-border-gray-100 es-uic-bg-white/50 es-uic-shadow-md es-uic-backdrop-blur-lg",
+        isOutOfBounds && "es-uic-border !es-uic-border-red-200 es-uic-bg-red-50 es-uic-shadow-red-500/20 [&_button]:es-uic-invisible [&_svg_path]:es-uic-stroke-red-500"
+      ),
+      labelClassName: clsx(className, isDragged ? "es-uic-cursor-grabbing" : "es-uic-cursor-grab"),
+      headerClassName: clsx(
+        "es-uic-transition es-uic-rounded-md",
+        isSelected && "es-uic-bg-teal-50 es-uic-border-teal-100",
+        "group-focus:es-uic-outline-none group-focus-visible:es-uic-ring group-focus-visible:es-uic-ring-teal-500 group-focus-visible:es-uic-ring-opacity-50"
+      ),
+      customOpenButton: ({ open, toggleOpen, tooltip, disabled }) => {
+        return /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-items-center es-uic-gap-px", children: [
+          /* @__PURE__ */ jsxs(
+            Menu,
+            {
+              hidden: noMenuButton,
+              triggerIcon: icons.moreH,
+              triggerProps: {
+                className: "[&>svg]:es-uic-size-5 [&>svg]:es-uic-shrink-0",
+                size: "small",
+                type: "ghost"
+              },
+              tooltip: __("More options", "eightshift-ui-components"),
+              children: [
+                menuOptions,
+                menuOptions && /* @__PURE__ */ jsx(MenuSeparator, {}),
+                /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    disabled: !canAdd,
+                    icon: icons.copy,
+                    onPress: () => duplicateItem(),
+                    children: __("Duplicate", "eightshift-ui-components")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    disabled: !canDelete,
+                    icon: icons.trash,
+                    onPress: () => deleteItem(),
+                    children: __("Remove", "eightshift-ui-components")
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "ghost",
+              icon: open ? icons.caretDownFill : icons.caretDown,
+              onPress: toggleOpen,
+              tooltip,
+              disabled,
+              className: clsx("[&>svg]:es-uic-size-5 [&>svg]:es-uic-transition-transform", open && "[&>svg]:-es-uic-scale-y-100"),
+              size: "small"
+            }
+          )
+        ] });
+      },
+      actions,
+      headerProps: { "data-movable-handle": true },
       noFocusHandling: true,
+      ...rest,
       children
     }
-  ) });
+  );
 };
 export {
   RepeaterItem