@tpzdsp/next-toolkit 2.5.0 → 3.0.0

package/src/components/skipLink/SkipLink.test.tsx

@@ -1,22 +0,0 @@
-import { SkipLink } from './SkipLink';
-import { render, screen, userEvent } from '../../test/renderers';
-
-describe('SkipLink Component', () => {
-  it('should render correctly', () => {
-    render(<SkipLink />);
-
-    expect(screen.getByRole('link', { name: /skip to main content/i })).toBeInTheDocument();
-  });
-
-  it('should be focusable', async () => {
-    render(<SkipLink />);
-
-    const user = userEvent.setup();
-
-    await user.tab();
-
-    const link = screen.getByRole('link', { name: /skip to main content/i });
-
-    expect(link).toHaveFocus();
-  });
-});

package/src/components/skipLink/SkipLink.tsx

@@ -1,49 +0,0 @@
-'use client';
-
-import type { ExtendProps } from '../../types';
-import { cn, KeyboardKeys } from '../../utils';
-import { Link } from '../link/Link';
-
-type Props = {
-  mainContentId?: string;
-  /** Explicitly disallow children as we hard-code the link content */
-  children?: never;
-};
-
-export type SkipLinkProps = ExtendProps<'nav', Props>;
-
-export const SkipLink = ({
-  mainContentId = 'main-content',
-  className,
-  ...props
-}: SkipLinkProps) => {
-  const handleActivate = () => {
-    // Let the browser scroll first, then move focus
-    setTimeout(() => {
-      const main = document.getElementById(mainContentId);
-
-      if (main) {
-        main.focus();
-      }
-    }, 0);
-  };
-
-  return (
-    <nav aria-label="Skip navigation" className={cn(className)} {...props}>
-      <Link
-        className="absolute w-full p-3 text-black bg-focus focus:relative focus:top-0 -top-full
-          visited:text-black hover:text-black skip-link"
-        href={`#${mainContentId}`}
-        onClick={handleActivate}
-        onKeyDown={(event) => {
-          if (event.key === KeyboardKeys.Enter || event.key === KeyboardKeys.Space) {
-            event.preventDefault(); // Prevent default scroll/jump
-            handleActivate();
-          }
-        }}
-      >
-        Skip to main content
-      </Link>
-    </nav>
-  );
-};

package/src/map/LegendPanel.tsx

@@ -1,85 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState, type ReactNode } from 'react';
-
-import { createPortal } from 'react-dom';
-
-import { cn } from '../utils';
-
-type LegendPanelProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  buttonRect: DOMRect | null;
-  children?: ReactNode;
-};
-
-export const LegendPanel = ({ isOpen, onClose, buttonRect, children }: LegendPanelProps) => {
-  const [isMounted, setIsMounted] = useState(false);
-  const panelRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, onClose]);
-
-  if (!isMounted || !isOpen) {
-    return <></>;
-  }
-
-  const top = buttonRect ? buttonRect.top : 200;
-  const right = buttonRect ? window.innerWidth - buttonRect.left + 8 : 96;
-  const maxHeight = buttonRect
-    ? `${window.innerHeight - buttonRect.top - 24}px`
-    : 'calc(100vh - 224px)';
-
-  return createPortal(
-    <div
-      ref={panelRef}
-      role="dialog"
-      aria-modal="true"
-      aria-label="Map legend"
-      style={{ top, right, maxHeight }}
-      className={cn(
-        'fixed bg-white rounded-lg shadow-lg border border-gray-200',
-        'flex flex-col',
-        'p-4 gap-3',
-        'w-[220px]',
-        'z-[9999]',
-      )}
-    >
-      <div className="flex items-center justify-between flex-shrink-0">
-        <h2 className="text-sm font-semibold text-gray-800">Legend</h2>
-
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Close legend"
-          className="w-8 h-8 flex items-center justify-center rounded text-gray-600 hover:bg-focus
-            focus:outline focus:outline-2 focus:outline-focus focus:bg-focus transition-colors"
-        >
-          <span className="text-xl leading-none" aria-hidden="true">
-            &times;
-          </span>
-        </button>
-      </div>
-
-      <div className="overflow-y-auto">{children}</div>
-    </div>,
-    document.body,
-  );
-};