@star-insure/sdk 4.2.0 → 4.3.1

package/dist/types/misc/index.d.ts

@@ -9,7 +9,7 @@ export interface FilterOption {
     label: string;
     name: string;
     options?: FilterValue[];
-    type?: 'options' | 'date' | 'greaterThan' | 'scope' | 'select' | 'datalist' | 'column';
+    type?: 'options' | 'date' | 'greaterThan' | 'scope' | 'select' | 'datalist' | 'column' | 'text';
 }
 export interface FilterValue {
     label: string;

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": "4.2.0",
+    "version": "4.3.1",
     "license": "MIT",
     "repository": {
         "type": "git",

package/src/components/filter/FilterItem.tsx

@@ -114,6 +114,16 @@ export function FilterItem({ filter }: { filter: FilterOption, path?: string })
         }
     }
 
+    function handleText(e: React.SyntheticEvent<HTMLInputElement>) {
+        const { value } = e.currentTarget;
+
+        if (value) {
+            setSelected([value]);
+        } else {
+            setSelected([]);
+        }
+    }
+
     function handleApply(e: React.FormEvent) {
         e.preventDefault();
 
@@ -304,6 +314,18 @@ export function FilterItem({ filter }: { filter: FilterOption, path?: string })
                             />
                         </div>
                     )}
+                    {filter.type === 'text' && (
+                        <div className={'w-full'}>
+                            <input
+                                type="text"
+                                name={filter.name}
+                                placeholder={filter.label}
+                                value={selected[0] ?? ''}
+                                onChange={handleText}
+                                className="!p-2 text-sm w-full"
+                            />
+                        </div>
+                    )}
                 </div>
                 <div className="bg-gray-100 border-t border-gray-200 flex items-center gap-2 p-4 bottom-0 sticky">
                     <Button type="button" className="!min-w-[0px] flex-grow !px-2 text-sm !transition-none" onClick={handleClear} small>

package/src/components/filter/PageHeader.tsx

@@ -18,6 +18,7 @@ interface Props {
     backText?: string;
     filterOptions?: FilterOption[];
     focusSearchShortcut?: boolean;
+    children?: React.ReactNode;
 }
 
 export default function PageHeader({
@@ -29,12 +30,24 @@ export default function PageHeader({
     actions = [],
     filterOptions = [],
     focusSearchShortcut = false,
+    children
 }: Props) {
     const [isSearchActive, setSearchActive] = React.useState<boolean>(false);
     const scrollContainerRef = React.useRef<HTMLDivElement | null>(null);
 
     const [overScroll, setOverScroll] = React.useState<boolean>(false);
 
+    const actionChildren: React.ReactNode[] = [];
+
+    // Categorize children based on their type
+    React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child)) {
+            if (child.type === PageHeader.Action) {
+                actionChildren.push(child);
+            }
+        }
+    });
+
     React.useEffect(() => {
         const current = scrollContainerRef.current;
         if (!current) return;
@@ -145,7 +158,7 @@ export default function PageHeader({
                 <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)}>
+            <div className={cn('w-full grid grid-cols-[auto_1fr_auto_auto] h-[60px] rounded bg-gray-100 p-3 gap-4', innerClassName)}>
                 <button
                     type="button"
                     disabled={!search}
@@ -185,7 +198,15 @@ export default function PageHeader({
                         </nav>
                     </div>
                 )}
+                {actionChildren && (
+                    <div className="flex items-center gap-3 bg-gray-100">
+                        {actionChildren}
+                    </div>
+                )}
             </div>
         </section>
     );
 }
+
+// Subcomponents
+PageHeader.Action = ({ children }: {children: React.ReactNode}) => <div>{children}</div>;

package/src/types/misc/index.ts

@@ -11,7 +11,7 @@ export interface FilterOption {
     label: string;
     name: string;
     options?: FilterValue[];
-    type?: 'options' | 'date' | 'greaterThan' | 'scope' | 'select' | 'datalist' | 'column';
+    type?: 'options' | 'date' | 'greaterThan' | 'scope' | 'select' | 'datalist' | 'column' | 'text';
 }
 
 export interface FilterValue {