@octopusdeploy/design-system-components/dist/src/components/MenuItems/MenuItemToggle/MenuItemToggle.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuItemToggle = MenuItemToggle;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
const MenuItemButton_1 = require("../MenuItemButton/MenuItemButton");
const DeprecatedSwitch_1 = require("./DeprecatedSwitch");
function MenuItemToggle({ setIsEnabled, isEnabled, label, autoFocus, compact }) {
    const toggleIsEnabled = (0, react_1.useCallback)(() => setIsEnabled(!isEnabled), [isEnabled, setIsEnabled]);
    // TODO: This should be role="menuitemcheckbox"
    return ((0, jsx_runtime_1.jsx)(MenuItemButton_1.MenuItemButton, { onClick: toggleIsEnabled, autoFocus: autoFocus, compact: compact, children: (0, jsx_runtime_1.jsxs)("div", { className: containerStyles, children: [(0, jsx_runtime_1.jsx)("div", { className: labelStyles, children: label }), (0, jsx_runtime_1.jsx)(DeprecatedSwitch_1.DeprecatedSwitch, { size: "small", value: isEnabled })] }) }));
}
MenuItemToggle.displayName = "MenuItemToggle";
const containerStyles = (0, css_1.css)({
    width: "100%",
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    gap: design_system_tokens_1.space[8],
});
const labelStyles = (0, css_1.css)({
    display: "flex",
    alignItems: "center",
});