@eightshift/ui-components 1.5.0 → 1.6.0

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

@@ -6,8 +6,10 @@ 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.
  *
@@ -19,8 +21,12 @@ import { c as clsx } from "../../lite-DVmmD_-j.js";
  * @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.
@@ -48,9 +54,12 @@ const ComponentToggle = (props) => {
     subtitle,
     useComponent,
     onChange,
+    noLabel,
     noUseToggle,
-    expandButtonDisabled,
+    noExpandButton,
     controlOnly,
+    expandButtonDisabled,
+    hideUseToggleOnExpand,
     contentClassName = "es-uic-space-y-2.5",
     design = "default",
     hidden
@@ -58,7 +67,7 @@ const ComponentToggle = (props) => {
   if (hidden) {
     return null;
   }
-  if (controlOnly) {
+  if (controlOnly || noLabel && noUseToggle && noExpandButton) {
     return children;
   }
   if (design.startsWith("compact")) {
@@ -70,7 +79,7 @@ const ComponentToggle = (props) => {
         ToggleButton,
         {
           icon: hasIcon && (icon ?? icons.componentGeneric),
-          tooltip: hasIcon && label,
+          tooltip: hasIcon && !noLabel && label,
           selected: useComponent,
           onChange,
           children: hasLabel && label
@@ -94,12 +103,43 @@ const ComponentToggle = (props) => {
       )
     ] });
   }
+  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,
+      label: !noLabel && label,
       subtitle,
+      keepActionsOnExpand: !hideUseToggleOnExpand,
       actions: !noUseToggle && /* @__PURE__ */ jsx(
         Switch,
         {

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

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import "../../default-i18n-BqWys-1G.js";
+import { DraggableContext } from "./draggable-context.js";
+import { useContext } from "react";
+import { icons } from "../../icons/icons.js";
+import "../../react-jsx-parser.min-sPC96O_U.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-uic-flex es-uic-h-5 es-uic-w-4 es-uic-cursor-pointer es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-text-gray-400 es-uic-transition",
+        "[&>svg]:es-uic-size-4 [&>svg]:es-uic-shrink-0",
+        "active:es-uic-border-teal-500/30 active:es-uic-bg-teal-50 active:es-uic-text-teal-500",
+        "focus:es-uic-outline-none focus-visible:es-uic-border-teal-500 focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
+        "hover:es-uic-text-teal-500",
+        status === "dragging" && "!es-uic-border-teal-600 !es-uic-bg-teal-500 !es-uic-text-white es-uic-shadow-sm es-uic-shadow-teal-500/30",
+        className
+      ),
+      ref: handleRef,
+      ...rest,
+      children: children ?? icons.reorderGrabberV
+    }
+  );
+};
+export {
+  DraggableHandle
+};