@orangesk/orange-design-system 2.0.0-beta.25 → 2.0.0-beta.26

package/src/components/DocumentationSidebar/DocumentationSidebar.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import cx from "classnames";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import Link from "next/link";
 import MiniSearch from "minisearch";
 import { Image } from "../Image";
@@ -231,9 +231,12 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
   const [isMenuOpenOnMobile, setIsMenuOpenOnMobile] = React.useState(false);
   const [searchQuery, setSearchQuery] = React.useState("");
   const [searchResults, setSearchResults] = React.useState<SearchResult[]>([]);
+  const [activeSearchIndex, setActiveSearchIndex] = React.useState(0);
   const [miniSearch, setMiniSearch] = React.useState<MiniSearch | null>(null);
   const pathname = usePathname();
+  const router = useRouter();
   const sidebarRef = React.useRef<HTMLElement>(null);
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
 
   // Initialize search on mount
   React.useEffect(() => {
@@ -274,21 +277,32 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
         combineWith: "AND", // Require all terms to match
       }) as unknown as SearchResult[];
       setSearchResults(results.slice(0, 10)); // Limit to 10 results
+      setActiveSearchIndex(0); // Reset active index when results change
     } else {
       setSearchResults([]);
+      setActiveSearchIndex(0);
     }
   };
 
   React.useEffect(() => {
-    const handleEsc = (event: KeyboardEvent) => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Handle Cmd+K or Ctrl+K to focus search
+      if ((event.metaKey || event.ctrlKey) && event.key === "k") {
+        event.preventDefault();
+        searchInputRef.current?.focus();
+        return;
+      }
+
+      // Handle Escape key
       if (event.key === "Escape") {
         setIsMenuOpenOnMobile(false);
         setSearchQuery("");
         setSearchResults([]);
+        setActiveSearchIndex(0);
       }
     };
-    document.addEventListener("keydown", handleEsc);
-    return () => document.removeEventListener("keydown", handleEsc);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
   }, []);
 
   // Scroll to active item when pathname changes or component mounts
@@ -311,6 +325,36 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
     setIsMenuOpenOnMobile(false);
     setSearchQuery("");
     setSearchResults([]);
+    setActiveSearchIndex(0);
+  };
+
+  // Handle keyboard navigation in search results
+  const handleSearchKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+  ) => {
+    if (searchResults.length === 0) return;
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setActiveSearchIndex((prev) =>
+          prev < searchResults.length - 1 ? prev + 1 : prev,
+        );
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setActiveSearchIndex((prev) => (prev > 0 ? prev - 1 : 0));
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (searchResults[activeSearchIndex]) {
+          const href = searchResults[activeSearchIndex].href;
+          searchInputRef.current?.blur();
+          router.push(href);
+          handleSelect(href);
+        }
+        break;
+    }
   };
 
   const classes = cx(CLASS_ROOT, className, {
@@ -341,11 +385,13 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
           <TextInput
             id="search-documentation"
             htmlType="search"
-            placeholder="Search documentation..."
+            placeholder="CTRL+K to search..."
             value={searchQuery}
             onChange={(e) => handleSearch(e.currentTarget.value)}
+            onKeyDown={handleSearchKeyDown}
             width="fullwidth"
             aria-label="Search documentation"
+            ref={searchInputRef}
           />
           {searchQuery && (
             <button
@@ -365,11 +411,14 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
         {searchResults.length > 0 && (
           <div className={`${CLASS_ROOT}__search-results`}>
             <ul className={`${CLASS_ROOT}__search-list`}>
-              {searchResults.map((result) => (
+              {searchResults.map((result, index) => (
                 <li key={result.id}>
                   <Link
                     href={result.href}
-                    className={`${CLASS_ROOT}__search-result-link`}
+                    className={cx(`${CLASS_ROOT}__search-result-link`, {
+                      [`${CLASS_ROOT}__search-result-link--active`]:
+                        index === activeSearchIndex,
+                    })}
                     onClick={() => handleSelect(result.href)}
                   >
                     {result.label}

package/src/components/DocumentationSidebar/styles/style.scss

@@ -268,6 +268,12 @@
       color: var(--color-text-default);
     }
 
+    &--active {
+      background-color: var(--color-surface-subtle);
+      color: var(--color-text-default);
+      font-weight: 600;
+    }
+
     &:focus-visible {
       outline: 2px solid var(--color-border-accent);
       outline-offset: -2px;

package/src/components/Modal/Modal.static.ts

@@ -10,6 +10,8 @@ interface ModalConfig {
   root: string;
   /** Move modal into this element selector (must be unique in DOM) */
   modalsRoot: string;
+  /** Disable moving modal into #root-modals */
+  disablePortal?: boolean;
 }
 
 const defaultConfig = (): ModalConfig => ({
@@ -111,7 +113,7 @@ export default class Modal {
   }
 
   init(): void {
-    if (this.config.modalsRoot) {
+    if (this.config.modalsRoot && !this.config.disablePortal) {
       Modal.moveToModalRoot(
         this.element,
         document.querySelector(this.config.modalsRoot),

package/src/components/Modal/Modal.tsx

@@ -83,7 +83,8 @@ const Modal: React.FC<ModalProps> = ({
   disableFooterSpacing,
   ...other
 }) => {
-  const [modalRef, instance] = useStatic(ModalStatic);
+  const modalConfig = isActive !== undefined ? { disablePortal: true } : {};
+  const [modalRef, instance] = useStatic(ModalStatic, modalConfig);
 
   useEffect(() => {
     if (isActive && instance && (instance as any).current) {