@stainless-api/docs-ui 0.1.0-beta.25 → 0.1.0-beta.27

package/src/components/dropdown.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react';
-import style from '../style';
-import { ChevronsUpDown } from 'lucide-react';
-import clsx from 'clsx';
-
-export const Dropdown = ({ className, children, ...rest }: React.HTMLProps<HTMLDivElement>) => {
-  return (
-    <div {...rest} className={`${style.Dropdown} ${className ?? ''}`}>
-      {children}
-    </div>
-  );
-};
-
-export const DropdownTrigger = ({
-  children,
-  withChevron,
-  className,
-  isIcon,
-  ...rest
-}: {
-  children: React.ReactNode;
-  withChevron?: boolean;
-  isIcon?: boolean;
-} & (React.HTMLProps<HTMLButtonElement> & {
-  type?: 'submit' | 'reset' | 'button';
-})) => {
-  return (
-    <button
-      className={`${style.Button} ${style.ButtonSecondary} ${style.DropdownTrigger} ${isIcon ? style.ButtonIcon : ''} ${className ?? ''}`}
-      aria-haspopup="listbox"
-      {...rest}
-    >
-      <div className={style.DropdownTriggerContent}>{children}</div>
-      {withChevron && (
-        <span className={style.DropdownChevron}>
-          <ChevronsUpDown size={16} />
-        </span>
-      )}
-    </button>
-  );
-};
-
-export const DropdownMenu = ({
-  position,
-  className,
-  children,
-  ...rest
-}: { position?: 'below' } & React.HTMLProps<HTMLUListElement>) => {
-  return (
-    <ul className={`${style.DropdownMenu} ${position ?? ''} ${className ?? ''}`} {...rest}>
-      {children}
-    </ul>
-  );
-};
-
-export const DropdownItem = ({
-  children,
-  className,
-  value,
-  selected,
-  href,
-}: React.HTMLProps<HTMLLIElement> & { value?: string; selected?: boolean; href?: string }) => {
-  const inner = (
-    <>
-      {children}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="lucide lucide-check-icon lucide-check"
-      >
-        <path d="M20 6 9 17l-5-5" />
-      </svg>
-    </>
-  );
-  return (
-    <li
-      className={clsx(style.DropdownItem, className, selected && 'selected', href && style.DropdownItemLink)}
-      role="option"
-      data-dropdown-value={value}
-    >
-      {href ? <a href={href}>{inner}</a> : inner}
-    </li>
-  );
-};

package/src/components/scripts/dropdown.ts

@@ -1,78 +0,0 @@
-export function initDropdown({
-  dropdownId,
-  onSelect,
-  isFixed,
-}: {
-  dropdownId: string;
-  onSelect?: (value: string) => void;
-  isFixed?: boolean;
-}) {
-  const dropdown = document.getElementById(dropdownId);
-  if (!dropdown) return;
-
-  const button = dropdown.querySelector('button');
-  const menu = dropdown.querySelector('.stldocs-dropdown-menu');
-
-  if (!button || !menu) return;
-
-  let isOpen = false;
-
-  function toggleDropdown() {
-    if (!button || !menu) return;
-
-    isOpen = !isOpen;
-
-    if (isOpen) {
-      if (isFixed) {
-        // Calculate position for fixed dropdown
-        const buttonRect = button.getBoundingClientRect();
-        (menu as HTMLElement).style.top = `${buttonRect.bottom}px`;
-        (menu as HTMLElement).style.left = `${buttonRect.left}px`;
-      }
-      menu.classList.add('open');
-      button.setAttribute('aria-expanded', 'true');
-    } else {
-      menu.classList.remove('open');
-      button.setAttribute('aria-expanded', 'false');
-    }
-  }
-
-  function closeDropdown() {
-    if (!button || !menu) return;
-
-    isOpen = false;
-    menu.classList.remove('open');
-    button.setAttribute('aria-expanded', 'false');
-  }
-
-  // Toggle dropdown on button click
-  button.addEventListener('click', () => {
-    toggleDropdown();
-  });
-
-  // Close dropdown when clicking outside
-  document.addEventListener('click', (e) => {
-    if (!dropdown.contains(e.target as Node)) {
-      closeDropdown();
-    }
-  });
-
-  // Close dropdown when pressing Escape
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && isOpen) {
-      closeDropdown();
-    }
-  });
-
-  // Close dropdown when clicking on dropdown items
-  const dropdownItems = menu.querySelectorAll('.stldocs-dropdown-item');
-  dropdownItems.forEach((item) => {
-    item.addEventListener('click', () => {
-      closeDropdown();
-      const selectedValue = item.getAttribute('data-dropdown-value');
-      if (selectedValue && onSelect) {
-        onSelect(selectedValue);
-      }
-    });
-  });
-}