@sqrzro/ui 4.0.0-alpha.17 → 4.0.0-alpha.18

package/dist/components/utility/Action/index.d.ts

@@ -4,7 +4,7 @@ export interface ActionProps<Data extends object | null = null> extends Omit<Act
     readonly label?: React.ReactNode;
     readonly render: (props: ActionComponentProps<Data>) => React.ReactElement;
 }
-export interface ActionComponentProps<Data extends object | null = null> extends Pick<ActionProps<Data>, 'href' | 'icon' | 'isDisabled' | 'isLoading' | 'isSubmittable' | 'onClick' | 'variant'> {
+export interface ActionComponentProps<Data extends object | null = null> extends Pick<ActionProps<Data>, 'href' | 'icon' | 'isDisabled' | 'isLoading' | 'isSubmittable' | 'onClick' | 'searchParams' | 'variant'> {
     children: React.ReactNode;
 }
 declare function Action<Data extends object | null = null>(props: ActionProps<Data>): React.ReactElement;

package/dist/components/utility/Confirmable/index.js

@@ -7,6 +7,7 @@ function Confirmable({ confirmable, renderProps, render, }) {
     const { handle, isOpen, modalProps } = useConfirmable({
         isLoading: renderProps.isLoading,
         onConfirm: (event) => renderProps.onClick?.(event),
+        refreshOnSuccess: true,
     });
     return (_jsxs(Fragment, { children: [render({ ...renderProps, isLoading: renderProps.isLoading, onClick: handle }), isOpen ? _jsx(ConfirmModal, { confirmable: confirmable, ...modalProps }) : null] }));
 }

package/dist/components/utility/MenuItem/index.d.ts

@@ -1,4 +1,4 @@
 import type { ActionComponentProps } from '../Action';
 type MenuItemProps<Data extends object | null = null> = ActionComponentProps<Data>;
-declare function MenuItem<Data extends object | null = null>({ children, onClick, }: MenuItemProps<Data>): React.ReactElement;
+declare function MenuItem<Data extends object | null = null>({ children, href, onClick, }: MenuItemProps<Data>): React.ReactElement;
 export default MenuItem;

package/dist/components/utility/MenuItem/index.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-function MenuItem({ children, onClick, }) {
+import Link from '../Link';
+function MenuItem({ children, href, onClick, }) {
+    if (href) {
+        return (_jsx(Link, { href: href, onClick: onClick, children: children }));
+    }
     return (_jsx("button", { onClick: onClick, type: "button", children: children }));
 }
 export default MenuItem;

package/dist/hooks/useConfirmable.d.ts

@@ -3,6 +3,9 @@ interface UseConfirmableArgs {
     isLoading?: boolean;
     onBeforeConfirm?: () => void;
     onConfirm: (event: ActionEvent, currentRef: HTMLButtonElement | null) => void;
+    onSuccess?: () => Promise<void> | void;
+    redirectOnSuccess?: string | false | ((response: Response) => string | false);
+    refreshOnSuccess?: boolean;
 }
 interface UseConfirmableReturn {
     handle: (event?: ActionEvent) => void;
@@ -14,5 +17,5 @@ interface UseConfirmableReturn {
     };
     ref: React.RefObject<HTMLButtonElement | null>;
 }
-declare function useConfirmable({ isLoading, onBeforeConfirm, onConfirm, }: Readonly<UseConfirmableArgs>): UseConfirmableReturn;
+declare function useConfirmable({ isLoading, onBeforeConfirm, onConfirm, onSuccess, redirectOnSuccess, refreshOnSuccess, }: Readonly<UseConfirmableArgs>): UseConfirmableReturn;
 export default useConfirmable;

package/dist/hooks/useConfirmable.js

@@ -1,7 +1,9 @@
 'use client';
 import { useEffect, useRef, useState } from 'react';
-function useConfirmable({ isLoading, onBeforeConfirm, onConfirm, }) {
+import { useRouter } from 'next/navigation';
+function useConfirmable({ isLoading, onBeforeConfirm, onConfirm, onSuccess, redirectOnSuccess, refreshOnSuccess, }) {
     const ref = useRef(null);
+    const router = useRouter();
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [isConfirmed, setIsConfirmed] = useState(false);
     const [refEvent, setRefEvent] = useState();
@@ -32,10 +34,14 @@ function useConfirmable({ isLoading, onBeforeConfirm, onConfirm, }) {
     function handleCancel() {
         setIsModalOpen(false);
     }
+    function handleSuccess() {
+        setIsConfirmed(false);
+        setIsModalOpen(false);
+        router.refresh();
+    }
     useEffect(() => {
         if (!isLoading && isConfirmed) {
-            setIsConfirmed(false);
-            setIsModalOpen(false);
+            handleSuccess();
         }
     }, [isLoading]);
     return {

package/dist/hooks/usePopover.d.ts

@@ -0,0 +1,11 @@
+interface UsePopoverReturn<T extends HTMLElement = HTMLElement> {
+    controlProps: {
+        onClick: () => void;
+    };
+    ref: React.RefObject<T | null>;
+    targetProps: {
+        isOpen: boolean;
+    };
+}
+declare function usePopover<T extends HTMLElement = HTMLElement>(): UsePopoverReturn<T>;
+export default usePopover;

package/dist/hooks/usePopover.js

@@ -0,0 +1,17 @@
+import useClickOutside from './useClickOutside';
+function usePopover() {
+    const [isOpen, setIsOpen, ref] = useClickOutside();
+    function toggleIsOpen() {
+        setIsOpen(!isOpen);
+    }
+    return {
+        controlProps: {
+            onClick: toggleIsOpen,
+        },
+        ref,
+        targetProps: {
+            isOpen,
+        },
+    };
+}
+export default usePopover;

package/dist/navigation/components/AppNavigation/index.d.ts

@@ -7,6 +7,7 @@ export interface AppNavigationClassNames {
     link: HighlightableClassName;
 }
 export interface AppNavigationProps extends ClassNameProps<AppNavigationClassNames> {
+    classNameKey?: 'appNavigation' | 'tabs';
     data: NavigationObject[];
 }
 declare function AppNavigation(props: Readonly<AppNavigationProps>): React.ReactElement;

package/dist/navigation/components/AppNavigation/index.js

@@ -4,10 +4,10 @@ import { Suspense } from 'react';
 import { getClassNames } from '../../../styles/classnames';
 import useNavigation from '../../hooks/useNavigation';
 import AppNavigationItem from '../AppNavigationItem';
-function AppNavigationComponent({ classNameProps, classNames, data, }) {
-    const componentClassNames = getClassNames('appNavigation', { props: classNameProps }, classNames);
+function AppNavigationComponent({ classNameKey, classNameProps, classNames, data, }) {
+    const componentClassNames = getClassNames(classNameKey ?? 'appNavigation', { props: classNameProps }, classNames);
     const navigation = useNavigation(data);
-    return (_jsx("nav", { className: componentClassNames?.root, children: _jsx("ul", { className: componentClassNames?.list, children: navigation.map((item, index) => (_jsx(AppNavigationItem, { classNames: classNames, ...item }, index))) }) }));
+    return (_jsx("nav", { className: componentClassNames?.root, children: _jsx("ul", { className: componentClassNames?.list, children: navigation.map((item, index) => (_jsx(AppNavigationItem, { classNameKey: classNameKey, classNames: classNames, ...item }, index))) }) }));
 }
 function AppNavigation(props) {
     return (_jsx(Suspense, { children: _jsx(AppNavigationComponent, { ...props }) }));

package/dist/navigation/components/AppNavigationItem/index.d.ts

@@ -1,6 +1,8 @@
 import type { NavigationObject } from '../../../navigation/interfaces';
 import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { AppNavigationClassNames } from '../AppNavigation';
-export type AppNavigationItemProps = NavigationObject & ClassNameProps<AppNavigationClassNames>;
-declare function AppNavigationItem({ classNameProps, classNames, href, isActive, label, }: Readonly<AppNavigationItemProps>): React.ReactElement;
+export interface AppNavigationItemProps extends NavigationObject, ClassNameProps<AppNavigationClassNames> {
+    classNameKey?: 'appNavigation' | 'tabs';
+}
+declare function AppNavigationItem({ children, classNameKey, classNameProps, classNames, href, isActive, label, }: Readonly<AppNavigationItemProps>): React.ReactElement;
 export default AppNavigationItem;

package/dist/navigation/components/AppNavigationItem/index.js

@@ -1,8 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Action from '../../../components/utility/Action';
 import Link from '../../../components/utility/Link';
+import MenuItem from '../../../components/utility/MenuItem';
+import Popover from '../../../components/utility/Popover';
+import usePopover from '../../../hooks/usePopover';
 import { getClassNames } from '../../../styles/classnames';
-function AppNavigationItem({ classNameProps, classNames, href, isActive, label, }) {
-    const componentClassNames = getClassNames('appNavigation', { props: classNameProps, states: { isHighlighted: isActive ?? false } }, classNames);
+function AppNavigationItem({ children, classNameKey, classNameProps, classNames, href, isActive, label, }) {
+    const componentClassNames = getClassNames(classNameKey ?? 'appNavigation', { props: classNameProps, states: { isHighlighted: isActive ?? false } }, classNames);
+    const { controlProps, ref, targetProps } = usePopover();
+    if (children?.length) {
+        return (_jsxs("li", { className: componentClassNames?.item, ref: ref, children: [_jsx("button", { className: componentClassNames?.link, type: "button", ...controlProps, children: label }), _jsx(Popover, { align: "left", vAlign: "bottom", ...targetProps, children: _jsx("ul", { children: children.map((item, index) => (_jsx("li", { children: _jsx(Action, { ...item, render: MenuItem }) }, index))) }) })] }));
+    }
     return (_jsx("li", { className: componentClassNames?.item, children: _jsx(Link, { className: componentClassNames?.link, href: href, children: label }) }));
 }
 export default AppNavigationItem;

package/dist/navigation/components/Tabs/index.js

@@ -1,9 +1,6 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/classnames';
 import AppNavigation from '../AppNavigation';
 function Tabs({ classNameProps, classNames, ...props }) {
-    const componentClassNames = getClassNames('tabs', { props: classNameProps }, classNames);
-    return _jsx(AppNavigation, { classNames: componentClassNames ?? {}, ...props });
+    return _jsx(AppNavigation, { classNameKey: "tabs", ...props });
 }
 export default Tabs;

package/dist/utility/interfaces.d.ts

@@ -7,12 +7,15 @@ export interface ConfirmableObject {
     modalIcon?: React.ReactNode;
     onBeforeConfirm?: () => void;
     onConfirm?: () => void;
+    onSuccess?: () => Promise<void> | void;
+    redirectOnSuccess?: string | false | ((response: Response) => string | false);
+    refreshOnSuccess?: boolean;
     submitLabel?: string;
     title?: React.ReactNode;
 }
 export type ActionEvent = React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>;
 export interface ActionObject<Data extends object | null = null> {
-    action?: (data?: Data) => Promise<void>;
+    action?: (data: Data) => Promise<void>;
     confirmable?: ConfirmableObject;
     data?: Data;
     details?: React.ReactNode;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.17",
+  "version": "4.0.0-alpha.18",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",