analytica-frontend-lib/dist/BreadcrumbMenu/index.js

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/BreadcrumbMenu/BreadcrumbMenu.tsx
var BreadcrumbMenu_exports = {};
__export(BreadcrumbMenu_exports, {
  BreadcrumbMenu: () => BreadcrumbMenu
});
module.exports = __toCommonJS(BreadcrumbMenu_exports);

// src/components/Menu/Menu.tsx
var import_zustand = require("zustand");
var import_react = require("react");
var import_phosphor_react = require("phosphor-react");

// src/utils/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}

// src/components/Menu/Menu.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var createMenuStore = (onValueChange) => (0, import_zustand.create)((set) => ({
  value: "",
  setValue: (value) => {
    set({ value });
    onValueChange?.(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": "",
  breadcrumb: "bg-transparent shadow-none !px-0"
};
var Menu = (0, import_react.forwardRef)(
  ({
    className,
    children,
    defaultValue,
    value: propValue,
    variant = "menu",
    onValueChange,
    ...props
  }, ref) => {
    const storeRef = (0, import_react.useRef)(null);
    storeRef.current ??= createMenuStore(onValueChange);
    const store = storeRef.current;
    const { setValue } = (0, import_zustand.useStore)(store, (s) => s);
    (0, import_react.useEffect)(() => {
      setValue(propValue ?? defaultValue);
    }, [defaultValue, propValue, setValue]);
    const baseClasses = variant === "menu-overflow" ? "w-fit py-2 flex flex-row items-center justify-center" : "w-full py-2 flex flex-row items-center justify-center";
    const variantClasses = VARIANT_CLASSES[variant];
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      "div",
      {
        ref,
        className: `
          ${baseClasses}
          ${variantClasses}
          ${className ?? ""}
        `,
        ...props,
        children: injectStore(children, store)
      }
    );
  }
);
Menu.displayName = "Menu";
var MenuContent = (0, import_react.forwardRef)(
  ({ className, children, variant = "menu", ...props }, ref) => {
    const baseClasses = "w-full flex flex-row items-center gap-2";
    const variantClasses = variant === "menu2" || variant === "menu-overflow" ? "overflow-x-auto scroll-smooth" : "";
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      "ul",
      {
        ref,
        className: `
          ${baseClasses}
          ${variantClasses}
          ${variant == "breadcrumb" ? "flex-wrap" : ""}
          ${className ?? ""}
        `,
        style: variant === "menu2" || variant === "menu-overflow" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
        ...props,
        children
      }
    );
  }
);
MenuContent.displayName = "MenuContent";
var MenuItem = (0, import_react.forwardRef)(
  ({
    className,
    children,
    value,
    disabled = false,
    store: externalStore,
    variant = "menu",
    separator = false,
    ...props
  }, ref) => {
    const store = useMenuStore(externalStore);
    const { value: selectedValue, setValue } = (0, import_zustand.useStore)(store, (s) => s);
    const handleClick = (e) => {
      if (!disabled) {
        setValue(value);
      }
      props.onClick?.(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__ */ (0, import_jsx_runtime.jsx)(
        "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"}
            ${className ?? ""}
          `,
          ...commonProps,
          children
        }
      ),
      menu2: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
        "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__ */ (0, import_jsx_runtime.jsx)(
              "span",
              {
                className: cn(
                  "flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold",
                  className
                ),
                children
              }
            ),
            selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
          ]
        }
      ),
      "menu-overflow": /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
        "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__ */ (0, import_jsx_runtime.jsx)(
              "span",
              {
                className: cn(
                  "flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold",
                  className
                ),
                children
              }
            ),
            selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
          ]
        }
      ),
      breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
        "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"}
            ${className ?? ""}
          `,
          ...commonProps,
          children: [
            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              "span",
              {
                className: cn(
                  "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__ */ (0, import_jsx_runtime.jsx)(
              import_phosphor_react.CaretRight,
              {
                size: 16,
                className: "text-text-600",
                "data-testid": "separator"
              }
            )
          ]
        }
      )
    };
    return variants[variant] ?? variants["menu"];
  }
);
MenuItem.displayName = "MenuItem";
var injectStore = (children, store) => import_react.Children.map(children, (child) => {
  if (!(0, import_react.isValidElement)(child)) return child;
  const typedChild = child;
  const shouldInject = typedChild.type === MenuItem;
  return (0, import_react.cloneElement)(typedChild, {
    ...shouldInject ? { store } : {},
    ...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
  });
});

// src/components/BreadcrumbMenu/BreadcrumbMenu.tsx
var import_react_router_dom = require("react-router-dom");
var import_jsx_runtime2 = require("react/jsx-runtime");
var BreadcrumbMenu = ({
  breadcrumbs,
  onBreadcrumbClick,
  className = "!px-0 py-4 flex-wrap w-full"
}) => {
  const navigate = (0, import_react_router_dom.useNavigate)();
  const handleClick = (breadcrumb, index) => {
    if (onBreadcrumbClick) {
      onBreadcrumbClick(breadcrumb, index);
    }
    navigate(breadcrumb.url);
  };
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    Menu,
    {
      value: `breadcrumb-${breadcrumbs.length - 1}`,
      defaultValue: "breadcrumb-0",
      variant: "breadcrumb",
      className,
      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuContent, { className: "w-full flex flex-row flex-wrap gap-2 !px-0", children: breadcrumbs.map((breadcrumb, index) => {
        const isLast = index === breadcrumbs.length - 1;
        const hasSeparator = !isLast;
        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
          MenuItem,
          {
            variant: "breadcrumb",
            value: `breadcrumb-${index}`,
            className: "!p-0 whitespace-nowrap",
            onClick: () => handleClick(breadcrumb, index),
            separator: hasSeparator,
            children: breadcrumb.name
          },
          breadcrumb.id
        );
      }) })
    }
  );
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  BreadcrumbMenu
});
//# sourceMappingURL=index.js.map