@star-insure/sdk 3.2.7 → 3.2.8

package/package.json

@@ -2,7 +2,7 @@
     "name": "@star-insure/sdk",
     "description": "The SDK for Star Insure client apps with shared helper functions and TypeScript definitions.",
     "author": "alexclark_nz",
-    "version": "3.2.7",
+    "version": "3.2.8",
     "license": "MIT",
     "repository": {
         "type": "git",

package/src/components/filter/PageHeader.tsx

@@ -17,6 +17,7 @@ interface Props {
     actions?: TPageHeaderAction[];
     backText?: string;
     filterOptions?: FilterOption[];
+    focusSearchShortcut?: boolean;
 }
 
 export default function PageHeader({
@@ -27,6 +28,7 @@ export default function PageHeader({
     back = true,
     actions = [],
     filterOptions = [],
+    focusSearchShortcut = false,
 }: Props) {
     const [isSearchActive, setSearchActive] = React.useState<boolean>(false);
     const scrollContainerRef = React.useRef<HTMLDivElement | null>(null);
@@ -76,7 +78,7 @@ export default function PageHeader({
 
         current.addEventListener('scroll', listener);
         document.addEventListener('mousemove', mouseListener)
-        
+
         return () => {
             current.removeEventListener('scroll', listener);
             document.removeEventListener('mousemove', mouseListener)
@@ -142,7 +144,7 @@ export default function PageHeader({
             {back && (
                 <BackButton back={back} className="bg-gray-100 h-[60px] w-[60px] rounded" />
             )}
-            
+
             <div className={cn('w-full grid grid-cols-[auto_1fr_auto] h-[60px] rounded bg-gray-100 p-3 gap-4', innerClassName)}>
                 <button
                     type="button"
@@ -152,7 +154,7 @@ export default function PageHeader({
                         'hover:text-teal': search && !isSearchActive,
                     }
                 )}>
-                    {search && <SearchBar search={search} active={isSearchActive} onActive={setSearchActive} placeholder={`Search ${title}...`} />}
+                    {search && <SearchBar search={search} active={isSearchActive} onActive={setSearchActive} placeholder={`Search ${title}...`} focusSearchShortcut={focusSearchShortcut} />}
 
                     {!isSearchActive && <h1 className="text-base font-bold">{title}</h1>}
                 </button>
@@ -161,7 +163,7 @@ export default function PageHeader({
                     {filterOptions.length > 0 && (
                         <>
                             <button onClick={handleClear} className="p-1.5 hover:text-red-500"><HiXMark className="w-5 h-5 stroke-[1.25]" /></button>
-                            
+
                             {hasScroll && <HiChevronLeft onClick={clickLeft} className="w-5 h-5 text-gray-400 stroke-[1.25]" />}
                             <div ref={scrollContainerRef} className="flex items-center h-full w-full gap-3 overflow-x-scroll hide-scroll">
                                 {filterOptions.map(filter => (

package/src/components/filter/SearchBar.tsx

@@ -3,8 +3,15 @@ import React from "react";
 import { HiMagnifyingGlass, HiXMark } from "react-icons/hi2";
 import { useClickOutside } from "../../lib";
 
+interface Props {
+    search?: string;
+    active: boolean;
+    onActive: Function;
+    placeholder?: string;
+    focusSearchShortcut?: boolean;
+}
 
-export default function SearchBar({ search, active, onActive, placeholder }: { search?: string, active: boolean, onActive: Function, placeholder?: string }) {
+export default function SearchBar({ search, active, onActive, placeholder, focusSearchShortcut = false }: Props) {
     const [query, setQuery] = React.useState<string>('');
 
     const searchRef = React.useRef<HTMLDivElement | null>(null);
@@ -26,7 +33,7 @@ export default function SearchBar({ search, active, onActive, placeholder }: { s
         }
 
         const listener = (e: KeyboardEvent) => {
-            if (e.key === '/') {
+            if (focusSearchShortcut && e.key === '/') {
                 e.preventDefault();
                 onActive(true);
             }
@@ -41,7 +48,7 @@ export default function SearchBar({ search, active, onActive, placeholder }: { s
         return () => {
             window.removeEventListener('keydown', listener);
         };
-    }, []);
+    }, [focusSearchShortcut]);
 
     /**
      * Minimise the search bar on click outside if there's no search query
@@ -119,4 +126,3 @@ export default function SearchBar({ search, active, onActive, placeholder }: { s
         </div>
     );
 }
-