@eightshift/ui-components 5.0.0 → 5.0.2

package/dist/components/component-toggle/component-toggle.js

@@ -0,0 +1,161 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { _ as __, s as sprintf } from "../../default-i18n-CT_oS1Fy.js";
+import { Expandable } from "../expandable/expandable.js";
+import { icons } from "../../icons/icons.js";
+import { Switch } from "../toggle/switch.js";
+import { TriggeredPopover } from "../popover/popover.js";
+import { ButtonGroup } from "../button/button.js";
+import { ToggleButton } from "../toggle-button/toggle-button.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { Spacer } from "../spacer/spacer.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
+/**
+ * A component that provides a nice way to toggle a component on and off, and display its content in an expandable panel.
+ *
+ * @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 {boolean} props.useComponent - Whether the component is used. If `false`, the content is hidden.
+ * @param {Function} props.onChange - Function to run when the toggle state changes.
+ * @param {boolean} [props.noUseToggle] - If `true`, the toggle is not displayed.
+ * @param {boolean} [props.noExpandButton] - If `true`, the expand button is not shown.
+ * @param {boolean} [props.noLabel] - If `true`, the label is not shown.
+ * @param {boolean} [props.noUseToggle] - If `true`, the toggle is not displayed.
+ * @param {boolean} [props.expandButtonDisabled] - If `true`, the expand button is disabled.
+ * @param {boolean} [props.controlOnly] - If `true`, only the control is displayed.
+ * @param {boolean} [props.hideUseToggleOnExpand] - If `true`, and the component is display in a variant where it can be expanded, the use toggle will hide when the component is expanded.
+ * @param {string} [props.contentClassName] - Classes to pass to the content container.
+ * @param {ComponentToggleDesign} [props.design='default'] - Design of the component.
+ * @param {string} [props.switchAriaLabel] - ARIA label of the toggle switch.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The ComponentToggle component.
+ *
+ * @typedef {'default' | 'compact' | 'compactLabel' | 'compactIcon'} ComponentToggleDesign
+ *
+ * @example
+ * <ComponentToggle
+ * 	label='My component'
+ * 	useComponent={useComponent}
+ * 	onChange={setUseComponent}
+ * >
+ * 	...
+ * </ComponentToggle>
+ *
+ * @preserve
+ */
+const ComponentToggle = (props) => {
+  const {
+    children,
+    icon,
+    label,
+    subtitle,
+    useComponent,
+    onChange,
+    noLabel,
+    noUseToggle,
+    noExpandButton,
+    controlOnly,
+    expandButtonDisabled,
+    hideUseToggleOnExpand,
+    switchAriaLabel = __("Use component", "eightshift-ui-components"),
+    contentClassName = "es:space-y-2.5",
+    design = "default",
+    hidden
+  } = props;
+  if (hidden) {
+    return null;
+  }
+  if (controlOnly || noLabel && noUseToggle && noExpandButton) {
+    return children;
+  }
+  if (design.startsWith("compact")) {
+    const optionsLabel = sprintf(__("%s options", "eightshift-ui-components"), label);
+    const hasIcon = design === "compact" || design === "compactIcon";
+    const hasLabel = design === "compact" || design === "compactLabel";
+    return /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+      /* @__PURE__ */ jsx(
+        ToggleButton,
+        {
+          icon: hasIcon && (icon ?? icons.componentGeneric),
+          tooltip: hasIcon && !noLabel && label,
+          selected: useComponent,
+          onChange,
+          children: hasLabel && label
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        TriggeredPopover,
+        {
+          triggerButtonProps: {
+            className: "es:w-5.5 es:stroke-[1.25]",
+            tooltip: optionsLabel,
+            disabled: !useComponent
+          },
+          triggerButtonIcon: icons.dropdownCaretAlt,
+          className: clsx("es:w-[18.5rem] es:p-2", contentClassName),
+          children: [
+            /* @__PURE__ */ jsx(Spacer, { text: optionsLabel }),
+            children
+          ]
+        }
+      )
+    ] });
+  }
+  if (noExpandButton) {
+    return /* @__PURE__ */ jsxs(
+      BaseControl,
+      {
+        icon: icon ?? icons.componentGeneric,
+        label: !noLabel && label,
+        subtitle,
+        actions: !noUseToggle && /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: useComponent,
+            onChange,
+            "aria-label": switchAriaLabel
+          }
+        ),
+        disabled: !useComponent || expandButtonDisabled,
+        children: [
+          noUseToggle && children,
+          !noUseToggle && /* @__PURE__ */ jsx(
+            AnimatedVisibility,
+            {
+              visible: useComponent,
+              className: contentClassName,
+              noInitial: true,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Expandable,
+    {
+      icon: icon ?? icons.componentGeneric,
+      label: !noLabel && label,
+      subtitle,
+      keepActionsOnExpand: !hideUseToggleOnExpand,
+      actions: !noUseToggle && /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: useComponent,
+          onChange
+        }
+      ),
+      disabled: !useComponent || expandButtonDisabled,
+      noFocusHandling: true,
+      children: !expandButtonDisabled && /* @__PURE__ */ jsx("div", { className: contentClassName, children })
+    }
+  );
+};
+export {
+  ComponentToggle
+};

package/dist/components/container-panel/container-panel.js

@@ -0,0 +1,131 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { Switch } from "../toggle/switch.js";
+import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
+import { Button } from "../button/button.js";
+import { icons } from "../../icons/icons.js";
+import { HStack } from "../layout/hstack.js";
+import { BaseControl } from "../base-control/base-control.js";
+/**
+ * Component that provides a container panel for options, with an optional title.
+ * Best used within the Gutenberg sidebar, instead of the default `PanelBody` component.
+ * Ensures that the content is spaced nicely.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the container.
+ * @param {string} [props.title] - Title to display on the top of the panel.
+ * @param {JSX.Element} [props.icon] - Icon to display on the top of the panel.
+ * @param {string} [props.subtitle] - Subtitle to display on the top of the panel.
+ * @param {boolean} [props.use] - Controls the panel use toggle.
+ * @param {Function} [props.onUseChange] - Function to call when the use toggle is toggled. `(value: boolean) => void`.
+ * @param {boolean} [props.closable] - If `true`, the panel can be closed. Will not show if `title` is not set.
+ * @param {boolean} [props.startOpen=false] - Controls whether the panel is open by default.
+ * @param {JSX.Element} [props.actions] - Actions to show at the end
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The ContainerPanel component.
+ *
+ * @example
+ * <ContainerPanel title='Paragraph'>
+ * 	...
+ * </ContainerPanel>
+ *
+ * @preserve
+ */
+const ContainerPanel = (props) => {
+  const { children, className, title, icon, subtitle, use, onUseChange, closable, startOpen = false, actions, hidden } = props;
+  const [open, setOpen] = useState(startOpen);
+  if (hidden) {
+    return null;
+  }
+  if (!title && typeof use === "undefined") {
+    return /* @__PURE__ */ jsx("div", { className: clsx("es:space-y-2 es:border-t es:border-t-secondary-200 es:p-4", className), children });
+  }
+  const justUse = !closable && typeof onUseChange !== "undefined";
+  const justClosable = closable && typeof onUseChange === "undefined";
+  const useAndClosable = closable && typeof onUseChange !== "undefined";
+  return /* @__PURE__ */ jsxs(
+    BaseControl,
+    {
+      icon,
+      label: title,
+      subtitle,
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        actions,
+        /* @__PURE__ */ jsxs(
+          HStack,
+          {
+            hidden: !closable && !onUseChange,
+            className: "es:ml-auto",
+            children: [
+              onUseChange && /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  checked: use,
+                  onChange: (value) => {
+                    if (!value) {
+                      setOpen(false);
+                    }
+                    onUseChange(value);
+                  }
+                }
+              ),
+              closable && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onPress: () => setOpen(!open),
+                  icon: (typeof use !== "undefined" ? open && use : open) ? icons.caretDownFill : icons.caretDown,
+                  type: "ghost",
+                  size: "small",
+                  className: clsx("es:icon:size-5 es:icon:transition-transform", (typeof use !== "undefined" ? open && use : open) && "es:icon:-scale-y-100"),
+                  disabled: typeof use !== "undefined" && !use
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      className: clsx(
+        "es:border-t es:border-t-secondary-200",
+        !closable && typeof use === "undefined" && "es:space-y-2",
+        justClosable && open && "es:pb-4",
+        justUse && use && "es:pb-4",
+        useAndClosable && use && open && "es:pb-4",
+        !justClosable && !justUse && !useAndClosable && "es:pb-4",
+        !closable && !onUseChange && typeof use === "undefined" && "es:px-4",
+        className
+      ),
+      labelContainerClassName: clsx((closable || onUseChange) && "es:pl-4 es:pr-3 es:min-h-12", !(closable || onUseChange) && "es:mt-3 es:mb-3", "es:pb-0!"),
+      controlContainerClassName: "es:px-4",
+      labelClassName: "es:text-secondary-600!",
+      children: [
+        !closable && !onUseChange && typeof use === "undefined" && children,
+        closable && typeof use === "undefined" && /* @__PURE__ */ jsx(
+          AnimatedVisibility,
+          {
+            visible: open,
+            className: "es:space-y-2 es:px-4",
+            transition: "slideFadeDownSlight",
+            noInitial: true,
+            children
+          }
+        ),
+        typeof use !== "undefined" && /* @__PURE__ */ jsx(
+          AnimatedVisibility,
+          {
+            visible: closable ? use && open : use,
+            className: "es:space-y-2 es:px-4",
+            transition: "slideFadeDownSlight",
+            noInitial: true,
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ContainerPanel
+};

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

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

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

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import "../../default-i18n-CT_oS1Fy.js";
+import { DraggableContext } from "./draggable-context.js";
+import { useContext } from "react";
+import { icons } from "../../icons/icons.js";
+import "../../react-jsx-parser.min-DZCiis5V.js";
+/**
+ * A Draggable item handle.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the handle.
+ *
+ * @returns {JSX.Element} The DraggableHandle component.
+ *
+ * @example
+ * <DraggableHandle />
+ *
+ * @preserve
+ */
+const DraggableHandle = (props) => {
+  const { className, children, ...rest } = props;
+  const { handleRef, status } = useContext(DraggableContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "es:flex es:h-5 es:w-4 es:cursor-pointer es:items-center es:justify-center es:rounded es:border es:border-secondary-200 es:bg-white es:text-secondary-400 es:transition",
+        "es:icon:size-4 es:icon:shrink-0",
+        "es:active:border-accent-500/30 es:active:bg-accent-50 es:active:text-accent-500",
+        "es:any-focus:outline-hidden",
+        status !== "dragging" && "es:focus:border-accent-500 es:focus:ring-2 es:focus:ring-accent-500/50",
+        "es:hover:text-accent-500",
+        status === "dragging" && "es:border-accent-600! es:bg-accent-500! es:text-white! es:shadow-sm es:shadow-accent-500/30 es:ring-3 es:ring-accent-500/50",
+        className
+      ),
+      ref: handleRef,
+      ...rest,
+      children: children ?? icons.reorderGrabberV
+    }
+  );
+};
+export {
+  DraggableHandle
+};