@eightshift/ui-components 4.0.0 → 5.0.0

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

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

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

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

@@ -1,151 +0,0 @@
-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-BYNHbol3.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

@@ -1,342 +0,0 @@
-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-CvzGKGCo.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-DkCSC521.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { b as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-DwDr6ozG.js";
-import { r as reactDomExports } from "../../index-BYHhzLf-.js";
-import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-B0b-6KBr.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CV5l3lf6.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-icmbmNdI.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
-};