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

package/dist/components/collections/Table/index.d.ts

@@ -1,9 +1,9 @@
 import { CollectionComponentProps } from '../Collection';
 import type { TableColumnObject, TableItemObject } from '../interfaces';
 export type { TableClassNames } from '../TableClientComponent';
-export interface TableProps<Item, Filters = null> extends CollectionComponentProps<Item, TableItemObject, Filters> {
+export interface TableProps<Item, Filters = null, Data extends object | null = null> extends CollectionComponentProps<Item, TableItemObject<Data>, Filters> {
     readonly columns: TableColumnObject[];
     readonly isSelectable?: boolean;
 }
-declare function Table<Item extends object, Filters>({ columns, isSelectable, ...props }: TableProps<Item, Filters>): React.ReactElement;
+declare function Table<Item extends object, Filters = null, Data extends object | null = null>({ columns, isSelectable, ...props }: TableProps<Item, Filters, Data>): React.ReactElement;
 export default Table;

package/dist/components/collections/Table/index.js

@@ -4,7 +4,7 @@ import TableClientComponent from '../TableClientComponent';
 function defaultTransformer(item) {
     return {
         id: 'id' in item ? String(item.id) : JSON.stringify(item),
-        ...item,
+        row: { ...item },
     };
 }
 function Table({ columns, isSelectable, ...props }) {

package/dist/components/collections/TableClientComponent/index.d.ts

@@ -5,10 +5,10 @@ export interface TableClassNames {
     row: SelectableClassName;
     cell: string;
 }
-interface TableClientComponentProps extends ClassNameProps<TableClassNames> {
+interface TableClientComponentProps<Data extends object | null = null> extends ClassNameProps<TableClassNames> {
     readonly columns: TableColumnObject[];
-    readonly data: TableItemObject[];
+    readonly data: TableItemObject<Data>[];
     readonly isSelectable?: boolean;
 }
-declare function TableClientComponent({ classNameProps, classNames, columns, data, isSelectable, }: Readonly<TableClientComponentProps>): React.ReactElement;
+declare function TableClientComponent<Data extends object | null = null>({ classNameProps, classNames, columns, data, isSelectable, }: Readonly<TableClientComponentProps<Data>>): React.ReactElement;
 export default TableClientComponent;

package/dist/components/collections/TableClientComponent/index.js

@@ -1,10 +1,9 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { toggleArrayItem } from '@sqrzro/utility';
 import { useSearchParams } from 'next/navigation';
 import useSearchParamsHref from '../../../hooks/useSearchParamsHref';
 import { getClassNames } from '../../../styles/classnames';
-import filterColumns from '../utility/filter-columns';
 import getSelectedFromSearchParams from '../utility/get-selected-from-search-params';
 import setSelectedToSearchParams from '../utility/set-selected-to-search-params';
 import TableRow from '../TableRow';
@@ -12,7 +11,6 @@ function TableClientComponent({ classNameProps, classNames, columns, data, isSel
     const componentClassNames = getClassNames('table', { props: classNameProps }, classNames);
     const { setSearchParamsHref } = useSearchParamsHref();
     const searchParams = useSearchParams();
-    const filteredColumns = filterColumns(columns, isSelectable);
     const selected = getSelectedFromSearchParams(searchParams);
     function handleSelect(event) {
         const value = toggleArrayItem(selected, event.target.name);
@@ -22,6 +20,6 @@ function TableClientComponent({ classNameProps, classNames, columns, data, isSel
         const value = selected.length === data.length ? [] : data.map((item) => item.id);
         setSearchParamsHref({ selected: setSelectedToSearchParams(value) });
     }
-    return (_jsx("div", { className: componentClassNames?.root, children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsx("tr", { children: filteredColumns.map((column) => (_jsx("th", { children: column.type === 'selectable' ? (_jsxs("button", { name: column.id, onClick: handleSelectAll, children: ["Select All ", selected.includes(column.id) ? '✓' : ''] })) : (column.title) }, column.id))) }) }), _jsx("tbody", { children: data.map((item) => (_jsx(TableRow, { columns: filteredColumns, data: item, isSelected: selected.includes(item.id), onSelect: handleSelect }, item.id))) })] }) }));
+    return (_jsx("div", { className: componentClassNames?.root, children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { children: [data[0].isSelectable ? (_jsx("th", { children: _jsx("button", { onClick: handleSelectAll, children: "Select All" }) })) : null, columns.map((column) => (_jsx("th", { children: column.title }, column.id)))] }) }), _jsx("tbody", { children: data.map((item) => (_jsx(TableRow, { columns: columns, data: item, isSelected: selected.includes(item.id), onSelect: handleSelect }, item.id))) })] }) }));
 }
 export default TableClientComponent;

package/dist/components/collections/TableRow/index.d.ts

@@ -1,12 +1,13 @@
 import type { InputEvent } from '../../../forms/interfaces';
 import type { ClassNameProps } from '../../../styles/classnames/interfaces';
-import { TableClassNames } from '../TableClientComponent';
+import type { TableClassNames } from '../TableClientComponent';
 import type { TableColumnObject, TableItemObject } from '../interfaces';
-interface TableRowProps extends ClassNameProps<TableClassNames> {
+interface TableRowProps<Data extends object | null = null> extends ClassNameProps<TableClassNames> {
     columns: TableColumnObject[];
-    data: TableItemObject;
+    data: TableItemObject<Data>;
+    isSelectable?: boolean;
     isSelected: boolean;
     onSelect: (event: InputEvent<boolean>) => void;
 }
-declare function TableRow({ classNameProps, classNames, columns, data, isSelected, onSelect, }: TableRowProps): React.ReactElement;
+declare function TableRow<Data extends object | null = null>({ classNameProps, classNames, columns, data, isSelected, onSelect, }: TableRowProps<Data>): React.ReactElement;
 export default TableRow;

package/dist/components/collections/TableRow/index.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Switch from '../../../forms/components/Switch';
 import { getClassNames } from '../../../styles/classnames';
-import tw from '../../../styles/classnames/tw';
+import ListItemMenu from '../ListItemMenu';
 function TableRow({ classNameProps, classNames, columns, data, isSelected, onSelect, }) {
     const componentClassNames = getClassNames('table', { props: classNameProps, states: { isSelected } }, classNames);
-    return (_jsx("tr", { className: componentClassNames?.row, children: columns.map((column) => (_jsx("td", { className: tw(componentClassNames?.cell, column.type === 'selectable' ? 'w-1' : null), children: column.type === 'selectable' ? (_jsx(Switch, { name: data.id, onChange: onSelect, value: isSelected })) : (data[column.id]) }, column.id))) }));
+    return (_jsxs("tr", { className: componentClassNames?.row, children: [data.isSelectable ? (_jsx("td", { children: _jsx(Switch, { name: data.id, onChange: onSelect, value: isSelected }) })) : null, columns.map((column) => (_jsx("td", { className: componentClassNames?.cell, children: data.row[column.id] }, column.id))), data.actions ? (_jsx("td", { children: _jsx(ListItemMenu, { actions: data.actions, data: data.$data }) })) : null] }));
 }
 export default TableRow;

package/dist/components/collections/interfaces.d.ts

@@ -29,11 +29,16 @@ export interface ListItemObject<Data extends object | null = null> {
     variant?: StyleVariant | null;
 }
 export type TableFunctionConfig<Filters = null> = CollectionFunctionConfig<Filters>;
-export interface TableItemObject {
-    [key: string]: React.ReactNode;
+export interface TableItemObject<Data extends object | null = null> {
+    $data?: Data;
+    actions?: ActionObject<Data>[];
     id: string;
+    isSelectable?: boolean;
+    row: {
+        [key: string]: React.ReactNode;
+    };
 }
-export type TableColumnType = 'date' | 'decimal' | 'id' | 'link' | 'money' | 'number' | 'percentage' | 'reference' | 'selectable' | 'string';
+export type TableColumnType = 'date' | 'decimal' | 'link' | 'money' | 'number' | 'percentage' | 'points' | 'raw' | 'reference' | 'string';
 export interface TableColumnObject {
     isSortable?: boolean;
     id: string;

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.19",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
@@ -48,7 +48,7 @@
     "react-dom": "^19.2.1",
     "tailwind-merge": "^3.4.0",
     "use-deep-compare-effect": "^1.8.1",
-    "@sqrzro/utility": "^4.0.0-alpha.6"
+    "@sqrzro/utility": "^4.0.0-alpha.7"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.1.7",

package/dist/components/collections/utility/filter-columns.d.ts

@@ -1,3 +0,0 @@
-import type { TableColumnObject } from '../interfaces';
-declare function filterColumns(columns: TableColumnObject[], isSelectable?: boolean): TableColumnObject[];
-export default filterColumns;

package/dist/components/collections/utility/filter-columns.js

@@ -1,8 +0,0 @@
-function filterColumns(columns, isSelectable) {
-    const filtered = columns.filter((column) => column.type !== 'id');
-    if (isSelectable) {
-        return [{ id: 'select', type: 'selectable' }, ...filtered];
-    }
-    return filtered;
-}
-export default filterColumns;