@eightshift/ui-components 4.0.0 → 5.0.0

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

@@ -1,158 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { s as sprintf, _ as __ } 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 {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,
-    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
-          }
-        ),
-        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

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

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

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

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