@eightshift/ui-components 5.0.0 → 5.0.2

package/dist/components/draggable-list/draggable-list-context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const DraggableListContext = createContext();
+export {
+  DraggableListContext
+};

package/dist/components/draggable-list/draggable-list-item.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import "../../default-i18n-CT_oS1Fy.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { icons } from "../../icons/icons.js";
+import { cloneElement } from "react";
+import "../../react-jsx-parser.min-DZCiis5V.js";
+/**
+ * A DraggableList 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 label.
+ *
+ * @returns {JSX.Element} The DraggableList component.
+ *
+ * @see {@link DraggableList} for usage example.
+ *
+ * @preserve
+ */
+const DraggableListItem = (props) => {
+  const { children, icon, label, subtitle, className, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      className: clsx("es:w-full", className),
+      fullWidthLabel: true,
+      inline: true,
+      ...rest,
+      children: [
+        cloneElement(icons.reorderGrabberV, {
+          className: "es:opacity-0 es:transition-opacity es:group-focus-visible:opacity-100 es:text-secondary-400 es:size-4 es:group-hover:opacity-100"
+        }),
+        children
+      ]
+    }
+  );
+};
+/**
+ * A Draggable item handle.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the handle.
+ *
+ * @returns {JSX.Element} The DraggableListItemHandle component.
+ *
+ * @example
+ * <DraggableListItemHandle />
+ *
+ * @preserve
+ */
+const DraggableListItemHandle = (props) => {
+  const { className, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: className ?? 'es:relative es:h-6 es:w-2 es:cursor-pointer es:items-center es:justify-center es:self-center es:rounded es:border es:border-secondary-300 es:bg-secondary-50 es:transition es:after:absolute es:after:inset-0 es:after:m-auto es:after:h-4 es:after:w-px es:after:bg-secondary-200 es:after:transition es:after:content-[""] es:hover:border-accent-500 es:hover:bg-accent-400 es:hover:after:bg-accent-500',
+      ...rest,
+      "data-movable-handle": true,
+      tabIndex: -1,
+      children
+    }
+  );
+};
+export {
+  DraggableListItem,
+  DraggableListItemHandle
+};

package/dist/components/draggable-list/draggable-list.js

@@ -0,0 +1,151 @@
+import { jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { L as List, a as arrayRemove, b as arrayMove } from "../../List-CZMUbkFU.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.
+ *
+ * @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 list.
+ * @param {Function} props.onChange - Function to run when the items change.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @param {boolean} [props.disabled] - If `true`, item reordering is disabled.
+ * @param {string} [props.className] - Classes to pass to the item wrapper.
+ *
+ * @returns {JSX.Element} The DraggableList component.
+ *
+ * @example
+ * <DraggableList
+ * 	label='My draggable list'
+ * 	items={items}
+ * 	onChange={setItems}
+ * >
+ * 	{(item) => {
+ * 		const { title, updateData } = item;
+ *
+ * 		return (
+ * 			<DraggableListItem
+ * 				label={title ?? 'New item'}
+ * 				icon={icons.myIcon}
+ * 			>
+ * 				<InputField
+ * 					label='Title'
+ * 					type='text'
+ * 					value={title}
+ * 					onChange={(value) => updateData({ title: value })}
+ * 				/>
+ * 			</DraggableListItem>
+ * 		);
+ * 	}}
+ * </DraggableList>
+ *
+ * @preserve
+ */
+const DraggableList = (props) => {
+  const itemIdBase = useId("draggable-list-item-");
+  const {
+    children,
+    items: rawItems,
+    onChange,
+    icon,
+    label,
+    subtitle,
+    help,
+    actions,
+    disabled,
+    className,
+    labelAsHandle,
+    hidden,
+    ...rest
+  } = props;
+  if (typeof rawItems === "undefined" || rawItems === null || !Array.isArray(rawItems)) {
+    console.warn(__("DraggableList: 'items' are not an array or are undefined!", "eightshift-ui-components"));
+  }
+  const items = fixIds(rawItems ?? [], itemIdBase);
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      help,
+      actions,
+      className: "es:w-full",
+      ...rest,
+      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, ...rest2 } = props2;
+            return /* @__PURE__ */ jsx(
+              "ul",
+              {
+                className: "es:w-full es:list-none",
+                ...rest2,
+                children: children2
+              },
+              key
+            );
+          },
+          renderItem: ({ value, index, isDisabled, isDragged, isSelected, isOutOfBounds, props: props2 }) => {
+            const { key, ...rest2 } = props2;
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: clsx(
+                  "es:group",
+                  "es:min-h-8 es:w-full",
+                  "es:flex es:items-center es:gap-1 es:rounded-lg",
+                  "es:transition-[box-shadow,background-color,filter,opacity,border-color]",
+                  "es:border es:border-transparent",
+                  "es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:focus:border-accent-500",
+                  isDisabled && "es:grayscale",
+                  isDragged && "es:bg-white es:opacity-50",
+                  isSelected && "es:bg-accent-50",
+                  isDragged ? "es:cursor-grabbing" : "es:cursor-grab"
+                ),
+                ...rest2,
+                children: children({
+                  ...value,
+                  updateData: (newValue) => {
+                    onChange(items.map((i) => i.id === value.id ? { ...i, ...newValue } : i));
+                  },
+                  itemIndex: index,
+                  deleteItem: () => {
+                    onChange(items.filter((i) => i.id !== value.id));
+                    if (value.onAfterItemRemove) {
+                      onAfterItemRemove(value);
+                    }
+                  }
+                })
+              },
+              (value == null ? void 0 : value.id) ?? key
+            );
+          }
+        }
+      )
+    }
+  );
+};
+export {
+  DraggableList
+};

package/dist/components/expandable/expandable.js

@@ -0,0 +1,342 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { useRef, useCallback, useEffect, forwardRef, createContext, useContext } from "react";
+import { RichLabel } from "../rich-label/rich-label.js";
+import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
+import { Button } from "../button/button.js";
+import { icons } from "../../icons/icons.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BpwTmkAe.js";
+import { e as $bdb11010cef70236$export$f680877a34711e37, n as $b5e257d569688ac6$export$535bd6ca7f90a273, k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, o as $64fa3d84918910a7$export$c62b8e45d58ddad9, d as $3ef42575df84b30b$export$9d1611c77c2fe928, m as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-CZt7LCbO.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
+import { b as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-C2SkI1Fn.js";
+import { r as reactDomExports } from "../../index-CFozsmNS.js";
+import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-ICdlokG-.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Bv0UJQl8.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
+function $5e910fae8e128ead$export$6e3e27031a30522f(props, state, ref) {
+  let { isDisabled } = props;
+  let triggerId = $bdb11010cef70236$export$f680877a34711e37();
+  let panelId = $bdb11010cef70236$export$f680877a34711e37();
+  let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
+  let supportsBeforeMatch = !isSSR && "onbeforematch" in document.body;
+  let raf = useRef(null);
+  let handleBeforeMatch = useCallback(() => {
+    raf.current = requestAnimationFrame(() => {
+      if (ref.current) ref.current.setAttribute("hidden", "until-found");
+    });
+    reactDomExports.flushSync(() => {
+      state.toggle();
+    });
+  }, [
+    ref,
+    state
+  ]);
+  $e9faafb641e167db$export$90fc3a17d93f704c(ref, "beforematch", supportsBeforeMatch ? handleBeforeMatch : null);
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    if (raf.current) cancelAnimationFrame(raf.current);
+    if (supportsBeforeMatch && ref.current && !isDisabled) {
+      if (state.isExpanded) ref.current.removeAttribute("hidden");
+      else ref.current.setAttribute("hidden", "until-found");
+    }
+  }, [
+    isDisabled,
+    ref,
+    state.isExpanded,
+    supportsBeforeMatch
+  ]);
+  useEffect(() => {
+    return () => {
+      if (raf.current) cancelAnimationFrame(raf.current);
+    };
+  }, []);
+  return {
+    buttonProps: {
+      id: triggerId,
+      "aria-expanded": state.isExpanded,
+      "aria-controls": panelId,
+      onPress: (e) => {
+        if (!isDisabled && e.pointerType !== "keyboard") state.toggle();
+      },
+      isDisabled,
+      onPressStart(e) {
+        if (e.pointerType === "keyboard" && !isDisabled) state.toggle();
+      }
+    },
+    panelProps: {
+      id: panelId,
+      // This can be overridden at the panel element level.
+      role: "group",
+      "aria-labelledby": triggerId,
+      "aria-hidden": !state.isExpanded,
+      hidden: supportsBeforeMatch ? true : !state.isExpanded
+    }
+  };
+}
+function $bf996d45f4a36925$export$3fcbf6e4407997e0(props) {
+  let [isExpanded, setExpanded] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(props.isExpanded, props.defaultExpanded || false, props.onExpandedChange);
+  const expand = useCallback(() => {
+    setExpanded(true);
+  }, [
+    setExpanded
+  ]);
+  const collapse = useCallback(() => {
+    setExpanded(false);
+  }, [
+    setExpanded
+  ]);
+  const toggle = useCallback(() => {
+    setExpanded(!isExpanded);
+  }, [
+    setExpanded,
+    isExpanded
+  ]);
+  return {
+    isExpanded,
+    setExpanded,
+    expand,
+    collapse,
+    toggle
+  };
+}
+const $28f4fd908f0de97f$export$1d40e3e0cc4d5de = /* @__PURE__ */ createContext(null);
+const $28f4fd908f0de97f$export$d665dd135a51b28a = /* @__PURE__ */ createContext(null);
+const $28f4fd908f0de97f$export$dab3ea4a6ef094da = /* @__PURE__ */ createContext(null);
+const $28f4fd908f0de97f$var$InternalDisclosureContext = /* @__PURE__ */ createContext(null);
+const $28f4fd908f0de97f$export$74a362b31437ec83 = /* @__PURE__ */ forwardRef(function Disclosure(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $28f4fd908f0de97f$export$d665dd135a51b28a);
+  let groupState = useContext($28f4fd908f0de97f$export$1d40e3e0cc4d5de);
+  let { id, ...otherProps } = props;
+  let defaultId = $bdb11010cef70236$export$f680877a34711e37();
+  id || (id = defaultId);
+  let isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
+  let state = $bf996d45f4a36925$export$3fcbf6e4407997e0({
+    ...props,
+    isExpanded,
+    onExpandedChange(isExpanded2) {
+      var _props_onExpandedChange;
+      if (groupState) groupState.toggleKey(id);
+      (_props_onExpandedChange = props.onExpandedChange) === null || _props_onExpandedChange === void 0 ? void 0 : _props_onExpandedChange.call(props, isExpanded2);
+    }
+  });
+  let panelRef = React__default.useRef(null);
+  let isDisabled = props.isDisabled || (groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled) || false;
+  let { buttonProps, panelProps } = $5e910fae8e128ead$export$6e3e27031a30522f({
+    ...props,
+    isExpanded,
+    isDisabled
+  }, state, panelRef);
+  let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
+    within: true
+  });
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    id: void 0,
+    defaultClassName: "react-aria-Disclosure",
+    values: {
+      isExpanded: state.isExpanded,
+      isDisabled,
+      isFocusVisibleWithin,
+      state
+    }
+  });
+  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(otherProps);
+  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
+        {
+          slots: {
+            [$64fa3d84918910a7$export$c62b8e45d58ddad9]: {},
+            trigger: buttonProps
+          }
+        }
+      ],
+      [
+        $28f4fd908f0de97f$var$InternalDisclosureContext,
+        {
+          panelProps,
+          panelRef
+        }
+      ],
+      [
+        $28f4fd908f0de97f$export$dab3ea4a6ef094da,
+        state
+      ]
+    ]
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    ref,
+    "data-expanded": state.isExpanded || void 0,
+    "data-disabled": isDisabled || void 0,
+    "data-focus-visible-within": isFocusVisibleWithin || void 0,
+    ...domProps,
+    ...focusWithinProps,
+    ...renderProps
+  }, renderProps.children));
+});
+const $28f4fd908f0de97f$export$feabaa331e1d464c = /* @__PURE__ */ forwardRef(function DisclosurePanel(props, ref) {
+  let { role = "group" } = props;
+  let { panelProps, panelRef } = useContext($28f4fd908f0de97f$var$InternalDisclosureContext);
+  let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
+    within: true
+  });
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    defaultClassName: "react-aria-DisclosurePanel",
+    values: {
+      isFocusVisibleWithin
+    }
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...DOMProps,
+    ref: $5dc95899b306f630$export$c9058316764c140e(ref, panelRef),
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(panelProps, focusWithinProps),
+    ...renderProps,
+    role,
+    "data-focus-visible-within": isFocusVisibleWithin || void 0
+  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
+        null
+      ]
+    ]
+  }, props.children));
+});
+/**
+ * A component that allows hiding content in an expandable panel, to declutter the UI.
+ *
+ * @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.className] - Classes to pass to the container.
+ * @param {string} [props.contentClassName] - Classes to pass to the inner content wrapper.
+ * @param {string} [props.labelClassName] - Classes to pass to the label.
+ * @param {string} [props.headerClassName] - Classes to pass to the header (label + trigger).
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the panel header, left of the expand button.
+ * @param {boolean} [props.keepActionsOnExpand=false] - If `true`, the actions are not hidden when the panel is expanded.
+ * @param {boolean} [props.disabled] - If `true`, the expand button is disabled.
+ * @param {boolean} [props.open] - Whether the expandable is open.
+ * @param {Function} [props.onOpenChange] - Function is called when the panel is opened or closed.
+ * @param {object} [props.headerProps] - Props to pass to the header (label + trigger).
+ * @param {JSX.Element} [props.customOpenButton] - Allows adding a custom open button. **IMPORTANT**: make sure to set `slot='trigger'` on the passed element!
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The Expandable component.
+ *
+ * @example
+ * <Expandable label='My component'>
+ * 	...
+ * </Expandable>
+ *
+ * @preserve
+ */
+const Expandable = (props) => {
+  const {
+    icon,
+    label,
+    subtitle,
+    className,
+    labelClassName,
+    contentClassName,
+    headerClassName,
+    actions,
+    keepActionsOnExpand = false,
+    disabled,
+    noFocusHandling,
+    children,
+    open = false,
+    onOpenChange,
+    customOpenButton,
+    headerProps,
+    hidden,
+    ...other
+  } = props;
+  const [isOpen, setIsOpen] = React__default.useState(open);
+  if (isOpen && disabled) {
+    setIsOpen(false);
+  }
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    $28f4fd908f0de97f$export$74a362b31437ec83,
+    {
+      isExpanded: isOpen,
+      className: clsx("es:w-full es:rounded-xl es:border es:border-secondary-300/0 es:text-sm es:transition", isOpen && "es:border-secondary-300/100 es:shadow-lg", className),
+      ...other,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:h-10 es:items-center es:gap-1 es:transition-[padding]", isOpen && "es:py-1 es:pl-2 es:pr-1", headerClassName), children: [
+          /* @__PURE__ */ jsx(
+            RichLabel,
+            {
+              icon,
+              label,
+              subtitle,
+              className: labelClassName,
+              as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+              fullWidth: true
+            }
+          ),
+          actions && !keepActionsOnExpand && /* @__PURE__ */ jsx(
+            AnimatedVisibility,
+            {
+              visible: !isOpen,
+              className: "es:ml-auto es:flex es:gap-2",
+              transition: "slideFadeDownSlight",
+              noInitial: true,
+              children: actions
+            }
+          ),
+          actions && keepActionsOnExpand && /* @__PURE__ */ jsx("div", { className: "es:ml-auto es:flex es:gap-2", children: actions }),
+          customOpenButton && customOpenButton({
+            open: isOpen,
+            toggleOpen: () => {
+              setIsOpen(!isOpen);
+              if (onOpenChange) {
+                onOpenChange(!isOpen);
+              }
+            },
+            tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
+            disabled
+          }),
+          !customOpenButton && /* @__PURE__ */ jsx(
+            Button,
+            {
+              slot: "trigger",
+              type: "ghost",
+              icon: isOpen ? icons.caretDownFill : icons.caretDown,
+              onPress: () => {
+                setIsOpen(!isOpen);
+                if (onOpenChange) {
+                  onOpenChange(!isOpen);
+                }
+              },
+              tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
+              disabled,
+              className: clsx("es:icon:size-5 es:icon:transition-transform", isOpen && "es:icon:-scale-y-100"),
+              size: "small"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          $28f4fd908f0de97f$export$feabaa331e1d464c,
+          {
+            className: clsx(
+              isOpen && "es:space-y-2.5 es:border-t es:border-t-secondary-200 es:p-2",
+              isOpen && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-ease-spring-smooth es:motion-safe:motion-ease-linear/opacity es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
+              contentClassName
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Expandable
+};