analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
381 lines (360 loc) • 14.4 kB
JavaScript
;Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
var _chunkTN3AYOMVjs = require('./chunk-TN3AYOMV.js');
// src/components/Menu/Menu.tsx
var _zustand = require('zustand');
var _react = require('react');
var _CaretLeft = require('@phosphor-icons/react/dist/csr/CaretLeft');
var _CaretRight = require('@phosphor-icons/react/dist/csr/CaretRight');
var _jsxruntime = require('react/jsx-runtime');
var createMenuStore = (onValueChange) => _zustand.create.call(void 0, (set) => ({
value: "",
setValue: (value) => {
set({ value });
_optionalChain([onValueChange, 'optionalCall', _ => _(value)]);
},
syncValue: (value) => set((state) => state.value === value ? state : { value }),
onValueChange
}));
var useMenuStore = (externalStore) => {
if (!externalStore) throw new Error("MenuItem must be inside Menu");
return externalStore;
};
var VARIANT_CLASSES = {
menu: "bg-background shadow-soft-shadow-1 px-6",
menu2: "",
"menu-overflow": "",
"menu-overflow-col": "bg-background shadow-soft-shadow-1",
breadcrumb: "bg-transparent shadow-none !px-0"
};
var BASE_CLASSES_BY_VARIANT = {
menu: "w-full py-2 flex flex-row items-center justify-center",
menu2: "w-full py-2 flex flex-row items-center justify-center",
"menu-overflow": "w-fit py-2 flex flex-row items-center justify-center",
"menu-overflow-col": "w-full py-2 flex flex-row items-center justify-start",
breadcrumb: "w-full py-2 flex flex-row items-center justify-center"
};
var Menu = _react.forwardRef.call(void 0,
({
className,
children,
defaultValue,
value: propValue,
variant = "menu",
onValueChange,
...props
}, ref) => {
const storeRef = _react.useRef.call(void 0, null);
storeRef.current ??= createMenuStore(onValueChange);
const store = storeRef.current;
const { syncValue } = _zustand.useStore.call(void 0, store, (s) => s);
_react.useEffect.call(void 0, () => {
syncValue(_nullishCoalesce(propValue, () => ( defaultValue)));
}, [defaultValue, propValue, syncValue]);
const baseClasses = BASE_CLASSES_BY_VARIANT[variant];
const variantClasses = VARIANT_CLASSES[variant];
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
ref,
className: `
${baseClasses}
${variantClasses}
${_nullishCoalesce(className, () => ( ""))}
`,
...props,
children: injectStore(children, store)
}
);
}
);
Menu.displayName = "Menu";
var MenuContent = _react.forwardRef.call(void 0,
({ className, children, variant = "menu", ...props }, ref) => {
const baseClasses = "w-full flex flex-row items-center gap-2";
const isOverflowVariant = variant === "menu2" || variant === "menu-overflow" || variant === "menu-overflow-col";
const variantClasses = isOverflowVariant ? "overflow-x-auto scroll-smooth" : "";
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"ul",
{
ref,
className: `
${baseClasses}
${variantClasses}
${variant == "breadcrumb" ? "flex-wrap" : ""}
${_nullishCoalesce(className, () => ( ""))}
`,
style: isOverflowVariant ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
...props,
children
}
);
}
);
MenuContent.displayName = "MenuContent";
var MenuItem = _react.forwardRef.call(void 0,
({
className,
children,
value,
disabled = false,
store: externalStore,
variant = "menu",
separator = false,
...props
}, ref) => {
const store = useMenuStore(externalStore);
const { value: selectedValue, setValue } = _zustand.useStore.call(void 0, store, (s) => s);
const handleClick = (e) => {
if (!disabled) {
setValue(value);
}
_optionalChain([props, 'access', _2 => _2.onClick, 'optionalCall', _3 => _3(e)]);
};
const commonProps = {
role: "menuitem",
"aria-disabled": disabled,
ref,
onClick: handleClick,
onKeyDown: (e) => {
if (["Enter", " "].includes(e.key)) handleClick(e);
},
tabIndex: disabled ? -1 : 0,
onMouseDown: (e) => {
e.preventDefault();
},
...props
};
const variants = {
menu: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"li",
{
"data-variant": "menu",
className: `
w-full flex flex-col items-center justify-center gap-0.5 py-1 px-2 rounded-sm font-medium text-xs
[&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text
focus:outline-none focus:border-indicator-info focus:border-2
${selectedValue === value ? "bg-primary-50 text-primary-950" : "text-text-950"}
${_nullishCoalesce(className, () => ( ""))}
`,
...commonProps,
children
}
),
menu2: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"li",
{
"data-variant": "menu2",
className: `
w-full flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg
focus:outline-none focus:border-indicator-info focus:border-2
${selectedValue === value ? "" : "pb-4"}
`,
...commonProps,
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"span",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold",
className
),
children
}
),
selectedValue === value && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
]
}
),
"menu-overflow": /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"li",
{
"data-variant": "menu-overflow",
className: `
w-fit flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg
focus:outline-none focus:border-indicator-info focus:border-2
${selectedValue === value ? "" : "pb-4"}
`,
...commonProps,
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"span",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold",
className
),
children
}
),
selectedValue === value && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
]
}
),
"menu-overflow-col": /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"li",
{
"data-variant": "menu-overflow-col",
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex-1 min-w-fit flex flex-col items-center justify-center gap-0.5 py-1 px-2 rounded-sm font-medium text-xs whitespace-nowrap [&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text focus:outline-none focus:border-indicator-info focus:border-2",
selectedValue === value ? "bg-primary-50 text-primary-950" : "text-text-950",
className
),
...commonProps,
children
}
),
breadcrumb: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"li",
{
"data-variant": "breadcrumb",
className: `
flex flex-row gap-2 items-center w-fit p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs
focus:outline-none focus:border-indicator-info focus:border-2
${selectedValue === value ? "text-text-950" : "text-text-600"}
${_nullishCoalesce(className, () => ( ""))}
`,
...commonProps,
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"span",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"border-b border-text-600 hover:border-primary-600 text-inherit text-xs",
selectedValue === value ? "border-b-0 font-bold" : "border-b-text-600"
),
children
}
),
separator && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_CaretRight.CaretRightIcon,
{
size: 16,
className: "text-text-600",
"data-testid": "separator"
}
)
]
}
)
};
return _nullishCoalesce(variants[variant], () => ( variants["menu"]));
}
);
MenuItem.displayName = "MenuItem";
var MenuItemIcon = ({
className,
icon,
...props
}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"span",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"bg-background-500 w-[21px] h-[21px] flex items-center justify-center [&>svg]:w-[17px] [&>svg]:h-[17px] rounded-sm",
className
),
...props,
children: icon
}
);
var internalScroll = (container, direction) => {
if (!container) return;
container.scrollBy({
left: direction === "left" ? -150 : 150,
behavior: "smooth"
});
};
var internalCheckScroll = (container, setShowLeftArrow, setShowRightArrow) => {
if (!container) return;
const { scrollLeft, scrollWidth, clientWidth } = container;
setShowLeftArrow(scrollLeft > 0);
setShowRightArrow(scrollLeft + clientWidth < scrollWidth);
};
var MenuOverflow = ({
children,
className,
defaultValue,
value,
onValueChange,
...props
}) => {
const containerRef = _react.useRef.call(void 0, null);
const [showLeftArrow, setShowLeftArrow] = _react.useState.call(void 0, false);
const [showRightArrow, setShowRightArrow] = _react.useState.call(void 0, false);
_react.useEffect.call(void 0, () => {
const checkScroll = () => internalCheckScroll(
containerRef.current,
setShowLeftArrow,
setShowRightArrow
);
checkScroll();
const container = containerRef.current;
_optionalChain([container, 'optionalAccess', _4 => _4.addEventListener, 'call', _5 => _5("scroll", checkScroll)]);
window.addEventListener("resize", checkScroll);
let mutationObserver = null;
if (container) {
mutationObserver = new MutationObserver(checkScroll);
mutationObserver.observe(container, { childList: true, subtree: true });
}
return () => {
_optionalChain([container, 'optionalAccess', _6 => _6.removeEventListener, 'call', _7 => _7("scroll", checkScroll)]);
window.removeEventListener("resize", checkScroll);
_optionalChain([mutationObserver, 'optionalAccess', _8 => _8.disconnect, 'call', _9 => _9()]);
};
}, []);
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
"data-testid": "menu-overflow-wrapper",
className: _chunkTN3AYOMVjs.cn.call(void 0, "relative w-full overflow-hidden", className),
children: [
showLeftArrow && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"button",
{
onClick: () => internalScroll(containerRef.current, "left"),
className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
"data-testid": "scroll-left-button",
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CaretLeft.CaretLeftIcon, { size: 16 }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Scroll left" })
]
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
Menu,
{
defaultValue,
onValueChange,
value,
variant: "menu2",
...props,
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuContent, { ref: containerRef, variant: "menu2", children })
}
),
showRightArrow && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"button",
{
onClick: () => internalScroll(containerRef.current, "right"),
className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
"data-testid": "scroll-right-button",
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CaretRight.CaretRightIcon, { size: 16 }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Scroll right" })
]
}
)
]
}
);
};
var injectStore = (children, store) => _react.Children.map(children, (child) => {
if (!_react.isValidElement.call(void 0, child)) return child;
const typedChild = child;
const shouldInject = typedChild.type === MenuItem;
return _react.cloneElement.call(void 0, typedChild, {
...shouldInject ? { store } : {},
...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
});
});
var Menu_default = Menu;
exports.useMenuStore = useMenuStore; exports.Menu = Menu; exports.MenuContent = MenuContent; exports.MenuItem = MenuItem; exports.MenuItemIcon = MenuItemIcon; exports.internalScroll = internalScroll; exports.internalCheckScroll = internalCheckScroll; exports.MenuOverflow = MenuOverflow; exports.Menu_default = Menu_default;
//# sourceMappingURL=chunk-MPQZUD42.js.map