@theguild/components 8.2.0-alpha-20241217063907-238e21741010747e101b0097d2ea6aab424e94be → 8.2.0-alpha-20250103134229-59b7cae7900a3bc5e262bfbf14f9433af6cf3e73

package/dist/components/dropdown.d.mts

@@ -2,8 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface DropdownProps extends React.ComponentPropsWithoutRef<'div'> {
     children: React.ReactNode;
+    type: 'hover' | 'click';
 }
-declare function Dropdown({ children, className, ...props }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function Dropdown({ children, className, type, ...props }: DropdownProps): react_jsx_runtime.JSX.Element;
 interface DropdownTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
     children: React.ReactNode;
 }

package/dist/components/dropdown.js

@@ -9,7 +9,7 @@ function useDropdownContext() {
   }
   return context;
 }
-function Dropdown({ children, className, ...props }) {
+function Dropdown({ children, className, type, ...props }) {
   const [isOpen, setIsOpen] = useState(false);
   const [isHovering, setIsHovering] = useState(false);
   const buttonId = useId();
@@ -55,18 +55,20 @@ function Dropdown({ children, className, ...props }) {
         "div",
         {
           className: cn("relative", className),
-          onPointerEnter: () => {
-            setIsOpen(true);
-            setIsHovering(true);
-          },
-          onPointerLeave: () => {
-            if (isHovering) {
-              setIsHovering(false);
-              setTimeout(() => {
-                if (!isHoveringRef.current) {
-                  setIsOpen(false);
-                }
-              }, dismissDelayMs);
+          ...type === "hover" && {
+            onPointerEnter: () => {
+              setIsOpen(true);
+              setIsHovering(true);
+            },
+            onPointerLeave: () => {
+              if (isHovering) {
+                setIsHovering(false);
+                setTimeout(() => {
+                  if (!isHoveringRef.current) {
+                    setIsOpen(false);
+                  }
+                }, dismissDelayMs);
+              }
             }
           },
           ...props,
@@ -90,7 +92,7 @@ function DropdownTrigger({ children, className, ...props }) {
         setIsOpen(true);
         setIsHovering(false);
       },
-      className: cn(className),
+      className: cn("cursor-pointer", className),
       ...props,
       children
     }

package/dist/components/index.d.mts

@@ -30,6 +30,7 @@ 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 { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from './dropdown.mjs';
 export { GraphQLConfCard, GraphQLConfCardProps } from './hive-navigation/graphql-conf-card.mjs';
 import 'react';
 import 'url';

package/dist/components/index.js

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

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

@@ -3,7 +3,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface VersionDropdownProps {
     currentVersion: string;
     versions: {
-        label: string;
+        label?: string;
+        value: string;
         href?: string;
         onClick?: () => void;
     }[];

package/dist/components/version-dropdown.js

@@ -2,17 +2,17 @@
 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: [
+  return /* @__PURE__ */ jsxs(Dropdown, { type: "hover", 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(
+    /* @__PURE__ */ jsx(DropdownContent, { className: "absolute left-full min-w-16 -translate-x-full 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
+        className: "block whitespace-nowrap rounded p-2 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.value
       },
-      version.label
+      version.value
     )) })
   ] });
 }

package/dist/index.d.mts

@@ -33,6 +33,7 @@ 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 { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from './components/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.2.0-alpha-20241217063907-238e21741010747e101b0097d2ea6aab424e94be",
+  "version": "8.2.0-alpha-20250103134229-59b7cae7900a3bc5e262bfbf14f9433af6cf3e73",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"