@theguild/components 8.1.0 → 8.2.0-alpha-20241216161831-bea3b73cdd26b75e8efa9f75f181dd8b1ad6f2e5

package/dist/components/dropdown.d.mts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface DropdownProps extends React.ComponentPropsWithoutRef<'div'> {
+    children: React.ReactNode;
+}
+declare function Dropdown({ children, className, ...props }: DropdownProps): react_jsx_runtime.JSX.Element;
+interface DropdownTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
+    children: React.ReactNode;
+}
+declare function DropdownTrigger({ children, className, ...props }: DropdownTriggerProps): react_jsx_runtime.JSX.Element;
+interface DropdownContentProps extends React.ComponentPropsWithoutRef<'div'> {
+    children: React.ReactNode;
+}
+declare function DropdownContent({ children, className, ...props }: DropdownContentProps): react_jsx_runtime.JSX.Element;
+interface DropdownItemProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    onClick?: () => void;
+    href?: string;
+}
+declare function DropdownItem({ children, onClick, className, href, ...props }: DropdownItemProps): react_jsx_runtime.JSX.Element;
+
+export { Dropdown, DropdownContent, DropdownItem, DropdownTrigger };

package/dist/components/dropdown.js

@@ -0,0 +1,141 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
+import { cn } from "../cn";
+const DropdownContext = createContext(null);
+function useDropdownContext() {
+  const context = useContext(DropdownContext);
+  if (!context) {
+    throw new Error("Dropdown components must be used within a Dropdown");
+  }
+  return context;
+}
+function Dropdown({ children, className, ...props }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const buttonId = useId();
+  const menuId = useId();
+  const menuRef = useRef(null);
+  const buttonRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (!menuRef.current?.contains(event.target) && !buttonRef.current?.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+        buttonRef.current?.focus();
+      }
+    };
+    const handleFocusElsewhere = (event) => {
+      if (!menuRef.current?.contains(event.target) && !buttonRef.current?.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+      document.addEventListener("focus", handleFocusElsewhere);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("focus", handleFocusElsewhere);
+    };
+  }, [isOpen]);
+  const dismissDelayMs = 200;
+  const isHoveringRef = useRef(isHovering);
+  isHoveringRef.current = isHovering;
+  return /* @__PURE__ */ jsx(
+    DropdownContext.Provider,
+    {
+      value: { isOpen, setIsOpen, isHovering, setIsHovering, buttonId, menuId, buttonRef, menuRef },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("relative", className),
+          onPointerEnter: () => {
+            setIsOpen(true);
+            setIsHovering(true);
+          },
+          onPointerLeave: () => {
+            if (isHovering) {
+              setIsHovering(false);
+              setTimeout(() => {
+                if (!isHoveringRef.current) {
+                  setIsOpen(false);
+                }
+              }, dismissDelayMs);
+            }
+          },
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function DropdownTrigger({ children, className, ...props }) {
+  const { isOpen, setIsOpen, buttonId, menuId, buttonRef, setIsHovering } = useDropdownContext();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: buttonRef,
+      id: buttonId,
+      "aria-expanded": isOpen,
+      "aria-controls": menuId,
+      "aria-haspopup": "true",
+      onClick: () => {
+        setIsOpen(true);
+        setIsHovering(false);
+      },
+      className: cn(className),
+      ...props,
+      children
+    }
+  );
+}
+function DropdownContent({ children, className, ...props }) {
+  const { isOpen, buttonId, menuId, menuRef } = useDropdownContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: menuRef,
+      id: menuId,
+      role: "menu",
+      "aria-labelledby": buttonId,
+      tabIndex: -1,
+      className: cn(className),
+      "data-state": isOpen ? "open" : "closed",
+      ...props,
+      children
+    }
+  );
+}
+function DropdownItem({ children, onClick, className, href, ...props }) {
+  if (href) {
+    return /* @__PURE__ */ jsx("a", { role: "menuitem", href, className, onClick, ...props, children });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      role: "menuitem",
+      onClick,
+      className,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === "Space") {
+          onClick?.();
+        }
+      },
+      ...props,
+      children
+    }
+  );
+}
+export {
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownTrigger
+};

package/dist/components/index.d.mts

@@ -29,6 +29,7 @@ export { ExploreMainProductCards, ExploreMainProductCardsProps } from './explore
 export { TextLink, TextLinkProps } from './text-link.mjs';
 export { ContactButton, ContactButtonProps, ContactTextLink, ContactTextLinkProps } from './contact-us.mjs';
 export { Giscus } from './giscus.mjs';
+export { VersionDropdown, VersionDropdownProps } from './version-dropdown.mjs';
 export { GraphQLConfCard, GraphQLConfCardProps } from './hive-navigation/graphql-conf-card.mjs';
 import 'react';
 import 'url';

package/dist/components/index.js

@@ -28,6 +28,7 @@ export * from "./explore-main-product-cards";
 export * from "./text-link";
 export * from "./contact-us";
 import { Giscus } from "./giscus";
+export * from "./version-dropdown";
 export {
   Anchor,
   Button,

package/dist/components/version-dropdown.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface VersionDropdownProps {
+    currentVersion: string;
+    versions: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    }[];
+}
+declare function VersionDropdown({ currentVersion, versions }: VersionDropdownProps): react_jsx_runtime.JSX.Element;
+
+export { VersionDropdown, type VersionDropdownProps };

package/dist/components/version-dropdown.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from "./dropdown";
+function VersionDropdown({ currentVersion, versions }) {
+  return /* @__PURE__ */ jsxs(Dropdown, { className: "relative", children: [
+    /* @__PURE__ */ jsx(DropdownTrigger, { className: "hive-focus cursor-default rounded p-3 font-medium leading-normal text-green-800 aria-expanded:text-green-1000 dark:text-neutral-300 dark:aria-expanded:text-neutral-100", children: currentVersion }),
+    /* @__PURE__ */ jsx(DropdownContent, { className: "absolute -left-1/2 min-w-16 translate-y-2 rounded-xl border border-beige-200 bg-white p-1 shadow-[0px_16px_32px_-12px_rgba(14,18,27,0.10)] transition ease-in-out data-[state=closed]:translate-y-0 data-[state=closed]:scale-95 data-[state=closed]:opacity-0 data-[state=open]:fade-in-90 dark:border-neutral-800 dark:bg-neutral-900", children: versions.map((version) => /* @__PURE__ */ jsx(
+      DropdownItem,
+      {
+        href: version.href,
+        onClick: version.onClick,
+        className: "block rounded p-2 text-right text-green-800 transition-colors hover:bg-beige-100 hover:text-green-1000 dark:text-neutral-300 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-100",
+        children: version.label
+      },
+      version.label
+    )) })
+  ] });
+}
+export {
+  VersionDropdown
+};

package/dist/index.d.mts

@@ -32,6 +32,7 @@ export { ExploreMainProductCards, ExploreMainProductCardsProps } from './compone
 export { TextLink, TextLinkProps } from './components/text-link.mjs';
 export { ContactButton, ContactButtonProps, ContactTextLink, ContactTextLinkProps } from './components/contact-us.mjs';
 export { Giscus } from './components/giscus.mjs';
+export { VersionDropdown, VersionDropdownProps } from './components/version-dropdown.mjs';
 export { PRODUCTS } from './products.mjs';
 export { IEditorProps, IFeatureListProps, IHeroGradientProps, IHeroIllustrationProps, IHeroMarketplaceProps, IHeroVideoProps, IInfoListProps, ILink, IMarketplaceItemProps, IMarketplaceItemsProps, IMarketplaceListProps, IMarketplaceSearchProps, ISchemaPageProps } from './types/components.mjs';
 export { AngularLettermark, ConductorLettermark, ConfigLettermark, EnvelopLettermark, FetsLettermark, GraphQLESlintLettermark, HeltinLettermark, InspectorLettermark, KitQLLettermark, ModulesLettermark, SSELettermark, ScalarsLettermark, SofaLettermark, StitchingLettermark, ToolsLettermark, WSLettermark, WhatsAppLettermark } from './logos/index.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theguild/components",
-  "version": "8.1.0",
+  "version": "8.2.0-alpha-20241216161831-bea3b73cdd26b75e8efa9f75f181dd8b1ad6f2e5",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"