@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/components/repeater/repeater.js

@@ -1,282 +1,225 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
-import { Button } from "../button/button.js";
-import { icons } from "../../icons/icons.js";
-import { BaseControl } from "../base-control/base-control.js";
+import { t as clsx } from "../../clsx-BUU5J41u.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
-import { RepeaterContext } from "./repeater-context.js";
-import { L as List, a as arrayRemove, b as arrayMove } from "../../List-CQFXnN4w.js";
+import { t as Button } from "../../button-COTeluL8.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { t as __ } from "../../build-module-sxK3nxOK.js";
+import { add } from "../../icons/ui-icons/add.js";
+import { moreH } from "../../icons/ui-icons/more-h.js";
+import { panelCollapse } from "../../icons/ui-icons/panel-collapse.js";
+import { panelExpand } from "../../icons/ui-icons/panel-expand.js";
 import { Menu, MenuItem, MenuSeparator } from "../menu/menu.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
+import { n as arrayMove, r as arrayRemove, t as List } from "../../List-CMK5qsNF.js";
+import { RepeaterContext } from "./repeater-context.js";
+import { useCallback, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/repeater/repeater.jsx
 /**
- * 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 {boolean} [props.noDuplicateButton] - If `true`, the "Duplicate" button is not displayed.
- * @param {boolean} [props.noDragToRemove] - If `true`, the "drag to remove" functionality will be disabled.
- * @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 {
-    children,
-    onChange,
-    items,
-    icon,
-    label,
-    subtitle,
-    help,
-    actions,
-    hideEmptyState,
-    addDefaultItem = {},
-    addDisabled,
-    onAfterItemAdd,
-    onAfterItemRemove,
-    minItems,
-    maxItems,
-    addButton,
-    className,
-    emptyState,
-    noExpandAllButton,
-    noDuplicateButton,
-    noDragToRemove,
-    moreOptions,
-    hidden
-  } = props;
-  const [allOpen, setAllOpen] = useState(false);
-  const [openItems, setOpenItems] = useState({});
-  if (typeof items === "undefined" || items === null || !Array.isArray(items)) {
-    console.warn(__("Repeater: 'items' are not an array or are undefined!", "eightshift-ui-components"));
-  }
-  const canDelete = items.length > (minItems ?? 0);
-  const canAdd = items.length < (maxItems ?? Number.MAX_SAFE_INTEGER) && !addDisabled;
-  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?.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 = { ...addDefaultItem };
-              onChange([...items, newItem]);
-              if (onAfterItemAdd) {
-                onAfterItemAdd(newItem);
-              }
-            },
-            size: "small",
-            icon: icons.add,
-            className: !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 = { ...addDefaultItem, ...additional };
-            onChange([...items, newItem]);
-            if (onAfterItemAdd) {
-              onAfterItemAdd(newItem);
-            }
-          },
-          disabled: addDisabled
-        }) })
-      ] }),
-      className: "es:w-full",
-      children: [
-        /* @__PURE__ */ jsx(
-          List,
-          {
-            values: items.map((item, index) => ({ ...item, disabled: openItems?.[index] })),
-            onChange: ({ oldIndex, newIndex }) => onChange(newIndex === -1 ? arrayRemove(items, oldIndex) : arrayMove(items, oldIndex, newIndex)),
-            renderList: ({ children: children2, props: props2 }) => {
-              return /* @__PURE__ */ jsx(
-                "ul",
-                {
-                  className: clsx("es:w-full es:list-none es:m-0! es:flex es:flex-col es:gap-0.75", className),
-                  ...props2,
-                  children: children2
-                }
-              );
-            },
-            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 es:m-0!",
-                  ...rest,
-                  children: /* @__PURE__ */ jsx(
-                    RepeaterContext.Provider,
-                    {
-                      value: {
-                        ...item,
-                        index,
-                        deleteItem: () => {
-                          onChange([...items].filter((_, i) => i !== index));
-                          if (onAfterItemRemove) {
-                            onAfterItemRemove(item);
-                          }
-                        },
-                        duplicateItem: () => {
-                          const newItem = { ...item };
-                          onChange([...items, newItem]);
-                          if (onAfterItemAdd) {
-                            onAfterItemAdd(newItem);
-                          }
-                        },
-                        isDragged,
-                        isOutOfBounds,
-                        isSelected,
-                        canDelete,
-                        canAdd,
-                        allOpen,
-                        setAllOpen,
-                        setOpenItems,
-                        isItemOpen: openItems?.[index] ?? allOpen,
-                        noDuplicateButton
-                      },
-                      children: children({
-                        ...item,
-                        updateData: (newValue) => {
-                          const updated = [...items];
-                          updated[index] = {
-                            ...updated[index],
-                            ...newValue
-                          };
-                          onChange(updated);
-                        },
-                        itemIndex: index,
-                        deleteItem: () => {
-                          onChange([...items].filter((_, i) => i !== index));
-                          if (onAfterItemRemove) {
-                            onAfterItemRemove(item);
-                          }
-                        }
-                      })
-                    }
-                  )
-                },
-                key
-              );
-            },
-            removableByMove: !noDragToRemove
-          }
-        ),
-        /* @__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 = { ...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 = { ...addDefaultItem, ...additional };
-                onChange([...items, newItem]);
-                if (onAfterItemAdd) {
-                  onAfterItemAdd(newItem);
-                }
-              },
-              disabled: addDisabled
-            })
-          ] })
-        ] })
-      ]
-    }
-  );
-};
-export {
-  Repeater
+* 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 {boolean} [props.noDuplicateButton] - If `true`, the "Duplicate" button is not displayed.
+* @param {boolean} [props.noDragToRemove] - If `true`, the "drag to remove" functionality will be disabled.
+* @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={myIcon}
+* 			>
+* 				<InputField
+* 					label='Title'
+* 					type='text'
+* 					value={title}
+* 					onChange={(value) => updateData({ title: value })}
+* 				/>
+* 			</RepeaterItem>
+* 		);
+* 	}}
+* </Repeater>
+*/
+var Repeater = (props) => {
+	const { children, onChange, items, icon, label, subtitle, help, actions, hideEmptyState, addDefaultItem = {}, addDisabled, onAfterItemAdd, onAfterItemRemove, minItems, maxItems, addButton, className, emptyState, noExpandAllButton, noDuplicateButton, noDragToRemove, moreOptions, hidden } = props;
+	const [allOpen, setAllOpen] = useState(false);
+	const [openItems, setOpenItems] = useState({});
+	if (typeof items === "undefined" || items === null || !Array.isArray(items)) console.warn(__("Repeater: 'items' are not an array or are undefined!", "eightshift-ui-components"));
+	const canDelete = items.length > (minItems ?? 0);
+	const canAdd = items.length < (maxItems ?? Number.MAX_SAFE_INTEGER) && !addDisabled;
+	const addItem = useCallback((additional = {}) => {
+		const newItem = {
+			...addDefaultItem,
+			...additional
+		};
+		onChange([...items, newItem]);
+		if (onAfterItemAdd) onAfterItemAdd(newItem);
+	}, [
+		addDefaultItem,
+		items,
+		onAfterItemAdd,
+		onChange
+	]);
+	const handleListChange = useCallback(({ oldIndex, newIndex }) => onChange(newIndex === -1 ? arrayRemove(items, oldIndex) : arrayMove(items, oldIndex, newIndex)), [items, onChange]);
+	const listValues = useMemo(() => items.map((item, index) => ({
+		...item,
+		disabled: openItems?.[index]
+	})), [items, openItems]);
+	const renderList = useCallback(({ children, props }) => jsx("ul", {
+		className: clsx("es:w-full es:list-none es:m-0! es:flex es:flex-col es:gap-0.75", className),
+		...props,
+		children
+	}), [className]);
+	const renderItem = useCallback(({ value: item, index, isDragged, isSelected, isOutOfBounds, props }) => {
+		const { key, ...rest } = props;
+		return jsx("li", {
+			className: "es:group es:w-full es:list-none es:any-focus:outline-hidden es:m-0!",
+			...rest,
+			children: jsx(RepeaterContext.Provider, {
+				value: {
+					...item,
+					index,
+					deleteItem: () => {
+						onChange([...items].filter((_, i) => i !== index));
+						if (onAfterItemRemove) onAfterItemRemove(item);
+					},
+					duplicateItem: () => addItem(item),
+					isDragged,
+					isOutOfBounds,
+					isSelected,
+					canDelete,
+					canAdd,
+					allOpen,
+					setAllOpen,
+					setOpenItems,
+					isItemOpen: openItems?.[index] ?? allOpen,
+					noDuplicateButton
+				},
+				children: children({
+					...item,
+					updateData: (newValue) => {
+						const updated = [...items];
+						updated[index] = {
+							...updated[index],
+							...newValue
+						};
+						onChange(updated);
+					},
+					itemIndex: index,
+					deleteItem: () => {
+						onChange([...items].filter((_, i) => i !== index));
+						if (onAfterItemRemove) onAfterItemRemove(item);
+					}
+				})
+			})
+		}, key);
+	}, [
+		addItem,
+		allOpen,
+		canAdd,
+		canDelete,
+		children,
+		items,
+		noDuplicateButton,
+		onAfterItemRemove,
+		onChange,
+		openItems
+	]);
+	if (hidden) return null;
+	return jsxs(BaseControl, {
+		icon,
+		label,
+		subtitle,
+		help,
+		actions: jsxs(Fragment$1, { children: [
+			actions,
+			jsxs(Menu, {
+				tooltip: __("More options", "eightshift-ui-components"),
+				triggerIcon: moreH,
+				triggerProps: {
+					type: "ghost",
+					size: "small"
+				},
+				hidden: items?.length < 1 || noExpandAllButton && !moreOptions,
+				children: [
+					!noExpandAllButton && jsx(MenuItem, {
+						endIcon: allOpen ? panelCollapse : panelExpand,
+						onClick: () => setAllOpen(!allOpen),
+						children: allOpen ? __("Collapse all", "eightshift-ui-components") : __("Expand all", "eightshift-ui-components")
+					}),
+					moreOptions && jsx(MenuSeparator, {}),
+					moreOptions
+				]
+			}),
+			!addButton && jsx(Button, {
+				onPress: () => addItem(),
+				size: "small",
+				icon: add,
+				className: !hideEmptyState && items.length < 1 && "es:invisible",
+				tooltip: __("Add item", "eightshift-ui-components"),
+				disabled: addDisabled || !canAdd
+			}),
+			addButton && jsx("div", {
+				className: clsx(!hideEmptyState && items.length < 1 && "es:invisible"),
+				children: addButton({
+					addItem,
+					disabled: addDisabled
+				})
+			})
+		] }),
+		className: "es:w-full",
+		children: [jsx(List, {
+			values: listValues,
+			onChange: handleListChange,
+			renderList,
+			renderItem,
+			removableByMove: !noDragToRemove
+		}), jsxs(AnimatedVisibility, {
+			visible: items.length < 1,
+			children: [emptyState, !hideEmptyState && 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 && jsx(Button, {
+					onPress: () => addItem(),
+					size: "small",
+					icon: add,
+					className: "es:icon:size-4",
+					disabled: addDisabled,
+					children: __("Add item", "eightshift-ui-components")
+				}), addButton && !hideEmptyState && addButton({
+					addItem,
+					disabled: addDisabled
+				})]
+			})]
+		})]
+	});
 };
+//#endregion
+export { Repeater };