@eightshift/ui-components 5.0.0 → 5.0.1

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

@@ -0,0 +1,119 @@
+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";
+import { Expandable } from "../expandable/expandable.js";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { RepeaterContext } from "./repeater-context.js";
+/**
+ * A Repeater item.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display in the label.
+ * @param {string} [props.label] - Label to display.
+ * @param {string} [props.subtitle] - Subtitle to display.
+ * @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.
+ *
+ * @see {@link Repeater} for usage example.
+ *
+ * @preserve
+ */
+const RepeaterItem = (props) => {
+  const { children, icon, label, subtitle, "aria-label": ariaLabel, className, actions, textValue, expandDisabled, menuOptions, noMenuButton, ...rest } = props;
+  const { deleteItem, duplicateItem, isDragged, isOutOfBounds, isSelected, canDelete, canAdd, allOpen, setAllOpen } = useContext(RepeaterContext);
+  return /* @__PURE__ */ jsx(
+    Expandable,
+    {
+      icon: isOutOfBounds ? icons.trash : icon,
+      label: isOutOfBounds ? __("Release to delete", "eightshift-ui-components") : label,
+      subtitle: isOutOfBounds ? null : subtitle,
+      className: clsx(
+        "es:transition",
+        isDragged && "es:border es:border-secondary-100 es:bg-white/50 es:shadow-md es:backdrop-blur-lg",
+        isOutOfBounds && "es:border es:border-red-200! es:bg-red-50 es:shadow-red-500/20 es:[&_button]:invisible es:[&_svg_path]:stroke-red-500"
+      ),
+      labelClassName: clsx(className, isDragged ? "es:cursor-grabbing" : "es:cursor-grab"),
+      headerClassName: clsx(
+        "es:transition es:rounded-lg es:border es:border-transparent",
+        isSelected && "es:bg-accent-50 es:border-accent-100",
+        "es:group-focus:outline-hidden es:group-focus:border-accent-500 es:group-focus:ring-2 es:group-focus:ring-accent-500/50"
+      ),
+      open: allOpen,
+      onOpenChange: (open) => {
+        if (allOpen && !open) {
+          setAllOpen(false);
+        }
+      },
+      customOpenButton: ({ open, toggleOpen, tooltip, disabled }) => {
+        return /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:gap-px", children: [
+          /* @__PURE__ */ jsxs(
+            Menu,
+            {
+              hidden: noMenuButton,
+              triggerIcon: icons.moreH,
+              triggerProps: {
+                className: "es:icon:size-5 es:icon: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("es:icon:size-5 es:icon:transition-transform", open && "es:icon:-scale-y-100"),
+              size: "small"
+            }
+          )
+        ] });
+      },
+      actions,
+      headerProps: { "data-movable-handle": true },
+      noFocusHandling: true,
+      ...rest,
+      children
+    },
+    allOpen
+  );
+};
+export {
+  RepeaterItem
+};

package/dist/components/repeater/repeater.js

@@ -0,0 +1,280 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { Button } from "../button/button.js";
+import { icons } from "../../icons/icons.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
+import { RepeaterContext } from "./repeater-context.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { L as List, a as arrayRemove, b as arrayMove } from "../../List-CZMUbkFU.js";
+import { Menu, MenuItem, MenuSeparator } from "../menu/menu.js";
+const fixIds = (items, itemIdBase) => {
+  return items == null ? void 0 : items.map((item, i) => ({
+    ...item,
+    id: (item == null ? void 0 : item.id) ?? `${itemIdBase}-${i}`
+  }));
+};
+/**
+ * A component that allows re-ordering a list of items with additional sub-options.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display in the label.
+ * @param {string} [props.label] - Label to display.
+ * @param {string} [props.subtitle] - Subtitle to display.
+ * @param {string} [props.help] - Help text to display below the input.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
+ * @param {Object<string, any>[]} props.items - Data to display in the repeater.
+ * @param {boolean} [props.hideEmptyState] - If `true`, the empty state will not be displayed when there are no items.
+ * @param {Object<string, any>} [props.addDefaultItem] - Additional properties to add to a new item.
+ * @param {boolean} [props.addDisabled] - If `true`, the add button is disabled.
+ * @param {Function} props.onChange - Function to run when the items change.
+ * @param {Function} [props.onAfterItemAdd] - Function to run after an item is added.
+ * @param {Function} [props.onAfterItemRemove] - Function to run after an item is removed.
+ * @param {Number} [props.minItems] - The minimum number of items that must be present. If there are less items than this, deleting items will be disabled.
+ * @param {Number} [props.maxItems] - The maximum number of items that can be present. If there are more items than this, adding items will be disabled.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @param {JSX.Element} [props.addButton] - If provided, overrides the default add button. `(props: { addItem: (additional: Object<string, any>?) => void, disabled: Boolean }) => JSX.Element`.
+ * @param {string} [props.className] - Classes to pass to the item wrapper.
+ * @param {boolean} [props.noExpandAllButton] - If `true`, the "Expand all"/"Collapse all" button is not displayed.
+ * @param {JSX.Element|JSX.Element[]} [props.moreOptions] - Options to add in the "More options" menu.
+ * @param {JSX.Element} [props.emptyState] - Allows overriding the default empty state.
+ *
+ * @returns {JSX.Element} The Repeater component.
+ *
+ * @example
+ * <Repeater
+ * 	label='My repeater'
+ * 	items={items}
+ * 	onChange={setItems}
+ * >
+ * 	{(item) => {
+ * 		const { title, updateData } = item;
+ *
+ * 		return (
+ * 			<RepeaterItem
+ * 				label={title ?? 'New item'}
+ * 				icon={icons.myIcon}
+ * 			>
+ * 				<InputField
+ * 					label='Title'
+ * 					type='text'
+ * 					value={title}
+ * 					onChange={(value) => updateData({ title: value })}
+ * 				/>
+ * 			</RepeaterItem>
+ * 		);
+ * 	}}
+ * </Repeater>
+ *
+ * @preserve
+ */
+const Repeater = (props) => {
+  const itemIdBase = `item-${useId().replaceAll(":", "")}`;
+  const {
+    children,
+    onChange,
+    items: rawItems,
+    icon,
+    label,
+    subtitle,
+    help,
+    actions,
+    hideEmptyState,
+    addDefaultItem = {},
+    addDisabled,
+    onAfterItemAdd,
+    onAfterItemRemove,
+    minItems,
+    maxItems,
+    addButton,
+    className,
+    emptyState,
+    noExpandAllButton,
+    moreOptions,
+    hidden
+  } = props;
+  const [allOpen, setAllOpen] = useState(false);
+  if (typeof rawItems === "undefined" || rawItems === null || !Array.isArray(rawItems)) {
+    console.warn(__("Repeater: 'items' are not an array or are undefined!", "eightshift-ui-components"));
+  }
+  const items = fixIds(rawItems ?? [], itemIdBase);
+  const canDelete = items.length > (minItems ?? 0);
+  const canAdd = items.length < (maxItems ?? Number.MAX_SAFE_INTEGER);
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      help,
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        actions,
+        /* @__PURE__ */ jsxs(
+          Menu,
+          {
+            tooltip: __("More options", "eightshift-ui-components"),
+            triggerIcon: icons.moreH,
+            triggerProps: { type: "ghost", size: "small" },
+            hidden: (items == null ? void 0 : items.length) < 1 || noExpandAllButton && !moreOptions,
+            children: [
+              !noExpandAllButton && /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  endIcon: allOpen ? icons.panelCollapse : icons.panelExpand,
+                  onClick: () => setAllOpen(!allOpen),
+                  children: allOpen ? __("Collapse all", "eightshift-ui-components") : __("Expand all", "eightshift-ui-components")
+                }
+              ),
+              moreOptions && /* @__PURE__ */ jsx(MenuSeparator, {}),
+              moreOptions
+            ]
+          }
+        ),
+        !addButton && /* @__PURE__ */ jsx(
+          Button,
+          {
+            onPress: () => {
+              const newItem = { id: `${itemIdBase}${items.length + 1}`, ...addDefaultItem };
+              onChange([...items, newItem]);
+              if (onAfterItemAdd) {
+                onAfterItemAdd(newItem);
+              }
+            },
+            size: "small",
+            icon: icons.add,
+            className: clsx("es:icon:size-4", !hideEmptyState && items.length < 1 && "es:invisible"),
+            tooltip: __("Add item", "eightshift-ui-components"),
+            disabled: addDisabled || !canAdd
+          }
+        ),
+        addButton && /* @__PURE__ */ jsx("div", { className: clsx(!hideEmptyState && items.length < 1 && "es:invisible"), children: addButton({
+          addItem: (additional = {}) => {
+            const newItem = { id: `${itemIdBase}${items.length + 1}`, ...addDefaultItem, ...additional };
+            onChange([...items, newItem]);
+            if (onAfterItemAdd) {
+              onAfterItemAdd(newItem);
+            }
+          },
+          disabled: addDisabled
+        }) })
+      ] }),
+      className: "es:w-full",
+      children: [
+        /* @__PURE__ */ jsx(
+          List,
+          {
+            values: items,
+            onChange: ({ oldIndex, newIndex }) => onChange(newIndex === -1 ? arrayRemove(items, oldIndex) : arrayMove(items, oldIndex, newIndex)),
+            renderList: ({ children: children2, props: props2 }) => {
+              const { key, ...rest } = props2;
+              return /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  className: clsx("es:w-full es:list-none", className),
+                  ...rest,
+                  children: children2
+                },
+                key
+              );
+            },
+            renderItem: ({ value: item, index, isDragged, isSelected, isOutOfBounds, props: props2 }) => {
+              const { key, ...rest } = props2;
+              return /* @__PURE__ */ jsx(
+                "li",
+                {
+                  className: "es:group es:w-full es:list-none es:any-focus:outline-hidden",
+                  ...rest,
+                  children: /* @__PURE__ */ jsx(
+                    RepeaterContext.Provider,
+                    {
+                      value: {
+                        ...item,
+                        index,
+                        deleteItem: () => {
+                          onChange([...items].filter((i) => i.id !== item.id));
+                          if (onAfterItemRemove) {
+                            onAfterItemRemove(item);
+                          }
+                        },
+                        duplicateItem: () => {
+                          const newItem = { ...item, id: `${itemIdBase}${items.length + 1}` };
+                          onChange([...items, newItem]);
+                          if (onAfterItemAdd) {
+                            onAfterItemAdd(newItem);
+                          }
+                        },
+                        isDragged,
+                        isOutOfBounds,
+                        isSelected,
+                        canDelete,
+                        canAdd,
+                        allOpen,
+                        setAllOpen
+                      },
+                      children: children({
+                        ...item,
+                        updateData: (newValue) => {
+                          const updated = [...items].map((i) => i.id === item.id ? { ...i, ...newValue } : i);
+                          onChange(updated);
+                        },
+                        itemIndex: index,
+                        deleteItem: () => {
+                          onChange([...items].filter((i) => i.id !== item.id));
+                          if (onAfterItemRemove) {
+                            onAfterItemRemove(item);
+                          }
+                        }
+                      })
+                    }
+                  )
+                },
+                (item == null ? void 0 : item.id) ?? key
+              );
+            },
+            removableByMove: true
+          }
+        ),
+        /* @__PURE__ */ jsxs(AnimatedVisibility, { visible: items.length < 1, children: [
+          emptyState,
+          !hideEmptyState && /* @__PURE__ */ jsxs("div", { className: "es:flex es:flex-col es:items-center es:gap-2 es:rounded-md es:border es:border-dashed es:border-secondary-300 es:p-4 es:text-center es:text-sm es:text-secondary-400", children: [
+            !addButton && /* @__PURE__ */ jsx(
+              Button,
+              {
+                onPress: () => {
+                  const newItem = { id: `${itemIdBase}${items.length + 1}`, ...addDefaultItem };
+                  onChange([...items, newItem]);
+                  if (onAfterItemAdd) {
+                    onAfterItemAdd(newItem);
+                  }
+                },
+                size: "small",
+                icon: icons.add,
+                className: "es:icon:size-4",
+                disabled: addDisabled,
+                children: __("Add item", "eightshift-ui-components")
+              }
+            ),
+            addButton && !hideEmptyState && addButton({
+              addItem: (additional = {}) => {
+                const newItem = { id: `${itemIdBase}${items.length + 1}`, ...addDefaultItem, ...additional };
+                onChange([...items, newItem]);
+                if (onAfterItemAdd) {
+                  onAfterItemAdd(newItem);
+                }
+              },
+              disabled: addDisabled
+            })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  Repeater
+};