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

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface ConfigNavigationObject {
+    href: string;
+    label: string;
+    permission?: string;
+}
+interface AppNavigationSubProps {
+    data: ConfigNavigationObject[];
+}
+declare function AppNavigationSub({ data }: Readonly<AppNavigationSubProps>): React.ReactElement;
+export default AppNavigationSub;

package/dist/components/AppNavigationSub/index.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import { Link } from '@sqrzro/components';
+function AppNavigationSub({ data }) {
+    const [isOpen, setIsOpen] = useState(false);
+    function toggleIsOpen() {
+        setIsOpen((prev) => !prev);
+    }
+    return (_jsxs(Fragment, { children: [_jsx("button", { onClick: toggleIsOpen, type: "button", children: "Open" }), isOpen ? (_jsx("ul", { children: data.map(({ href, label }) => (_jsx("li", { children: _jsx(Link, { href: href, children: label }) }, href))) })) : null] }));
+}
+export default AppNavigationSub;

package/dist/components/List/index.js

@@ -3,7 +3,6 @@ import { Fragment, Suspense } from 'react';
 import { getLayout } from '../../services/SettingsService';
 import FilterBar from '../FilterBar';
 import ListComponent from '../ListComponent';
-import ListSkeleton from '../ListSkeleton';
 const reservedSearchParams = ['action'];
 function checkHasFilters(searchParams) {
     return Array.from(searchParams.entries()).some(([key, value]) => !reservedSearchParams.includes(key) && Boolean(value));
@@ -18,6 +17,6 @@ async function List({ filters, hasSearch, ...props }) {
     catch (err) {
         searchParams = new URLSearchParams();
     }
-    return (_jsxs(Fragment, { children: [filters || hasSearch ? (_jsx(FilterBar, { hasSearch: hasSearch, layout: layout, map: filters })) : null, _jsx(Suspense, { fallback: _jsx(ListSkeleton, {}), children: _jsx(ListComponent, { ...props, searchParams: searchParams }) })] }));
+    return (_jsxs(Fragment, { children: [filters || hasSearch ? (_jsx(FilterBar, { hasSearch: hasSearch, layout: layout, map: filters })) : null, _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(ListComponent, { ...props, searchParams: searchParams }) })] }));
 }
 export default List;

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

@@ -4,7 +4,7 @@ export interface ListAction extends Omit<ConfirmableAction & LinkableAction, 'on
     onClick?: (id: string) => void;
 }
 export interface ListActionsProps {
-    actions: ListAction[];
+    actions?: ListAction[] | ((id: string) => ListAction[]);
     id: string;
 }
 declare function ListActions({ actions, id }: Readonly<ListActionsProps>): React.ReactElement;

package/dist/components/ListActions/index.js

@@ -2,6 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useClickOutside } from '@sqrzro/hooks';
 import Menu from '../Menu';
+function parseHref(href, id) {
+    return href.replace(':id', id);
+}
 function ListActions({ actions, id }) {
     const [isOpen, setIsOpen, ref] = useClickOutside();
     function handleClick(item) {
@@ -10,8 +13,9 @@ function ListActions({ actions, id }) {
     function toggleIsOpen() {
         setIsOpen(!isOpen);
     }
-    const transformedActions = actions.map((item) => ({
+    const transformedActions = (typeof actions === 'function' ? actions(id) : actions).map((item) => ({
         ...item,
+        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] }));

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { ListAction } from '../ListActions';
 export interface ListObject {
-    actions?: ListAction[];
+    actions?: ListAction[] | ((id: string) => ListAction[]);
     description?: React.ReactNode | null;
     href?: string;
     id: string;

package/dist/components/ListItem/index.js

@@ -19,8 +19,8 @@ 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, }) {
-    return (_jsx("li", { children: _jsx("article", { className: tw('@container', isMinimal
+    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: "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(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] }) }) }));
 }
 export default ListItem;

package/dist/components/MenuItem/index.js

@@ -8,7 +8,7 @@ const classMap = {
     success: 'text-green-700',
 };
 function MenuItem({ href, isConfirmable, label, onClick, variant, }) {
-    const classNames = tw('whitespace-nowrap p-2 px-3 text-sm text-slate-700', variant ? classMap[variant] : null);
+    const classNames = tw('block whitespace-nowrap p-2 px-3 text-sm text-slate-700', variant ? classMap[variant] : null);
     if (!href) {
         if (isConfirmable) {
             return (_jsx(ConfirmableButton, { classNames: { root: { default: classNames } }, onClick: onClick, type: "button", children: label }));

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { LinkableAction } from '@sqrzro/interfaces';
 export interface PanelProps {
-    action?: LinkableAction;
+    action?: LinkableAction | React.ReactElement;
     children: React.ReactNode;
     title?: string;
 }

package/dist/components/Panel/index.js

@@ -1,6 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@sqrzro/components';
+import { isValidElement } from 'react';
+function renderAction(action) {
+    if (typeof action === 'object' && 'href' in action && 'label' in action) {
+        return _jsx(Button, { href: action.href, children: action.label });
+    }
+    if (isValidElement(action)) {
+        return action;
+    }
+    return null;
+}
 function Panel({ action, children, title }) {
-    return (_jsxs("article", { className: "@container bg-panel relative rounded p-6 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)]", children: [title ? (_jsxs("header", { className: "mb-4 flex justify-between border-b border-slate-200", children: [_jsx("h3", { className: "pb-3 text-lg font-semibold leading-none", children: title }), action ? _jsx(Button, { href: action.href, children: action.label }) : null] })) : null, children] }));
+    return (_jsxs("article", { className: "@container bg-panel relative rounded p-6 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)]", children: [title ? (_jsxs("header", { className: "-mt-6 mb-4 flex h-16 items-center justify-between border-b border-slate-200", children: [_jsx("h3", { className: "text-lg font-semibold leading-none", children: title }), action ? renderAction(action) : null] })) : null, children] }));
 }
 export default Panel;

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
-export { Autocomplete, AutocompleteFormField, Button, CalendarInput, CheckboxInput, ConfirmableButton, ConfirmableForm, ContentFormField, DateFormField, DateInput, DefinitionList, Dropdown, DropdownFormField, EditableAutocompleteFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextAreaFormField, EditableTextFormField, EmptyMessage, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, LoadingModal, Modal, ModalActions, ModalForm, MoneyFormField, MoneyInput, MultiFormField, NumberFormField, NumberInput, ObjectFormField, RadioInput, Switch, SwitchFormField, TextArea, TextAreaFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
+export { Autocomplete, AutocompleteFormField, Button, CalendarInput, CheckboxInput, ConfirmableButton, ConfirmableForm, ContentFormField, DateFormField, DateInput, DefinitionList, Dropdown, DropdownFormField, EditableAutocompleteFormField, EditableContentFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextAreaFormField, EditableTextFormField, EmptyMessage, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, LoadingModal, Modal, ModalActions, ModalForm, MoneyFormField, MoneyInput, MultiFormField, NumberFormField, NumberInput, ObjectFormField, RadioInput, Switch, SwitchFormField, TextArea, TextAreaFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
 export type { DropdownItem, EditableFormFieldProps, FormFieldProps, LinkProps, NumberInputProps, } from '@sqrzro/components';
 export type { AppLayoutProps } from './AppLayout';
 export { default as AppLayout } from './AppLayout';

package/dist/components/index.js

@@ -1,5 +1,5 @@
 // Exported from @sqrzro/components
-export { Autocomplete, AutocompleteFormField, Button, CalendarInput, CheckboxInput, ConfirmableButton, ConfirmableForm, ContentFormField, DateFormField, DateInput, DefinitionList, Dropdown, DropdownFormField, EditableAutocompleteFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextAreaFormField, EditableTextFormField, EmptyMessage, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, LoadingModal, Modal, ModalActions, ModalForm, MoneyFormField, MoneyInput, MultiFormField, NumberFormField, NumberInput, ObjectFormField, RadioInput, Switch, SwitchFormField, TextArea, TextAreaFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
+export { Autocomplete, AutocompleteFormField, Button, CalendarInput, CheckboxInput, ConfirmableButton, ConfirmableForm, ContentFormField, DateFormField, DateInput, DefinitionList, Dropdown, DropdownFormField, EditableAutocompleteFormField, EditableContentFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextAreaFormField, EditableTextFormField, EmptyMessage, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, LoadingModal, Modal, ModalActions, ModalForm, MoneyFormField, MoneyInput, MultiFormField, NumberFormField, NumberInput, ObjectFormField, RadioInput, Switch, SwitchFormField, TextArea, TextAreaFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
 export { default as AppLayout } from './AppLayout';
 export { default as Badge } from './Badge';
 export { default as Dashboard } from './Dashboard';

package/dist/styles/config.js

@@ -172,6 +172,9 @@ const classNames = twx({
         prefix: {
             default: 'peer-focus:border-primary relative -mr-1 rounded-l border border-slate-300 bg-white px-3 text-sm text-slate-600',
         },
+        suffix: {
+            default: 'peer-focus:border-primary relative -ml-1 rounded-r border border-slate-300 bg-white px-3 text-sm text-slate-600',
+        },
     }),
     toast: () => ({
         root: {

package/dist/styles/tailwind.d.ts

@@ -6,5 +6,5 @@ interface Theme {
         primary: string;
     }>;
 }
-declare function config(resolves: string[], customization: Theme, plugins: unknown[]): Record<string, unknown>;
+declare function config(resolves: string[], customization: Theme, plugins?: unknown[]): Record<string, unknown>;
 export default config;

package/dist/styles/tailwind.js

@@ -24,7 +24,7 @@ function config(resolves, customization, plugins) {
             },
         },
         plugins: [
-            ...plugins,
+            ...(plugins || []),
             plugin(({ addBase, addUtilities, theme }) => {
                 addBase({
                     body: {

package/package.json

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