@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
248 lines • 19.5 kB
JavaScript
"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 () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActionMenuSubContent = exports.ActionMenuSubTrigger = exports.ActionMenuSub = exports.ActionMenuDivider = exports.ActionMenuRadioItem = exports.ActionMenuRadioGroup = exports.ActionMenuCheckboxItem = exports.ActionMenuItem = exports.ActionMenuGroup = exports.ActionMenuLabel = exports.ActionMenuContent = exports.ActionMenuTrigger = exports.ActionMenu = void 0;
const react_1 = __importStar(require("react"));
const aksel_icons_1 = require("@navikt/aksel-icons");
const Modal_context_1 = require("../../modal/Modal.context");
const Slot_1 = require("../../slot/Slot");
const Theme_1 = require("../../theme/Theme");
const util_1 = require("../../util");
const composeEventHandlers_1 = require("../../util/composeEventHandlers");
const create_context_1 = require("../../util/create-context");
const hooks_1 = require("../../util/hooks");
const useControllableState_1 = require("../../util/hooks/useControllableState");
const requireReactElement_1 = require("../../util/requireReactElement");
const Menu_1 = require("../floating-menu/Menu");
const [ActionMenuProvider, useActionMenuContext] = (0, create_context_1.createContext)({
name: "ActionMenuContext",
errorMessage: "ActionMenu sub-components cannot be rendered outside the ActionMenu component.",
});
const ActionMenuRoot = ({ children, open: openProp, onOpenChange, rootElement: rootElementProp, }) => {
const triggerRef = (0, react_1.useRef)(null);
const modalContext = (0, Modal_context_1.useModalContext)(false);
const rootElement = modalContext ? modalContext.ref.current : rootElementProp;
const [open = false, setOpen] = (0, useControllableState_1.useControllableState)({
value: openProp,
defaultValue: false,
onChange: onOpenChange,
});
return (react_1.default.createElement(ActionMenuProvider, { triggerId: (0, util_1.useId)(), triggerRef: triggerRef, contentId: (0, util_1.useId)(), open: open, onOpenChange: setOpen, onOpenToggle: () => setOpen((prevOpen) => !prevOpen), rootElement: rootElement },
react_1.default.createElement(Menu_1.Menu, { open: open, onOpenChange: setOpen, modal: true }, children)));
};
exports.ActionMenu = ActionMenuRoot;
exports.ActionMenuTrigger = (0, react_1.forwardRef)((_a, ref) => {
var { children, onKeyDown, style, onClick } = _a, rest = __rest(_a, ["children", "onKeyDown", "style", "onClick"]);
const context = useActionMenuContext();
const mergedRefs = (0, hooks_1.useMergeRefs)(ref, context.triggerRef);
return (react_1.default.createElement(Menu_1.Menu.Anchor, { asChild: true },
react_1.default.createElement(Slot_1.Slot, Object.assign({ type: "button", id: context.triggerId, "aria-haspopup": "menu", "aria-expanded": context.open, "aria-controls": context.open ? context.contentId : undefined, "data-state": context.open ? "open" : "closed", ref: mergedRefs }, rest, { style: Object.assign(Object.assign({}, style), { pointerEvents: context.open ? "auto" : undefined }), onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, context.onOpenToggle), onKeyDown: (0, composeEventHandlers_1.composeEventHandlers)(onKeyDown, (event) => {
if (event.key === "ArrowDown") {
context.onOpenChange(true);
/* Stop keydown from scrolling window */
event.preventDefault();
}
}) }), (0, requireReactElement_1.requireReactElement)(children))));
});
exports.ActionMenuContent = (0, react_1.forwardRef)((_a, ref) => {
var { children, className, style, align = "start" } = _a, rest = __rest(_a, ["children", "className", "style", "align"]);
const context = useActionMenuContext();
const { cn } = (0, Theme_1.useRenameCSS)();
return (react_1.default.createElement(Menu_1.Menu.Portal, { rootElement: context.rootElement, asChild: true },
react_1.default.createElement(Menu_1.Menu.Content, Object.assign({ ref: ref, id: context.contentId, "aria-labelledby": context.triggerId, className: cn("navds-action-menu__content", className) }, rest, { align: align, sideOffset: 4, collisionPadding: 10, onCloseAutoFocus: () => {
var _a;
(_a = context.triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, safeZone: { anchor: context.triggerRef.current }, style: Object.assign(Object.assign({}, style), {
"--__ac-action-menu-content-transform-origin": "var(--ac-floating-transform-origin)",
"--__ac-action-menu-content-available-height": "var(--ac-floating-available-height)",
}) }),
react_1.default.createElement("div", { className: cn("navds-action-menu__content-inner") }, children))));
});
exports.ActionMenuLabel = (0, react_1.forwardRef)((_a, ref) => {
var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
const { cn } = (0, Theme_1.useRenameCSS)();
return (react_1.default.createElement("div", Object.assign({ ref: ref }, rest, { className: cn("navds-action-menu__label", className) }), children));
});
exports.ActionMenuGroup = (0, react_1.forwardRef)((_a, ref) => {
var { children, className, label } = _a, rest = __rest(_a, ["children", "className", "label"]);
const labelId = (0, util_1.useId)();
const { cn } = (0, Theme_1.useRenameCSS)();
return (react_1.default.createElement(Menu_1.Menu.Group, Object.assign({ ref: ref }, rest, { className: cn("navds-action-menu__group", className), asChild: false, "aria-labelledby": label ? labelId : undefined }),
label && (react_1.default.createElement(exports.ActionMenu.Label, { id: labelId, "aria-hidden": true }, label)),
children));
});
const Marker = ({ children, className, placement }) => {
const { cn } = (0, Theme_1.useRenameCSS)();
return (react_1.default.createElement("div", { "aria-hidden": true, className: cn(className, "navds-action-menu__marker", `navds-action-menu__marker--${placement}`) }, children));
};
const Shortcut = ({ children }) => {
const { cn } = (0, Theme_1.useRenameCSS)();
/**
* Assumes the user will input either a single keyboard key
* or keys separated by "+"
*/
const parsed = children.split("+").filter((str) => str !== "");
return (react_1.default.createElement(Marker, { placement: "right" }, parsed.map((char, index) => (react_1.default.createElement("span", { key: char + index, className: cn("navds-action-menu__shortcut") }, char)))));
};
exports.ActionMenuItem = (0, react_1.forwardRef)((_a, ref) => {
var { children, as: Component = "div", className, icon, shortcut, variant } = _a, rest = __rest(_a, ["children", "as", "className", "icon", "shortcut", "variant"]);
const { cn } = (0, Theme_1.useRenameCSS)();
return (react_1.default.createElement(Menu_1.Menu.Item, Object.assign({}, rest, { className: cn("navds-action-menu__item", className, {
"navds-action-menu__item--danger": variant === "danger",
"navds-action-menu__item--has-icon": icon,
}), "aria-keyshortcuts": shortcut !== null && shortcut !== void 0 ? shortcut : undefined, asChild: true }),
react_1.default.createElement(Component, { ref: ref },
children,
icon && (react_1.default.createElement(Marker, { placement: "left", className: cn("navds-action-menu__marker-icon") }, icon)),
shortcut && react_1.default.createElement(Shortcut, null, shortcut))));
});
exports.ActionMenuCheckboxItem = (0, react_1.forwardRef)((_a, ref) => {
var { children, className, shortcut, onSelect } = _a, rest = __rest(_a, ["children", "className", "shortcut", "onSelect"]);
const { cn } = (0, Theme_1.useRenameCSS)();
return (react_1.default.createElement(Menu_1.Menu.CheckboxItem, Object.assign({ ref: ref }, rest, { onSelect: (0, composeEventHandlers_1.composeEventHandlers)(onSelect, (event) => {
/**
* Prevent default to avoid the menu from closing when clicking the checkbox
*/
event.preventDefault();
}), asChild: false, className: cn("navds-action-menu__item navds-action-menu__item--has-icon", className), "aria-keyshortcuts": shortcut }),
children,
react_1.default.createElement(Marker, { placement: "left" },
react_1.default.createElement(Menu_1.Menu.ItemIndicator, { className: cn("navds-action-menu__indicator") },
react_1.default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("navds-action-menu__indicator-icon"), "aria-hidden": true },
react_1.default.createElement("g", { className: cn("navds-action-menu__indicator-icon--unchecked") },
react_1.default.createElement("rect", { width: "24", height: "24", rx: "4", fill: "var(--ax-border-neutral, var(--a-border-default))" }),
react_1.default.createElement("rect", { x: "1", y: "1", width: "22", height: "22", rx: "3", fill: "var(--ax-bg-default, var(--a-surface-default))", strokeWidth: "2" })),
react_1.default.createElement("g", { className: cn("navds-action-menu__indicator-icon--indeterminate") },
react_1.default.createElement("rect", { width: "24", height: "24", rx: "4", fill: "var(--ax-bg-strong-pressed, var(--a-surface-action-selected))" }),
react_1.default.createElement("rect", { x: "6", y: "10", width: "12", height: "4", rx: "1", fill: "var(--ax-bg-default, var(--a-surface-default))" })),
react_1.default.createElement("g", { className: cn("navds-action-menu__indicator-icon--checked") },
react_1.default.createElement("rect", { width: "24", height: "24", rx: "4", fill: "var(--ax-bg-strong-pressed, var(--a-surface-action-selected))" }),
react_1.default.createElement("path", { d: "M10.0352 13.4148L16.4752 7.40467C17.0792 6.83965 18.029 6.86933 18.5955 7.47478C19.162 8.08027 19.1296 9.03007 18.5245 9.59621L11.0211 16.5993C10.741 16.859 10.3756 17 10.0002 17C9.60651 17 9.22717 16.8462 8.93914 16.5611L6.43914 14.0611C5.85362 13.4756 5.85362 12.5254 6.43914 11.9399C7.02467 11.3544 7.97483 11.3544 8.56036 11.9399L10.0352 13.4148Z", fill: "var(--ax-bg-default, var(--a-surface-default))" }))))),
shortcut && react_1.default.createElement(Shortcut, null, shortcut)));
});
exports.ActionMenuRadioGroup = (0, react_1.forwardRef)((_a, ref) => {
var { children, label } = _a, rest = __rest(_a, ["children", "label"]);
const labelId = (0, util_1.useId)();
return (react_1.default.createElement(Menu_1.Menu.RadioGroup, Object.assign({ ref: ref }, rest, { asChild: false, "aria-labelledby": label ? labelId : undefined }),
label && (react_1.default.createElement(exports.ActionMenu.Label, { id: labelId, "aria-hidden": true }, label)),
children));
});
exports.ActionMenuRadioItem = (0, react_1.forwardRef)((_a, ref) => {
var { children, className, onSelect } = _a, rest = __rest(_a, ["children", "className", "onSelect"]);
const { cn } = (0, Theme_1.useRenameCSS)();
const themeContext = (0, Theme_1.useThemeInternal)(false);
return (react_1.default.createElement(Menu_1.Menu.RadioItem, Object.assign({ ref: ref }, rest, { onSelect: (0, composeEventHandlers_1.composeEventHandlers)(onSelect, (event) => {
/**
* Prevent default to avoid the menu from closing when clicking the radio
*/
event.preventDefault();
}), asChild: false, className: cn("navds-action-menu__item navds-action-menu__item--has-icon", className) }),
children,
react_1.default.createElement(Marker, { placement: "left" },
react_1.default.createElement(Menu_1.Menu.ItemIndicator, { className: cn("navds-action-menu__indicator") },
react_1.default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("navds-action-menu__indicator-icon"), "aria-hidden": true },
react_1.default.createElement("g", { className: cn("navds-action-menu__indicator-icon--unchecked") },
react_1.default.createElement("rect", { width: "24", height: "24", rx: "12", fill: "var(--ax-border-neutral, var(--a-border-default))" }),
react_1.default.createElement("rect", { x: "1", y: "1", width: "22", height: "22", rx: "11", strokeWidth: "2", fill: "var(--ax-bg-default, var(--a-surface-default))" })),
(themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) ? (react_1.default.createElement("g", { className: cn("navds-action-menu__indicator-icon--checked") },
react_1.default.createElement("rect", { width: "24", height: "24", rx: "12", fill: "var(--ax-bg-strong-pressed)" }),
react_1.default.createElement("rect", { x: "8", y: "8", width: "8", height: "8", rx: "4", fill: "var(--ax-bg-default, var(--a-surface-default))" }))) : (react_1.default.createElement("g", { className: cn("navds-action-menu__indicator-icon--checked") },
react_1.default.createElement("rect", { x: "1", y: "1", width: "22", height: "22", rx: "11", fill: "var(--ax-bg-default, var(--a-surface-default))" }),
react_1.default.createElement("rect", { x: "1", y: "1", width: "22", height: "22", rx: "11", stroke: "var(--ax-bg-strong-pressed, var(--a-surface-action-selected))", strokeWidth: "2" }),
react_1.default.createElement("path", { d: "M20 12C20 16.4178 16.4178 20 12 20C7.58222 20 4 16.4178 4 12C4 7.58222 7.58222 4 12 4C16.4178 4 20 7.58222 20 12Z", fill: "var(--ax-bg-strong-pressed, var(--a-surface-action-selected))" }))))))));
});
exports.ActionMenuDivider = (0, react_1.forwardRef)((_a, ref) => {
var { className } = _a, rest = __rest(_a, ["className"]);
const { cn } = (0, Theme_1.useRenameCSS)();
return (react_1.default.createElement(Menu_1.Menu.Divider, Object.assign({ ref: ref, asChild: false }, rest, { className: cn("navds-action-menu__divider", className) })));
});
const ActionMenuSub = (props) => {
const { children, open: openProp, onOpenChange } = props;
const [open = false, setOpen] = (0, useControllableState_1.useControllableState)({
value: openProp,
defaultValue: false,
onChange: onOpenChange,
});
return (react_1.default.createElement(Menu_1.Menu.Sub, { open: open, onOpenChange: setOpen }, children));
};
exports.ActionMenuSub = ActionMenuSub;
exports.ActionMenuSubTrigger = (0, react_1.forwardRef)((_a, ref) => {
var { children, className, icon } = _a, rest = __rest(_a, ["children", "className", "icon"]);
const { cn } = (0, Theme_1.useRenameCSS)();
return (react_1.default.createElement(Menu_1.Menu.SubTrigger, Object.assign({ ref: ref }, rest, { asChild: false, className: cn("navds-action-menu__item navds-action-menu__sub-trigger", className, { "navds-action-menu__item--has-icon": icon }) }),
children,
icon && (react_1.default.createElement(Marker, { placement: "left", className: cn("navds-action-menu__marker-icon") }, icon)),
react_1.default.createElement(Marker, { placement: "right", className: cn("navds-action-menu__marker-icon") },
react_1.default.createElement(aksel_icons_1.ChevronRightIcon, { "aria-hidden": true }))));
});
exports.ActionMenuSubContent = (0, react_1.forwardRef)((_a, ref) => {
var { children, className, style } = _a, rest = __rest(_a, ["children", "className", "style"]);
const { cn } = (0, Theme_1.useRenameCSS)();
const context = useActionMenuContext();
return (react_1.default.createElement(Menu_1.Menu.Portal, { rootElement: context.rootElement },
react_1.default.createElement(Menu_1.Menu.SubContent, Object.assign({ ref: ref, alignOffset: -4, sideOffset: 1, collisionPadding: 10 }, rest, { className: cn("navds-action-menu__content navds-action-menu__sub-content", className), style: Object.assign(Object.assign({}, style), {
"--ac-action-menu-content-transform-origin": "var(--ac-floating-transform-origin)",
"--ac-action-menu-content-available-width": "var(--ac-floating-available-width)",
"--ac-action-menu-content-available-height": "var(--ac-floating-available-height)",
"--ac-action-menu-trigger-width": "var(--ac-floating-anchor-width)",
"--ac-action-menu-trigger-height": "var(--ac-floating-anchor-height)",
}) }),
react_1.default.createElement("div", { className: cn("navds-action-menu__content-inner") }, children))));
});
/* -------------------------------------------------------------------------- */
exports.ActionMenu.Trigger = exports.ActionMenuTrigger;
exports.ActionMenu.Content = exports.ActionMenuContent;
exports.ActionMenu.Group = exports.ActionMenuGroup;
exports.ActionMenu.Label = exports.ActionMenuLabel;
exports.ActionMenu.Item = exports.ActionMenuItem;
exports.ActionMenu.CheckboxItem = exports.ActionMenuCheckboxItem;
exports.ActionMenu.RadioGroup = exports.ActionMenuRadioGroup;
exports.ActionMenu.RadioItem = exports.ActionMenuRadioItem;
exports.ActionMenu.Divider = exports.ActionMenuDivider;
exports.ActionMenu.Sub = exports.ActionMenuSub;
exports.ActionMenu.SubTrigger = exports.ActionMenuSubTrigger;
exports.ActionMenu.SubContent = exports.ActionMenuSubContent;
//# sourceMappingURL=ActionMenu.js.map