uibee 2.12.3 → 2.13.1

package/dist/src/components/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Input } from './inputs/input';
+export { default as SearchInput } from './inputs/searchInput';
 export { default as Textarea } from './inputs/textarea';
 export { default as Checkbox } from './inputs/checkbox';
 export { default as Select } from './inputs/select';

package/dist/src/components/index.js

@@ -1,5 +1,6 @@
 // Input components
 export { default as Input } from './inputs/input';
+export { default as SearchInput } from './inputs/searchInput';
 export { default as Textarea } from './inputs/textarea';
 export { default as Checkbox } from './inputs/checkbox';
 export { default as Select } from './inputs/select';

package/dist/src/components/inputs/searchInput.d.ts

@@ -0,0 +1,6 @@
+interface SearchInputProps {
+    placeholder?: string;
+    variant?: 'default' | 'minimal';
+}
+export default function SearchInput({ placeholder, variant }: SearchInputProps): import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/dist/src/components/inputs/searchInput.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import { Search } from 'lucide-react';
+import Input from './input';
+export default function SearchInput({ placeholder = 'Search...', variant = 'default' }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [searchValue, setSearchValue] = useState(searchParams.get('q') || '');
+    useEffect(() => {
+        const currentQ = searchParams.get('q') || '';
+        setSearchValue(currentQ);
+    }, [searchParams]);
+    function handleSearch(value) {
+        setSearchValue(value);
+        const params = new URLSearchParams(searchParams.toString());
+        if (value.trim()) {
+            params.set('q', value.trim());
+        }
+        else {
+            params.delete('q');
+        }
+        params.delete('page');
+        router.push(`${pathname}?${params.toString()}`);
+    }
+    function handleKeyDown(e) {
+        if (e.key === 'Enter') {
+            handleSearch(searchValue);
+        }
+    }
+    function handleChange(e) {
+        setSearchValue(e.target.value);
+    }
+    if (variant === 'minimal') {
+        return (_jsxs("div", { className: 'relative', children: [_jsx(Search, { className: 'absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5' }), _jsx("input", { type: 'text', value: searchValue, onChange: (e) => setSearchValue(e.target.value), onKeyDown: handleKeyDown, onBlur: () => handleSearch(searchValue), placeholder: placeholder, className: 'pl-10 pr-4 py-2 border-b outline-none w-64' })] }));
+    }
+    else {
+        _jsx(Input, { name: 'search', icon: _jsx(Search, { className: 'w-5 h-5' }), value: searchValue, onChange: handleChange, onKeyDown: handleKeyDown, onBlur: () => handleSearch(searchValue), placeholder: placeholder });
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.12.3",
+  "version": "2.13.1",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/index.ts

@@ -1,5 +1,6 @@
 // Input components
 export { default as Input } from './inputs/input'
+export { default as SearchInput } from './inputs/searchInput'
 export { default as Textarea } from './inputs/textarea'
 export { default as Checkbox } from './inputs/checkbox'
 export { default as Select } from './inputs/select'

package/src/components/inputs/searchInput.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { useState, useEffect, type KeyboardEvent, type ChangeEvent } from 'react'
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { Search } from 'lucide-react'
+import Input from './input'
+
+interface SearchInputProps {
+    placeholder?: string
+    variant?: 'default' | 'minimal'
+}
+
+export default function SearchInput({ placeholder = 'Search...', variant = 'default' }: SearchInputProps) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const searchParams = useSearchParams()
+    const [searchValue, setSearchValue] = useState(searchParams.get('q') || '')
+
+    useEffect(() => {
+        const currentQ = searchParams.get('q') || ''
+        setSearchValue(currentQ)
+    }, [searchParams])
+
+    function handleSearch(value: string) {
+        setSearchValue(value)
+        const params = new URLSearchParams(searchParams.toString())
+        if (value.trim()) {
+            params.set('q', value.trim())
+        } else {
+            params.delete('q')
+        }
+        params.delete('page')
+        router.push(`${pathname}?${params.toString()}`)
+    }
+
+    function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+        if (e.key === 'Enter') {
+            handleSearch(searchValue)
+        }
+    }
+
+    function handleChange(e: ChangeEvent<HTMLInputElement>) {
+        setSearchValue(e.target.value)
+    }
+
+    if (variant === 'minimal') {
+        return (
+            <div className='relative'>
+                <Search className='absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5' />
+                <input
+                    type='text'
+                    value={searchValue}
+                    onChange={(e) => setSearchValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onBlur={() => handleSearch(searchValue)}
+                    placeholder={placeholder}
+                    className='pl-10 pr-4 py-2 border-b outline-none w-64'
+                />
+            </div>
+        )
+    } else {
+        <Input
+            name='search'
+            icon={<Search className='w-5 h-5' />}
+            value={searchValue}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onBlur={() => handleSearch(searchValue)}
+            placeholder={placeholder}
+        />
+    }
+}

package/src/components/table/body.tsx

@@ -130,12 +130,12 @@ export default function Body({ list, columns, menuItems, redirectPath, variant =
                                 <td
                                     key={col.key}
                                     className={`
-                                        flex-1 px-6 py-4 whitespace-nowrap text-sm min-w-40 flex items-center text-login-100
+                                        flex-1 min-w-0 px-6 py-4 whitespace-nowrap text-sm flex items-center text-login-100
                                         ${variant === 'minimal' ? 'px-4! py-2!' : ''}
                                     `}
                                 >
-                                    <div className='relative'>
-                                        <h1 className={badgeClass}>
+                                    <div className='relative w-full min-w-0'>
+                                        <h1 className={`block max-w-full truncate ${badgeClass}`}>
                                             {formatValue(col.key, value as string | number)}
                                         </h1>
                                     </div>

package/src/components/table/header.tsx

@@ -53,16 +53,16 @@ export default function Header({ columns, hideMenu, variant = 'default' }: Heade
                         <th
                             key={key}
                             className={`
-                                flex-1 px-6 py-3 text-xs font-medium uppercase tracking-wider text-left
+                                flex-1 min-w-0 px-6 py-3 text-xs font-medium uppercase tracking-wider text-left
                                 ${variant === 'default' ? 'text-login-200' : 'text-login-100'}
-                                ${variant === 'minimal' ? 'px-4!!' : ''}
+                                ${variant === 'minimal' ? 'px-4!' : ''}
                             `}
                         >
                             <button
-                                className='flex flex-row items-center gap-2 group uppercase'
+                                className='flex w-full min-w-0 flex-row items-center gap-2 group uppercase whitespace-nowrap'
                                 onClick={() => handleChange(key)}
                             >
-                                {value}
+                                <span className='min-w-0 truncate'>{value}</span>
                                 <span className='flex flex-col'>
                                     {column === key ? (
                                         order === 'asc' ? (

package/src/components/table/table.tsx

@@ -20,7 +20,7 @@ export default function Table({ data, columns, menuItems, redirectPath, variant
 
     return (
         <div className={`
-            flex-1 flex flex-col min-h-0 overflow-x-auto h-full w-full
+            flex-1 flex flex-col min-h-0 overflow-x-auto overflow-y-hidden h-full w-full
             ${variant === 'default' ? 'bg-login-500/50 rounded-lg shadow border border-login-600' : ''}
             ${variant === 'minimal' ? 'bg-transparent' : ''}
         `}>