@eightshift/ui-components 5.0.5 → 5.0.6

package/dist/components/menu/menu.js

@@ -242,6 +242,7 @@ const MenuItem = (props) => {
  * @component
  * @param {Object} props - Component props.
  * @param {JSX.Element} props.trigger - The trigger button for the submenu. **This should be a `MenuItem`.**
+ * @param {boolean} [props.keepOpen=false] - If `true`, the submenu will not close when an item is selected.
  * @param {Object} [props.popoverProps] - Props to pass to the popover.
  *
  * @returns {JSX.Element} The SubMenuItem component.
@@ -251,7 +252,18 @@ const MenuItem = (props) => {
  * @preserve
  */
 const SubMenuItem = (props) => {
-  const { children, trigger, popoverProps } = props;
+  const { children, trigger, popoverProps, keepOpen } = props;
+  let additionalProps = {};
+  if (keepOpen) {
+    additionalProps = {
+      ...additionalProps,
+      selectionMode: "multiple",
+      selectedKeys: [],
+      onSelectionChange: () => {
+      },
+      items: []
+    };
+  }
   return /* @__PURE__ */ jsxs($3674c52c6b3c5bce$export$ecabc99eeffab7ca, { children: [
     cloneElement(trigger, {
       endIcon: /* @__PURE__ */ jsx("span", { className: "es:text-secondary-400", children: icons.caretRightFill })
@@ -268,6 +280,7 @@ const SubMenuItem = (props) => {
           {
             "aria-label": props["aria-label"] ?? __("Submenu", "eightshift-ui-components"),
             className: "es:any-focus:outline-hidden",
+            ...additionalProps,
             children
           }
         )

package/dist/components/option-select/option-select.js

@@ -1,9 +1,9 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { icons } from "../../icons/icons.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { ButtonGroup } from "../button/button.js";
-import { Menu, MenuSeparator, MenuItem } from "../menu/menu.js";
+import { SubMenuItem, MenuSeparator, MenuItem, Menu } from "../menu/menu.js";
 import { RadioButtonGroup, RadioButton } from "../radio/radio.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
@@ -38,7 +38,7 @@ import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
  *
  * @returns {JSX.Element} The OptionSelect component.
  *
- * @typedef {'toggleButtons' | 'toggleButtonsSplit' | 'radios' | 'radiosSegmented' | 'menu'} OptionSelectType
+ * @typedef {'toggleButtons' | 'toggleButtonsSplit' | 'radios' | 'radiosSegmented' | 'menu' | 'submenu' | 'standaloneMenuItems'} OptionSelectType
  *
  * @example
  * <OptionSelect
@@ -55,7 +55,7 @@ import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
  * @preserve
  */
 const OptionSelect = (props) => {
-  var _a;
+  var _a, _b;
   const {
     icon,
     label,
@@ -96,6 +96,129 @@ const OptionSelect = (props) => {
   if (type === "radiosSegmented") {
     radioDesign = "segmented";
   }
+  if (type === "submenu") {
+    return /* @__PURE__ */ jsxs(
+      SubMenuItem,
+      {
+        trigger: /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            icon: !noTriggerIcon && (icon ?? // eslint-disable-next-line no-nested-ternary
+            (currentItem ? typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (_a = icons) == null ? void 0 : _a[currentItem == null ? void 0 : currentItem.icon] : currentItem == null ? void 0 : currentItem.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel)),
+            children: /* @__PURE__ */ jsx(
+              RichLabel,
+              {
+                label: noTriggerLabel ? null : label ?? (currentItem == null ? void 0 : currentItem.label) ?? notSetLabel,
+                subtitle: subtitle === true ? currentItem == null ? void 0 : currentItem.label : subtitle,
+                noColor: true
+              }
+            )
+          }
+        ),
+        ...wrapperProps,
+        children: [
+          options.map(
+            ({
+              label: optionLabel,
+              value: optionValue,
+              icon: optionIcon,
+              endIcon: optionEndIcon,
+              ariaLabel: optionAriaLabel,
+              subtitle: optionSubtitle,
+              separator: optionHasSeparator,
+              sectionTitle: optionSectionTitle,
+              shortcut: optionShortcut,
+              disabled: optionDisabled
+            }) => {
+              var _a2, _b2;
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
+                optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
+                /* @__PURE__ */ jsxs(
+                  MenuItem,
+                  {
+                    selected: value === optionValue,
+                    disabled: optionDisabled || disabled,
+                    className: itemClassName,
+                    icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
+                    endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b2 = icons) == null ? void 0 : _b2[optionEndIcon] : optionEndIcon),
+                    "aria-label": optionAriaLabel ?? optionLabel,
+                    onClick: () => onChange(optionValue),
+                    shortcut: optionShortcut,
+                    ...itemProps,
+                    children: [
+                      !noItemLabel && !optionSubtitle && optionLabel,
+                      !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
+                        RichLabel,
+                        {
+                          label: optionLabel,
+                          subtitle: optionSubtitle,
+                          noColor: true
+                        }
+                      )
+                    ]
+                  }
+                ),
+                optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
+              ] }, optionValue);
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+  if (type === "standaloneMenuItems") {
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      options.map(
+        ({
+          label: optionLabel,
+          value: optionValue,
+          icon: optionIcon,
+          endIcon: optionEndIcon,
+          ariaLabel: optionAriaLabel,
+          subtitle: optionSubtitle,
+          separator: optionHasSeparator,
+          sectionTitle: optionSectionTitle,
+          shortcut: optionShortcut,
+          disabled: optionDisabled
+        }) => {
+          var _a2, _b2;
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
+            optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
+            /* @__PURE__ */ jsxs(
+              MenuItem,
+              {
+                selected: value === optionValue,
+                disabled: optionDisabled || disabled,
+                className: itemClassName,
+                icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
+                endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b2 = icons) == null ? void 0 : _b2[optionEndIcon] : optionEndIcon),
+                "aria-label": optionAriaLabel ?? optionLabel,
+                onClick: () => onChange(optionValue),
+                shortcut: optionShortcut,
+                ...itemProps,
+                children: [
+                  !noItemLabel && !optionSubtitle && optionLabel,
+                  !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
+                    RichLabel,
+                    {
+                      label: optionLabel,
+                      subtitle: optionSubtitle,
+                      noColor: true
+                    }
+                  )
+                ]
+              }
+            ),
+            optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
+          ] }, optionValue);
+        }
+      ),
+      children
+    ] });
+  }
   return /* @__PURE__ */ jsxs(
     BaseControl,
     {
@@ -188,7 +311,7 @@ const OptionSelect = (props) => {
           {
             triggerLabel: noTriggerLabel ? null : (currentItem == null ? void 0 : currentItem.label) ?? notSetLabel,
             triggerIcon: !noTriggerIcon && // eslint-disable-next-line no-nested-ternary
-            (currentItem ? typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (_a = icons) == null ? void 0 : _a[currentItem == null ? void 0 : currentItem.icon] : currentItem == null ? void 0 : currentItem.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel),
+            (currentItem ? typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (_b = icons) == null ? void 0 : _b[currentItem == null ? void 0 : currentItem.icon] : currentItem == null ? void 0 : currentItem.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel),
             tooltip: noTriggerLabel ? /* @__PURE__ */ jsx(
               RichLabel,
               {
@@ -218,7 +341,7 @@ const OptionSelect = (props) => {
                   shortcut: optionShortcut,
                   disabled: optionDisabled
                 }) => {
-                  var _a2, _b;
+                  var _a2, _b2;
                   return /* @__PURE__ */ jsxs(Fragment, { children: [
                     (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
                     optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
@@ -229,7 +352,7 @@ const OptionSelect = (props) => {
                         disabled: optionDisabled || disabled,
                         className: itemClassName,
                         icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
-                        endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b = icons) == null ? void 0 : _b[optionEndIcon] : optionEndIcon),
+                        endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b2 = icons) == null ? void 0 : _b2[optionEndIcon] : optionEndIcon),
                         "aria-label": optionAriaLabel ?? optionLabel,
                         onClick: () => onChange(optionValue),
                         shortcut: optionShortcut,

package/package.json

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