@eightshift/ui-components 1.5.0 → 1.5.1

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,42 @@ 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,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     Expandable,
     {
       icon: icon ?? icons.componentGeneric,
-      label,
+      label: !noLabel && label,
       subtitle,
+      keepActionsOnExpand: !hideUseToggleOnExpand,
       actions: !noUseToggle && /* @__PURE__ */ jsx(
         Switch,
         {

package/dist/components/select/styles.js

@@ -16,7 +16,7 @@ const multiValueLabelStyles = "es-uic-select-none";
 const multiValueRemoveStyles = "hover:es-uic-bg-red-500/15 hover:es-uic-text-red-900 es-uic-text-gray-500 es-uic-rounded es-uic-p-0.5 [&>svg]:es-uic-size-3.5 [&>svg]:es-uic-stroke-[1.5] es-uic-transition";
 const clearIndicatorStyles = "es-uic-text-gray-500 es-uic-p-1 es-uic-rounded-md hover:bg-red-50 hover:text-red-800 es-uic-transition";
 const dropdownIndicatorStyles = "es-uic-text-gray-500 es-uic-px-1 group-hover:es-uic-text-black [&>svg]:es-uic-transition-transform [&>svg]:es-uic-duration-500 [&>svg]:es-uic-size-5.5";
-const menuStyles = "es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow-lg es-uic-mt-1 es-uic-text-sm es-uic-overflow-x-hidden";
+const menuStyles = "es-uic-relative es-uic-z-50 es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow-lg es-uic-mt-1 es-uic-text-sm es-uic-overflow-x-hidden";
 const optionStyles = {
   base: "es-uic-p-2 !es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-gray-800 es-uic-rounded [&>svg]:es-uic-size-5 [&>svg]:es-uic-text-gray-500 es-uic-transition es-uic-mx-1 first:es-uic-mt-1 last:es-uic-mb-1 !es-uic-w-auto es-uic-min-h-9",
   focus: "es-uic-bg-gray-100 active:es-uic-bg-teal-700/15",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eightshift/ui-components",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",