@eightshift/ui-components 3.0.1 → 5.0.0

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

@@ -1,119 +0,0 @@
-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

@@ -1,280 +0,0 @@
-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
-};