@sqrzro/admin 2.1.0-bz.22 → 2.1.0-bz.23

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import type { FilterObject } from '../FilterBar';
 import type { ListComponentProps } from '../ListComponent';
-export interface ListProps<Item extends object, Params> extends ListComponentProps<Item, Params> {
+export interface ListProps<Item extends object, Params> extends Omit<ListComponentProps<Item, Params>, 'actions'> {
+    actions: (data: Record<string, unknown>) => React.ReactNode;
     filters?: FilterObject[];
 }
 declare function List<Item extends object, Params>({ filters, hasSearch, ...props }: Readonly<ListProps<Item, Params>>): Promise<React.ReactElement>;

package/dist/components/List/index.js

@@ -3,10 +3,6 @@ import { Fragment, Suspense } from 'react';
 import { getLayout } from '../../services/SettingsService';
 import FilterBar from '../FilterBar';
 import ListComponent from '../ListComponent';
-const reservedSearchParams = ['action'];
-function checkHasFilters(searchParams) {
-    return Array.from(searchParams.entries()).some(([key, value]) => !reservedSearchParams.includes(key) && Boolean(value));
-}
 async function List({ filters, hasSearch, ...props }) {
     const layout = await getLayout();
     let searchParams; // eslint-disable-line @typescript-eslint/init-declarations

package/dist/components/ListActions/index.js

@@ -18,6 +18,6 @@ function ListActions({ actions, id }) {
         href: item.href ? parseHref(item.href, id) : undefined, // eslint-disable-line no-undefined
         onClick: () => handleClick(item),
     }));
-    return (_jsxs("div", { ref: ref, className: "relative h-5", children: [_jsx("button", { onClick: toggleIsOpen, type: "button", children: _jsx("svg", { "aria-hidden": "true", className: "h-5 w-5 fill-slate-500", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z" }) }) }), isOpen ? _jsx(Menu, { actions: transformedActions, align: "right" }) : null] }));
+    return (_jsxs("div", { ref: ref, className: "relative col-start-4 flex h-5 justify-end self-center pl-4", children: [_jsx("button", { onClick: toggleIsOpen, type: "button", children: _jsx("svg", { "aria-hidden": "true", className: "h-5 w-5 fill-slate-500", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z" }) }) }), isOpen ? _jsx(Menu, { actions: transformedActions, align: "right" }) : null] }));
 }
 export default ListActions;

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

@@ -1,15 +1,14 @@
 /// <reference types="react" />
 import type { EmptyMessageProps } from '@sqrzro/components';
-import type { ListAction } from '../ListActions';
 import type { ListObject } from '../ListItem';
-export interface ListClientComponentProps {
-    actions?: ListAction[];
+export interface ListClientComponentProps<Data = Record<string, unknown>> {
+    actions?: ListObject<Data>['actions'];
     columns?: number;
-    data: ListObject[];
+    data: ListObject<Data>[];
     emptyMessageProps?: EmptyMessageProps;
     hasFilters?: boolean;
     isMinimal?: boolean;
-    renderItem?: (props: ListObject) => JSX.Element;
+    renderItem?: (props: ListObject<Data>) => JSX.Element;
 }
-declare function ListClientComponent({ actions, columns, data, emptyMessageProps, hasFilters, isMinimal, renderItem, }: Readonly<ListClientComponentProps>): React.ReactElement;
+declare function ListClientComponent<Data = Record<string, unknown>>({ actions, columns, data, emptyMessageProps, hasFilters, isMinimal, renderItem, }: Readonly<ListClientComponentProps<Data>>): React.ReactElement;
 export default ListClientComponent;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { ListAction } from '../ListActions';
-export interface ListObject {
-    actions?: ListAction[] | ((id: string) => ListAction[]);
+export interface ListObject<Data = Record<string, unknown>> {
+    $data?: Data;
+    actions?: (data: Data) => React.ReactNode;
     description?: React.ReactNode | null;
     href?: string;
     id: string;
@@ -19,5 +19,5 @@ export interface ListObject {
     title?: React.ReactNode;
 }
 export declare function renderMeta(id: string, meta: ListObject['meta']): React.ReactElement | null;
-declare function ListItem({ actions, description, href, id, isMinimal, meta, secondary, tertiary, title, }: Readonly<ListObject>): React.ReactElement;
+declare function ListItem<Data = Record<string, unknown>>({ $data, actions, description, href, id, isMinimal, meta, secondary, tertiary, title, }: Readonly<ListObject<Data>>): React.ReactElement;
 export default ListItem;

package/dist/components/ListItem/index.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from 'react';
 import { Link, tw } from '@sqrzro/components';
 import { filterNull } from '@sqrzro/utility';
-import ListActions from '../ListActions';
 function getKey(item) {
     if (isValidElement(item)) {
         return item.key;
@@ -18,9 +17,9 @@ export function renderMeta(id, meta) {
     }
     return (_jsx("table", { className: "w-full text-xs", children: _jsx("tbody", { children: Object.entries(meta).map(([key, value]) => (_jsxs("tr", { className: "odd:bg-slate-100", children: [_jsx("th", { className: "p-2 font-semibold", children: key }), _jsx("td", { className: "p-2 text-right", children: value || '-' })] }, key))) }) }));
 }
-function ListItem({ actions, description, href, id, isMinimal, meta, secondary, tertiary, title, }) {
+function ListItem({ $data, actions, description, href, id, isMinimal, meta, secondary, tertiary, title, }) {
     return (_jsx("li", { children: _jsx("article", { className: tw('', isMinimal
                 ? 'border-b border-slate-200 pb-4'
-                : 'bg-panel rounded p-4 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)]'), "data-testid": `list-item-root--${id}`, children: _jsxs("div", { className: "grid grid-cols-[3fr_2fr_2fr_auto]", children: [_jsxs("div", { children: [title ? (_jsx("h2", { className: "text-base font-semibold", "data-testid": `list-item-title--${id}`, children: href ? _jsx(Link, { href: href, children: title }) : title })) : null, description, meta ? (_jsx("div", { className: tw(isMinimal ? 'mt-1' : 'mt-2 flex items-center justify-between'), children: meta ? renderMeta(id, meta) : null })) : null] }), tertiary ? (_jsx("div", { className: "flex h-full flex-col justify-center", children: tertiary })) : null, secondary ? (_jsxs("div", { className: "col-start-3 text-right", children: [secondary.title ? (_jsx("p", { className: "text-base font-semibold", children: secondary.title })) : null, secondary.description ? (_jsx("div", { className: "text-xs text-slate-500", children: secondary.description })) : null, secondary.meta ? (_jsx("ul", { className: "flex items-center justify-end gap-4 text-xs text-slate-500", children: filterNull(secondary.meta).map((item) => (_jsx("li", { children: item }, getKey(item)))) })) : null] })) : null, actions ? (_jsx("div", { className: "col-start-4 h-5 self-center pl-6", children: _jsx(ListActions, { actions: actions, id: id }) })) : null] }) }) }));
+                : 'bg-panel rounded p-4 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)]'), "data-testid": `list-item-root--${id}`, children: _jsxs("div", { className: "grid grid-cols-[3fr_2fr_2fr_auto]", children: [_jsxs("div", { children: [title ? (_jsx("h2", { className: "text-base font-semibold", "data-testid": `list-item-title--${id}`, children: href ? _jsx(Link, { href: href, children: title }) : title })) : null, description, meta ? (_jsx("div", { className: tw('mt-1', isMinimal ? '' : 'flex items-center justify-between'), children: meta ? renderMeta(id, meta) : null })) : null] }), tertiary ? (_jsx("div", { className: "flex h-full flex-col justify-center", children: tertiary })) : null, secondary ? (_jsxs("div", { className: "col-start-3 text-right", children: [secondary.title ? (_jsx("p", { className: "text-base font-semibold", children: secondary.title })) : null, secondary.description ? (_jsx("div", { className: "mt-1 text-xs text-slate-500", children: secondary.description })) : null, secondary.meta ? (_jsx("ul", { className: "mt-1 flex items-center justify-end gap-4 text-xs text-slate-500", children: filterNull(secondary.meta).map((item) => (_jsx("li", { children: item }, getKey(item)))) })) : null] })) : null, typeof actions === 'function' ? actions($data) : null] }) }) }));
 }
 export default ListItem;

package/dist/styles/config.js

@@ -91,7 +91,7 @@ const classNames = twx({
         field: tw(props?.isEditable ? 'flex min-h-10 flex-col justify-center' : ''),
         details: tw('text-xs font-normal text-slate-500', props?.isEditable ? 'col-start-2 row-start-2 mt-2' : 'mb-2'),
         optional: 'pl-2 text-xs font-normal leading-none text-slate-500',
-        error: tw('mt-2 flex items-center gap-1.5 text-red-600 before:h-4 before:w-4 before:rounded-full before:bg-[url(/admin/images/danger.svg)] before:bg-contain', props?.isEditable ? 'col-start-2' : ''),
+        error: tw('mt-2 flex items-start gap-1.5 text-red-600 before:mt-0.5 before:h-4 before:w-4 before:flex-none before:rounded-full before:bg-[url(/admin/images/danger.svg)] before:bg-contain', props?.isEditable ? 'col-start-2' : ''),
     }),
     imageInput: () => ({
         root: 'h-64 rounded border border-slate-300 bg-slate-50 p-8',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/admin",
   "type": "module",
-  "version": "2.1.0-bz.22",
+  "version": "2.1.0-bz.23",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",