@conveyorhq/arrow-ds 1.198.0 → 1.200.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.198.0",
+  "version": "1.200.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Icon/Icon.d.ts

@@ -173,6 +173,7 @@ export declare enum ICON_TYPE {
     REPLY = "reply",
     ROBOT = "robot",
     ROCKET = "rocket",
+    RULER = "ruler",
     SAVE = "save",
     SCROLL = "scroll",
     SEARCH = "search",

package/public/components/Icon/Icon.js

@@ -191,6 +191,7 @@ const faRedo_1 = require("@fortawesome/free-solid-svg-icons/faRedo");
 const faReply_1 = require("@fortawesome/free-solid-svg-icons/faReply");
 const faRobot_1 = require("@fortawesome/free-solid-svg-icons/faRobot");
 const faRocket_1 = require("@fortawesome/free-solid-svg-icons/faRocket");
+const faRuler_1 = require("@fortawesome/free-solid-svg-icons/faRuler");
 const faSave_1 = require("@fortawesome/free-solid-svg-icons/faSave");
 const faScroll_1 = require("@fortawesome/free-solid-svg-icons/faScroll");
 const faSearch_1 = require("@fortawesome/free-solid-svg-icons/faSearch");
@@ -249,7 +250,7 @@ const status_1 = require("../../contexts/status");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 const cn = (0, utilities_1.bemHOF)("Icon");
-fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowsAlt_1.faArrowsAlt, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBalanceScale_1.faBalanceScale, faBan_1.faBan, faBandAid_1.faBandAid, faBars_1.faBars, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBell_2.faBell, faBellSlash_1.faBellSlash, faBellSlash_2.faBellSlash, faBiohazard_1.faBiohazard, faBirthdayCake_1.faBirthdayCake, faBolt_1.faBolt, faBook_1.faBook, faBroom_1.faBroom, faBug_1.faBug, faBullhorn_1.faBullhorn, faBullseye_1.faBullseye, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCamera_1.faCamera, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartBar_1.faChartBar, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faCheckSquare_1.faCheckSquare, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClipboardCheck_1.faClipboardCheck, faClock_1.faClock, faClock_2.faClock, faClone_1.faClone, faCloudDownloadAlt_1.faCloudDownloadAlt, faCloudShowersHeavy_1.faCloudShowersHeavy, faCloudUploadAlt_1.faCloudUploadAlt, faCodeBranch_1.faCodeBranch, faCog_1.faCog, faCoins_1.faCoins, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, faCompress_1.faCompress, faCompressArrowsAlt_1.faCompressArrowsAlt, faCopy_1.faCopy, faCrosshairs_1.faCrosshairs, faCrown_1.faCrown, faDoorClosed_1.faDoorClosed, faDoorOpen_1.faDoorOpen, faDownload_1.faDownload, faDungeon_1.faDungeon, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_2.faEnvelope, faEnvelope_1.faEnvelope, faEnvelopeOpenText_1.faEnvelopeOpenText, faEraser_1.faEraser, faExchangeAlt_1.faExchangeAlt, faExclamation_1.faExclamation, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExpandArrowsAlt_1.faExpandArrowsAlt, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFeatherAlt_1.faFeatherAlt, faFile_1.faFile, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileExport_1.faFileExport, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFillDrip_1.faFillDrip, faFilter_1.faFilter, faFlag_1.faFlag, faFlask_1.faFlask, faFolder_1.faFolder, faFolderOpen_1.faFolderOpen, faForward_1.faForward, faGavel_1.faGavel, faGlobeAmericas_1.faGlobeAmericas, faGlobeEurope_1.faGlobeEurope, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHandshake_1.faHandshake, faHashtag_1.faHashtag, faHeartBroken_1.faHeartBroken, faHighlighter_1.faHighlighter, faHistory_1.faHistory, faIdBadge_1.faIdBadge, faImage_1.faImage, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLaptop_1.faLaptop, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faLifeRing_1.faLifeRing, faLink_1.faLink, faListOl_1.faListOl, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapMarkerAlt_1.faMapMarkerAlt, faMapSigns_1.faMapSigns, faMeteor_1.faMeteor, faMinus_1.faMinus, faMinusCircle_1.faMinusCircle, faMoneyBill_1.faMoneyBill, faMoneyBillWave_1.faMoneyBillWave, faMoneyCheckAlt_1.faMoneyCheckAlt, faMousePointer_1.faMousePointer, faPalette_1.faPalette, faPaperclip_1.faPaperclip, faPaperPlane_1.faPaperPlane, faPaste_1.faPaste, faPause_1.faPause, faPen_1.faPen, faPencilRuler_1.faPencilRuler, faPlay_1.faPlay, faPlug_1.faPlug, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faRandom_1.faRandom, faRedo_1.faRedo, faReply_1.faReply, faRobot_1.faRobot, faRocket_1.faRocket, faSave_1.faSave, faScroll_1.faScroll, faSearch_1.faSearch, faSearchPlus_1.faSearchPlus, faSeedling_1.faSeedling, faServer_1.faServer, faShare_1.faShare, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignal_1.faSignal, faSignature_1.faSignature, faSignOutAlt_1.faSignOutAlt, faSitemap_1.faSitemap, faSkull_1.faSkull, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStamp_1.faStamp, faStar_1.faStar, faStar_2.faStar, faStopwatch_1.faStopwatch, faSuitcaseRolling_1.faSuitcaseRolling, faSync_1.faSync, faTable_1.faTable, faTag_1.faTag, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTimesCircle_2.faTimesCircle, faTools_1.faTools, faTrash_1.faTrash, faUndo_1.faUndo, faUniversalAccess_1.faUniversalAccess, faUnlink_1.faUnlink, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserClock_1.faUserClock, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faVial_1.faVial, faVideo_1.faVideo, faWrench_1.faWrench, faAward_1.faAward);
+fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowsAlt_1.faArrowsAlt, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBalanceScale_1.faBalanceScale, faBan_1.faBan, faBandAid_1.faBandAid, faBars_1.faBars, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBell_2.faBell, faBellSlash_1.faBellSlash, faBellSlash_2.faBellSlash, faBiohazard_1.faBiohazard, faBirthdayCake_1.faBirthdayCake, faBolt_1.faBolt, faBook_1.faBook, faBroom_1.faBroom, faBug_1.faBug, faBullhorn_1.faBullhorn, faBullseye_1.faBullseye, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCamera_1.faCamera, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartBar_1.faChartBar, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faCheckSquare_1.faCheckSquare, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClipboardCheck_1.faClipboardCheck, faClock_1.faClock, faClock_2.faClock, faClone_1.faClone, faCloudDownloadAlt_1.faCloudDownloadAlt, faCloudShowersHeavy_1.faCloudShowersHeavy, faCloudUploadAlt_1.faCloudUploadAlt, faCodeBranch_1.faCodeBranch, faCog_1.faCog, faCoins_1.faCoins, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, faCompress_1.faCompress, faCompressArrowsAlt_1.faCompressArrowsAlt, faCopy_1.faCopy, faCrosshairs_1.faCrosshairs, faCrown_1.faCrown, faDoorClosed_1.faDoorClosed, faDoorOpen_1.faDoorOpen, faDownload_1.faDownload, faDungeon_1.faDungeon, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_2.faEnvelope, faEnvelope_1.faEnvelope, faEnvelopeOpenText_1.faEnvelopeOpenText, faEraser_1.faEraser, faExchangeAlt_1.faExchangeAlt, faExclamation_1.faExclamation, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExpandArrowsAlt_1.faExpandArrowsAlt, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFeatherAlt_1.faFeatherAlt, faFile_1.faFile, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileExport_1.faFileExport, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFillDrip_1.faFillDrip, faFilter_1.faFilter, faFlag_1.faFlag, faFlask_1.faFlask, faFolder_1.faFolder, faFolderOpen_1.faFolderOpen, faForward_1.faForward, faGavel_1.faGavel, faGlobeAmericas_1.faGlobeAmericas, faGlobeEurope_1.faGlobeEurope, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHandshake_1.faHandshake, faHashtag_1.faHashtag, faHeartBroken_1.faHeartBroken, faHighlighter_1.faHighlighter, faHistory_1.faHistory, faIdBadge_1.faIdBadge, faImage_1.faImage, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLaptop_1.faLaptop, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faLifeRing_1.faLifeRing, faLink_1.faLink, faListOl_1.faListOl, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapMarkerAlt_1.faMapMarkerAlt, faMapSigns_1.faMapSigns, faMeteor_1.faMeteor, faMinus_1.faMinus, faMinusCircle_1.faMinusCircle, faMoneyBill_1.faMoneyBill, faMoneyBillWave_1.faMoneyBillWave, faMoneyCheckAlt_1.faMoneyCheckAlt, faMousePointer_1.faMousePointer, faPalette_1.faPalette, faPaperclip_1.faPaperclip, faPaperPlane_1.faPaperPlane, faPaste_1.faPaste, faPause_1.faPause, faPen_1.faPen, faPencilRuler_1.faPencilRuler, faPlay_1.faPlay, faPlug_1.faPlug, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faRandom_1.faRandom, faRedo_1.faRedo, faReply_1.faReply, faRobot_1.faRobot, faRocket_1.faRocket, faRuler_1.faRuler, faSave_1.faSave, faScroll_1.faScroll, faSearch_1.faSearch, faSearchPlus_1.faSearchPlus, faSeedling_1.faSeedling, faServer_1.faServer, faShare_1.faShare, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignal_1.faSignal, faSignature_1.faSignature, faSignOutAlt_1.faSignOutAlt, faSitemap_1.faSitemap, faSkull_1.faSkull, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStamp_1.faStamp, faStar_1.faStar, faStar_2.faStar, faStopwatch_1.faStopwatch, faSuitcaseRolling_1.faSuitcaseRolling, faSync_1.faSync, faTable_1.faTable, faTag_1.faTag, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTimesCircle_2.faTimesCircle, faTools_1.faTools, faTrash_1.faTrash, faUndo_1.faUndo, faUniversalAccess_1.faUniversalAccess, faUnlink_1.faUnlink, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserClock_1.faUserClock, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faVial_1.faVial, faVideo_1.faVideo, faWrench_1.faWrench, faAward_1.faAward);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
@@ -453,6 +454,7 @@ var ICON_TYPE;
     ICON_TYPE["REPLY"] = "reply";
     ICON_TYPE["ROBOT"] = "robot";
     ICON_TYPE["ROCKET"] = "rocket";
+    ICON_TYPE["RULER"] = "ruler";
     ICON_TYPE["SAVE"] = "save";
     ICON_TYPE["SCROLL"] = "scroll";
     ICON_TYPE["SEARCH"] = "search";

package/public/components/Menu/Menu.d.ts

@@ -3,4 +3,22 @@ import { MenuProps } from "../MenuRenderer";
 export declare const Menu: {
     ({ children, trigger, className, placement, ...rest }: MenuProps): React.JSX.Element;
     Item: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<import("./MenuItem").MenuItemProps>>;
+    ItemMenu: ({ referenceElement, children, placement, popperModifiers, className, }: {
+        referenceElement: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        children: React.ReactNode;
+        placement?: import("../..").PopperPlacement | undefined;
+        popperModifiers?: Record<string, unknown>[] | undefined;
+        className?: string | undefined;
+    }) => React.JSX.Element;
+    ItemMenuReference: React.ForwardRefExoticComponent<{
+        children: React.ReactNode;
+        onClick?: (() => void) | undefined;
+        isSelected?: boolean | undefined;
+        isHighlighted?: boolean | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    ItemMenuCaretIcon: ({ className, }: {
+        className?: string | undefined;
+    }) => React.JSX.Element;
 };

package/public/components/Menu/Menu.js

@@ -10,9 +10,13 @@ const bem_1 = require("../../utilities/bem");
 const MenuRenderer_1 = require("../MenuRenderer");
 const PopoverMenu_1 = require("../PopoverMenu");
 const MenuItem_1 = require("./MenuItem");
+const MenuItemMenu_1 = require("./MenuItemMenu");
 const cn = "Menu";
 const Menu = ({ children, trigger, className, placement = "bottom-start", ...rest }) => {
     return (react_1.default.createElement(MenuRenderer_1.MenuRenderer, { className: (0, classnames_1.default)((0, bem_1.bem)(cn), className), placement: placement, trigger: trigger, ...rest }, ({ listProps }) => (react_1.default.createElement(PopoverMenu_1.PopoverMenu, { className: "w-full", ...listProps }, children))));
 };
 exports.Menu = Menu;
 exports.Menu.Item = MenuItem_1.MenuItem;
+exports.Menu.ItemMenu = MenuItemMenu_1.MenuItemMenuRoot;
+exports.Menu.ItemMenuReference = MenuItemMenu_1.MenuItemMenuReference;
+exports.Menu.ItemMenuCaretIcon = MenuItemMenu_1.MenuItemMenuCaretIcon;

package/public/components/Menu/MenuItemMenu.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactElement, ReactNode } from "react";
+import { PopperPlacement } from "../../types";
+type MenuItemMenuContextType = {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+};
+export declare const useMenuItemMenuContext: () => MenuItemMenuContextType;
+export declare const MenuItemMenuCaretIcon: ({ className, }: {
+    className?: string | undefined;
+}) => React.JSX.Element;
+export declare const MenuItemMenuReference: React.ForwardRefExoticComponent<{
+    children: ReactNode;
+    onClick?: (() => void) | undefined;
+    isSelected?: boolean | undefined;
+    isHighlighted?: boolean | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuItemMenuRoot: ({ referenceElement, children, placement, popperModifiers, className, }: {
+    referenceElement: ReactElement<any>;
+    children: ReactNode;
+    placement?: PopperPlacement | undefined;
+    popperModifiers?: Record<string, unknown>[] | undefined;
+    className?: string | undefined;
+}) => React.JSX.Element;
+export {};

package/public/components/Menu/MenuItemMenu.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItemMenuRoot = exports.MenuItemMenuReference = exports.MenuItemMenuCaretIcon = exports.useMenuItemMenuContext = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Popover_1 = require("../Popover");
+const Icon_1 = require("../Icon");
+const MenuItem_1 = require("./MenuItem");
+const MenuItemMenuContext = (0, react_1.createContext)({
+    isOpen: false,
+    setIsOpen: () => undefined,
+});
+const useMenuItemMenuContext = () => {
+    return (0, react_1.useContext)(MenuItemMenuContext);
+};
+exports.useMenuItemMenuContext = useMenuItemMenuContext;
+const MenuItemMenuCaretIcon = ({ className, }) => {
+    return (react_1.default.createElement(Icon_1.Icon, { className: (0, classnames_1.default)("text-gray-600 text-h5 w-[5px] ml-auto group-hover/menu-item:text-gray-800 transition-colors", className), icon: Icon_1.ICON_TYPE.CARET_RIGHT }));
+};
+exports.MenuItemMenuCaretIcon = MenuItemMenuCaretIcon;
+exports.MenuItemMenuReference = (0, react_1.forwardRef)(({ children, onClick, isSelected = false, isHighlighted = false, disabled = false, className, }, ref) => {
+    const { setIsOpen } = (0, exports.useMenuItemMenuContext)();
+    const onMouseEnter = () => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    };
+    const onMouseLeave = () => {
+        if (!disabled) {
+            setIsOpen(false);
+        }
+    };
+    return (react_1.default.createElement(MenuItem_1.MenuItem, { ref: ref, className: (0, classnames_1.default)("group/menu-item", className), onClick: onClick, isSelected: isSelected, isHighlighted: isHighlighted, disabled: disabled, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, children));
+});
+const MenuItemMenuRoot = ({ referenceElement, children, placement = "right-start", popperModifiers = [], className, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const defaultOffsetModifier = [
+        {
+            name: "offset",
+            options: {
+                offset: [0, 0],
+            },
+        },
+    ];
+    const contextValue = (0, react_1.useMemo)(() => ({ isOpen, setIsOpen }), [
+        isOpen,
+        setIsOpen,
+    ]);
+    return (react_1.default.createElement(MenuItemMenuContext.Provider, { value: contextValue },
+        react_1.default.createElement(Popover_1.Popover, { removePadding: true, className: (0, classnames_1.default)("block !bg-transparent shadow-none rounded-none pl-2 pr-4 py-4 -mt-4", className), isVisible: isOpen, placement: placement, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), popperModifiers: [...defaultOffsetModifier, ...popperModifiers], referenceElement: referenceElement }, children)));
+};
+exports.MenuItemMenuRoot = MenuItemMenuRoot;

package/public/css/styles.css

@@ -8446,6 +8446,10 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   margin-top: 16px;
 }
 
+.-mt-4 {
+  margin-top: -16px;
+}
+
 .mb-1 {
   margin-bottom: 4px;
 }
@@ -8570,6 +8574,10 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   width: 50%;
 }
 
+.w-\[5px\] {
+  width: 5px;
+}
+
 .w-56 {
   width: 224px;
 }
@@ -8685,6 +8693,10 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   border-radius: 4px;
 }
 
+.rounded-none {
+  border-radius: 0;
+}
+
 .rounded-md {
   border-radius: 3px;
 }
@@ -8789,6 +8801,10 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   background-color: rgba(0, 0, 0, 0.25);
 }
 
+.\!bg-transparent {
+  background-color: transparent !important;
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -8831,6 +8847,11 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   padding-right: 8px;
 }
 
+.py-4 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
 .px-3 {
   padding-left: 12px;
   padding-right: 12px;
@@ -8846,15 +8867,18 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   padding-bottom: 12px;
 }
 
-.py-4 {
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
-
 .pt-2 {
   padding-top: 8px;
 }
 
+.pl-2 {
+  padding-left: 8px;
+}
+
+.pr-4 {
+  padding-right: 16px;
+}
+
 .pt-3 {
   padding-top: 12px;
 }
@@ -9035,6 +9059,12 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-none {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-up {
   --tw-shadow: 0 -2px 4px 0 rgba(32, 65, 86, 0.10);
   --tw-shadow-colored: 0 -2px 4px 0 var(--tw-shadow-color);
@@ -9057,6 +9087,14 @@ button.ads-DateRangePicker-preset--isSelected:hover {
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.transition-colors {
+  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition {
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;