Function UrlInputModal

src/components/modals/UrlInputModal.tsx:40–142

({ isOpen, onClose, onLoad, loading = false }: UrlInputModalProps)

 * - Enter key to submit, Escape to close
 */
export function UrlInputModal({ isOpen, onClose, onLoad, loading = false }: UrlInputModalProps) {
  const titleId = useId();
  const descriptionId = useId();
  const [url, setUrl] = useState('');
  const [showHelp, setShowHelp] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
  const actionState = getUrlInputActionState(url, loading);
  const helpIconKind = getUrlInputHelpIconKind(showHelp);

  // Clear URL when modal closes
  useEffect(() => {
    if (!isOpen) {
      const timeout = setTimeout(() => setUrl(''), 0);
      return () => clearTimeout(timeout);
    }
  }, [isOpen]);

  // Handle load action
  const handleLoad = useCallback(() => {
    const submitUrl = getUrlInputSubmitUrl(url, loading);
    if (!submitUrl) return;
    onLoad(submitUrl);
  }, [url, loading, onLoad]);

  // Handle key events
  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
    if (shouldSubmitUrlInputKey(e.key, loading)) {
      handleLoad();
    }
  }, [handleLoad, loading]);

  return (
    <ModalDialogShell
      isOpen={isOpen}
      onClose={onClose}
      ariaLabelledBy={titleId}
      ariaDescribedBy={descriptionId}
      overlayClassName="fixed inset-0 flex items-center justify-center bg-ds-void/50"
      overlayStyle={getUrlInputModalOverlayStyle()}
      panelClassName="bg-ds-tertiary border border-ds rounded-lg shadow-ds-lg p-5 min-w-[400px] max-w-[520px]"
      panelTestId="url-modal"
      initialFocusRef={inputRef}
      closeOnBackdrop={shouldCloseUrlInputFromBackdrop(true, loading)}
      closeOnEscape={!loading}
    >
        <h3 id={titleId} className="text-ds-primary font-medium mb-3">Load from URL</h3>
        <p id={descriptionId} className="text-ds-muted text-sm mb-4">
          {URL_INPUT_DESCRIPTION}
        </p>

        {/* URL input */}
        <input
          ref={inputRef}
          type="url"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder={URL_INPUT_PLACEHOLDER}