@star-insure/sdk 3.1.2 → 3.2.0

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.1.2",
+    "version": "3.2.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -60,19 +60,21 @@
         "size-limit": "^7.0.8",
         "tsdx": "^0.14.1",
         "tslib": "^2.4.0",
-        "typescript": "^3.9.10"
+        "typescript": "^3.9.10",
+        "react": "^18.2.0"
     },
     "dependencies": {
         "@headlessui/react": "^1.6.3",
         "@inertiajs/react": "^1.0.0",
         "classnames": "^2.3.2",
-        "create-slots": "^0.6.1",
         "date-fns": "^2.28.0",
         "lodash-es": "^4.17.21",
-        "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.11.0",
         "react-select": "^5.8.0",
         "uuid": "^9.0.0"
+    },
+    "peerDependencies": {
+        "react": "^18.2.0"
     }
 }

package/src/components/filter/Back.tsx

@@ -2,8 +2,9 @@ import { Link } from "@inertiajs/react";
 import React from "react";
 import { HiArrowLeft } from "react-icons/hi2";
 import { usePage } from "../../lib/page";
+import cn from 'classnames';
 
-export function BackButton({ back }: { back?: string | boolean }) {
+export function BackButton({ back, className }: { back?: string | boolean; className?: string; }) {
     const [backUrl, setBackUrl] = React.useState<string | undefined>(typeof back === 'string' ? back : undefined);
     const { breadcrumbs } = usePage().props;
 
@@ -12,6 +13,7 @@ export function BackButton({ back }: { back?: string | boolean }) {
      */
     React.useEffect(() => {
         if (typeof window !== 'undefined') {
+            if (!breadcrumbs) return;
             // Set back button URL
             if (back && typeof back === 'boolean') {
                 // If we haven't provided a path as a prop, use the last breadcrumb that's not the current one
@@ -28,7 +30,7 @@ export function BackButton({ back }: { back?: string | boolean }) {
     }, [breadcrumbs]);
 
     return (
-        <Link href={backUrl || '/'} className="hover:text-teal transition-all p-1 -mr-1">
+        <Link href={backUrl || '/'} className={cn(className, 'flex items-center justify-center hover:text-teal transition-all')}>
             <HiArrowLeft className="h-5 w-5 stroke-[1.25]" />
         </Link>
     );

package/src/components/filter/Dropdown.tsx

@@ -1,18 +1,15 @@
 import React from "react";
 
-import { createHost, createSlot } from 'create-slots';
 import { useClickOutside } from "../../lib";
 
-const DropdownTitle = createSlot('button');
-const DropdownContent = createSlot('form');
-
 type Props = {
-    children: React.ReactNode;
     onClose: Function;
     active: boolean;
+    title: React.ReactNode;
+    children: React.ReactNode;
 }
 
-function Dropdown({ children, onClose, active }: Props) {
+function Dropdown({ onClose, active, title, children }: Props) {
     const ref = React.useRef<HTMLDivElement | null>(null);
     const innerRef = React.useRef<HTMLDivElement | null>(null);
 
@@ -30,22 +27,17 @@ function Dropdown({ children, onClose, active }: Props) {
         innerCurrent.style.setProperty('left', `${pos?.left}px`)
     }, [active, ref.current, innerRef.current]);
 
-    return createHost(children, (Slots) => {
-        return (
-            <div ref={ref} className="static inline-block">
-                {Slots.get(DropdownTitle)}
-
-                {active && (
-                    <div ref={innerRef} className="absolute children z-10 flex flex-col">
-                        {Slots.get(DropdownContent)}
-                    </div>
-                )}
-            </div>
-        )
-    });
+    return (
+        <div ref={ref} className="static inline-block">
+            {title}
+
+            {active && (
+                <div ref={innerRef} className="absolute children z-10 flex flex-col">
+                    {children}
+                </div>
+            )}
+        </div>
+    );
 };
 
-Dropdown.Title = DropdownTitle;
-Dropdown.Content = DropdownContent;
-
 export default Dropdown;

package/src/components/filter/FilterItem.tsx

@@ -184,21 +184,20 @@ export function FilterItem({ filter }: { filter: FilterOption, path?: string })
     }
 
     return (
-        <Dropdown onClose={() => setOpen(!open)} active={isOpen}>
-            <Dropdown.Title
+        <Dropdown onClose={() => setOpen(!open)} active={isOpen} title={
+            <div
                 onClick={() => handleClick()}
                 className={cn(
-                    'flex rounded-2xl border hover:border-teal bg-gray-600 min-w-[90px] px-2 py-1 items-center justify-between shrink-0 gap-2 text-xs text-white hover:bg-teal transition-colors',
+                    'flex rounded-2xl border hover:border-teal bg-gray-600 px-2 py-1 items-center justify-between shrink-0 gap-2 text-xs text-white hover:bg-teal transition-colors',
                     {
                         '!bg-teal border-teal': hasFilters,
                     }
-                )}
-            >
+            )}>
                 <p className="whitespace-nowrap">{filter.label}</p>
                 <HiChevronDown />
-            </Dropdown.Title>
-
-            <Dropdown.Content
+            </div>
+        }>
+            <form
                 className={`mt-2 flex max-h-[350px] min-w-[200px] flex-col gap-2 rounded-md border border-gray-300 bg-white p-4 shadow-lg ${ filter.type && filter.type === 'select' ? '' : 'overflow-y-scroll'}`}
                 onSubmit={handleApply}
             >
@@ -312,7 +311,7 @@ export function FilterItem({ filter }: { filter: FilterOption, path?: string })
                         Apply
                     </Button>
                 </div>
-            </Dropdown.Content>
+            </form>
         </Dropdown>
     );
 }

package/src/components/filter/PageHeader.tsx

@@ -138,17 +138,19 @@ export default function PageHeader({
     }, [actions]);
 
     return (
-        <section className={cn('col-span-full max-w-full rounded-lg bg-white p-2 shadow', className)}>
-            <div className={cn('grid grid-cols-[auto_1fr_auto] min-h-[60px] rounded gap-4 bg-gray-100 p-3', innerClassName)}>
-                <div className="mr-auto flex items-center gap-4">
-                    {back && <BackButton back={back} />}
-
+        <section className={cn('col-span-full flex items-center gap-2 max-w-full rounded-lg bg-white p-2 shadow', className)}>
+            {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)}>
+                <div className="mr-auto flex items-center gap-4 ml-1">
                     {search && <SearchBar search={search} active={isSearchActive} onActive={setSearchActive} placeholder={`Search ${title}...`} />}
 
                     {!isSearchActive && <h1 className="text-base font-bold">{title}</h1>}
                 </div>
 
-                <div className="flex ml-auto items-center max-w-sm md:max-w-md lg:max-w-lg xl:max-w-2xl gap-2 h-full min-w-0">
+                <div className="flex items-center ml-auto gap-2 h-full min-w-0 max-w-full">
                     {filterOptions.length > 0 && (
                         <>
                             <button onClick={handleClear} className="p-1.5 hover:text-red-500"><HiXMark className="w-5 h-5 stroke-[1.25]" /></button>
@@ -165,7 +167,7 @@ export default function PageHeader({
                 </div>
 
                 {filteredActions.length > 0 && (
-                    <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-3 bg-gray-100">
                         {filterOptions.length > 0 && <div className="w-[1px] h-full bg-gray-300" />}
                         <nav className="flex items-center gap-2">
                             {filteredActions.map((action) => (

package/src/lib/page.tsx

@@ -7,7 +7,7 @@ import { AuthContext, Breadcrumb, Environment } from '../types';
  */
 type CustomPageProps = {
     env: Environment;
-    breadcrumbs: Breadcrumb[];
+    breadcrumbs?: Breadcrumb[];
     links: Record<string, string>;
     access_token?: string;
     impersonate_id?: number;