@compill/admin 1.0.84 → 1.0.86

package/index.cjs.js

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('@soperio/jsx-runtime');
+var api = require('@compill/api');
+var components = require('@compill/components');
 var ui = require('@valerya/ui');
 var Link = require('next/link');
+var reactRouterDom = require('react-router-dom');
 var React = require('react');
 var adminApi = require('@compill/admin-api');
-var api = require('@compill/api');
 var formik = require('formik');
-var reactRouterDom = require('react-router-dom');
 var admin = require('@compill/admin');
 var reactToastify = require('react-toastify');
 require('react/jsx-runtime');
-var components = require('@compill/components');
 var form = require('@compill/form');
 var react = require('@soperio/react');
 var formEditor = require('@compill/form-editor');
@@ -111,11 +111,309 @@ var mdiPublish = "M5,4V6H19V4H5M5,14H9V20H15V14H19L12,7L5,14Z";
 var mdiPublishOff = "M20.8 22.7L15 16.9V20H9V14H5L8.6 10.4L1.1 3L2.4 1.7L22.1 21.4L20.8 22.7M19 6V4H7.2L9.2 6H19M17.2 14H19L12 7L11.1 7.9L17.2 14Z";
 var mdiRefresh = "M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z";
 
+function noop() { }
+
+function isPlainObject(value) {
+    if (!value || typeof value !== 'object') {
+        return false;
+    }
+    const proto = Object.getPrototypeOf(value);
+    const hasObjectPrototype = proto === null ||
+        proto === Object.prototype ||
+        Object.getPrototypeOf(proto) === null;
+    if (!hasObjectPrototype) {
+        return false;
+    }
+    return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+function getSymbols(object) {
+    return Object.getOwnPropertySymbols(object).filter(symbol => Object.prototype.propertyIsEnumerable.call(object, symbol));
+}
+
+function getTag(value) {
+    if (value == null) {
+        return value === undefined ? '[object Undefined]' : '[object Null]';
+    }
+    return Object.prototype.toString.call(value);
+}
+
+const regexpTag = '[object RegExp]';
+const stringTag = '[object String]';
+const numberTag = '[object Number]';
+const booleanTag = '[object Boolean]';
+const argumentsTag = '[object Arguments]';
+const symbolTag = '[object Symbol]';
+const dateTag = '[object Date]';
+const mapTag = '[object Map]';
+const setTag = '[object Set]';
+const arrayTag = '[object Array]';
+const functionTag = '[object Function]';
+const arrayBufferTag = '[object ArrayBuffer]';
+const objectTag = '[object Object]';
+const errorTag = '[object Error]';
+const dataViewTag = '[object DataView]';
+const uint8ArrayTag = '[object Uint8Array]';
+const uint8ClampedArrayTag = '[object Uint8ClampedArray]';
+const uint16ArrayTag = '[object Uint16Array]';
+const uint32ArrayTag = '[object Uint32Array]';
+const bigUint64ArrayTag = '[object BigUint64Array]';
+const int8ArrayTag = '[object Int8Array]';
+const int16ArrayTag = '[object Int16Array]';
+const int32ArrayTag = '[object Int32Array]';
+const bigInt64ArrayTag = '[object BigInt64Array]';
+const float32ArrayTag = '[object Float32Array]';
+const float64ArrayTag = '[object Float64Array]';
+
+function eq(value, other) {
+    return value === other || (Number.isNaN(value) && Number.isNaN(other));
+}
+
+function isEqualWith(a, b, areValuesEqual) {
+    return isEqualWithImpl(a, b, undefined, undefined, undefined, undefined, areValuesEqual);
+}
+function isEqualWithImpl(a, b, property, aParent, bParent, stack, areValuesEqual) {
+    const result = areValuesEqual(a, b, property, aParent, bParent, stack);
+    if (result !== undefined) {
+        return result;
+    }
+    if (typeof a === typeof b) {
+        switch (typeof a) {
+            case 'bigint':
+            case 'string':
+            case 'boolean':
+            case 'symbol':
+            case 'undefined': {
+                return a === b;
+            }
+            case 'number': {
+                return a === b || Object.is(a, b);
+            }
+            case 'function': {
+                return a === b;
+            }
+            case 'object': {
+                return areObjectsEqual(a, b, stack, areValuesEqual);
+            }
+        }
+    }
+    return areObjectsEqual(a, b, stack, areValuesEqual);
+}
+function areObjectsEqual(a, b, stack, areValuesEqual) {
+    if (Object.is(a, b)) {
+        return true;
+    }
+    let aTag = getTag(a);
+    let bTag = getTag(b);
+    if (aTag === argumentsTag) {
+        aTag = objectTag;
+    }
+    if (bTag === argumentsTag) {
+        bTag = objectTag;
+    }
+    if (aTag !== bTag) {
+        return false;
+    }
+    switch (aTag) {
+        case stringTag:
+            return a.toString() === b.toString();
+        case numberTag: {
+            const x = a.valueOf();
+            const y = b.valueOf();
+            return eq(x, y);
+        }
+        case booleanTag:
+        case dateTag:
+        case symbolTag:
+            return Object.is(a.valueOf(), b.valueOf());
+        case regexpTag: {
+            return a.source === b.source && a.flags === b.flags;
+        }
+        case functionTag: {
+            return a === b;
+        }
+    }
+    stack = stack ?? new Map();
+    const aStack = stack.get(a);
+    const bStack = stack.get(b);
+    if (aStack != null && bStack != null) {
+        return aStack === b;
+    }
+    stack.set(a, b);
+    stack.set(b, a);
+    try {
+        switch (aTag) {
+            case mapTag: {
+                if (a.size !== b.size) {
+                    return false;
+                }
+                for (const [key, value] of a.entries()) {
+                    if (!b.has(key) || !isEqualWithImpl(value, b.get(key), key, a, b, stack, areValuesEqual)) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            case setTag: {
+                if (a.size !== b.size) {
+                    return false;
+                }
+                const aValues = Array.from(a.values());
+                const bValues = Array.from(b.values());
+                for (let i = 0; i < aValues.length; i++) {
+                    const aValue = aValues[i];
+                    const index = bValues.findIndex(bValue => {
+                        return isEqualWithImpl(aValue, bValue, undefined, a, b, stack, areValuesEqual);
+                    });
+                    if (index === -1) {
+                        return false;
+                    }
+                    bValues.splice(index, 1);
+                }
+                return true;
+            }
+            case arrayTag:
+            case uint8ArrayTag:
+            case uint8ClampedArrayTag:
+            case uint16ArrayTag:
+            case uint32ArrayTag:
+            case bigUint64ArrayTag:
+            case int8ArrayTag:
+            case int16ArrayTag:
+            case int32ArrayTag:
+            case bigInt64ArrayTag:
+            case float32ArrayTag:
+            case float64ArrayTag: {
+                if (typeof Buffer !== 'undefined' && Buffer.isBuffer(a) !== Buffer.isBuffer(b)) {
+                    return false;
+                }
+                if (a.length !== b.length) {
+                    return false;
+                }
+                for (let i = 0; i < a.length; i++) {
+                    if (!isEqualWithImpl(a[i], b[i], i, a, b, stack, areValuesEqual)) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            case arrayBufferTag: {
+                if (a.byteLength !== b.byteLength) {
+                    return false;
+                }
+                return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
+            }
+            case dataViewTag: {
+                if (a.byteLength !== b.byteLength || a.byteOffset !== b.byteOffset) {
+                    return false;
+                }
+                return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
+            }
+            case errorTag: {
+                return a.name === b.name && a.message === b.message;
+            }
+            case objectTag: {
+                const areEqualInstances = areObjectsEqual(a.constructor, b.constructor, stack, areValuesEqual) ||
+                    (isPlainObject(a) && isPlainObject(b));
+                if (!areEqualInstances) {
+                    return false;
+                }
+                const aKeys = [...Object.keys(a), ...getSymbols(a)];
+                const bKeys = [...Object.keys(b), ...getSymbols(b)];
+                if (aKeys.length !== bKeys.length) {
+                    return false;
+                }
+                for (let i = 0; i < aKeys.length; i++) {
+                    const propKey = aKeys[i];
+                    const aProp = a[propKey];
+                    if (!Object.hasOwn(b, propKey)) {
+                        return false;
+                    }
+                    const bProp = b[propKey];
+                    if (!isEqualWithImpl(aProp, bProp, propKey, a, b, stack, areValuesEqual)) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            default: {
+                return false;
+            }
+        }
+    }
+    finally {
+        stack.delete(a);
+        stack.delete(b);
+    }
+}
+
+function isEqual(a, b) {
+    return isEqualWith(a, b, noop);
+}
+
+function capitalize(str) {
+    return (str.charAt(0).toUpperCase() + str.slice(1).toLowerCase());
+}
+
+function isArray(value) {
+    return Array.isArray(value);
+}
+
 function Breadcrumbs(_a) {
   var {
       breadcrumbs
     } = _a,
     props = __rest(_a, ["breadcrumbs"]);
+  if (isArray(breadcrumbs)) {
+    return jsxRuntime.jsx("div", Object.assign({
+      dflex: true,
+      alignItems: "center",
+      placeContent: "center",
+      trait: "typo.h5"
+    }, props, {
+      children: breadcrumbs.map((b, index) => jsxRuntime.jsx(BreadcrumbItem, {
+        breadcrumb: b,
+        showSeparator: index > 0
+      }, index))
+    }));
+  }
+  return jsxRuntime.jsx(QueryBreadcrumbs, {
+    queryFn: breadcrumbs.queryFn,
+    queryField: breadcrumbs.queryField,
+    generate: breadcrumbs.generate
+  });
+}
+function QueryBreadcrumbs(_a) {
+  var {
+      queryFn,
+      queryField,
+      generate
+    } = _a,
+    props = __rest(_a, ["queryFn", "queryField", "generate"]);
+  const params = reactRouterDom.useParams();
+  const id = queryField ? params[queryField] : undefined;
+  const {
+    data,
+    isLoading,
+    isError
+  } = api.useApiQuery([""], queryFn, id);
+  if (isLoading || isError) {
+    return jsxRuntime.jsxs("div", {
+      dflex: true,
+      alignItems: "center",
+      children: [jsxRuntime.jsx(components.Shimmer, {
+        h: "8",
+        w: "24"
+      }), jsxRuntime.jsx(ui.Icon, {
+        path: mdiCircleSmall,
+        mx: "1"
+      }), jsxRuntime.jsx(components.Shimmer, {
+        h: "8",
+        w: "20"
+      })]
+    });
+  }
+  const breadcrumbs = generate(data);
   return jsxRuntime.jsx("div", Object.assign({
     dflex: true,
     alignItems: "center",
@@ -1488,9 +1786,10 @@ function TableFilterButton(_a) {
 function TableTopBar(_a) {
   var {
       title,
+      breadcrumbs,
       children
     } = _a,
-    props = __rest(_a, ["title", "children"]);
+    props = __rest(_a, ["title", "breadcrumbs", "children"]);
   return jsxRuntime.jsxs("div", Object.assign({
     dflex: true,
     flexRow: true,
@@ -1498,12 +1797,16 @@ function TableTopBar(_a) {
     gap: "3",
     p: "8"
   }, props, {
-    children: [title && jsxRuntime.jsx("h2", {
-      textSize: "x2",
-      fontWeight: "600",
-      textColor: "#3f4254",
-      textTransform: "capitalize",
-      children: title
+    children: [jsxRuntime.jsxs("div", {
+      children: [title && jsxRuntime.jsx("h2", {
+        textSize: "x2",
+        fontWeight: "600",
+        textColor: "#3f4254",
+        textTransform: "capitalize",
+        children: title
+      }), breadcrumbs && jsxRuntime.jsx(admin.Breadcrumbs, {
+        breadcrumbs: breadcrumbs
+      })]
     }), jsxRuntime.jsx("div", {
       flexGrow: true,
       children: "\u00A0"
@@ -1543,250 +1846,6 @@ function sortBy(arr, criteria) {
     return orderBy(arr, criteria, ['asc']);
 }
 
-function noop() { }
-
-function getSymbols(object) {
-    return Object.getOwnPropertySymbols(object).filter(symbol => Object.prototype.propertyIsEnumerable.call(object, symbol));
-}
-
-function getTag(value) {
-    if (value == null) {
-        return value === undefined ? '[object Undefined]' : '[object Null]';
-    }
-    return Object.prototype.toString.call(value);
-}
-
-const regexpTag = '[object RegExp]';
-const stringTag = '[object String]';
-const numberTag = '[object Number]';
-const booleanTag = '[object Boolean]';
-const argumentsTag = '[object Arguments]';
-const symbolTag = '[object Symbol]';
-const dateTag = '[object Date]';
-const mapTag = '[object Map]';
-const setTag = '[object Set]';
-const arrayTag = '[object Array]';
-const functionTag = '[object Function]';
-const arrayBufferTag = '[object ArrayBuffer]';
-const objectTag = '[object Object]';
-const errorTag = '[object Error]';
-const dataViewTag = '[object DataView]';
-const uint8ArrayTag = '[object Uint8Array]';
-const uint8ClampedArrayTag = '[object Uint8ClampedArray]';
-const uint16ArrayTag = '[object Uint16Array]';
-const uint32ArrayTag = '[object Uint32Array]';
-const bigUint64ArrayTag = '[object BigUint64Array]';
-const int8ArrayTag = '[object Int8Array]';
-const int16ArrayTag = '[object Int16Array]';
-const int32ArrayTag = '[object Int32Array]';
-const bigInt64ArrayTag = '[object BigInt64Array]';
-const float32ArrayTag = '[object Float32Array]';
-const float64ArrayTag = '[object Float64Array]';
-
-function isPlainObject(value) {
-    if (!value || typeof value !== 'object') {
-        return false;
-    }
-    const proto = Object.getPrototypeOf(value);
-    const hasObjectPrototype = proto === null ||
-        proto === Object.prototype ||
-        Object.getPrototypeOf(proto) === null;
-    if (!hasObjectPrototype) {
-        return false;
-    }
-    return Object.prototype.toString.call(value) === '[object Object]';
-}
-
-function eq(value, other) {
-    return value === other || (Number.isNaN(value) && Number.isNaN(other));
-}
-
-function isEqualWith(a, b, areValuesEqual) {
-    return isEqualWithImpl(a, b, undefined, undefined, undefined, undefined, areValuesEqual);
-}
-function isEqualWithImpl(a, b, property, aParent, bParent, stack, areValuesEqual) {
-    const result = areValuesEqual(a, b, property, aParent, bParent, stack);
-    if (result !== undefined) {
-        return result;
-    }
-    if (typeof a === typeof b) {
-        switch (typeof a) {
-            case 'bigint':
-            case 'string':
-            case 'boolean':
-            case 'symbol':
-            case 'undefined': {
-                return a === b;
-            }
-            case 'number': {
-                return a === b || Object.is(a, b);
-            }
-            case 'function': {
-                return a === b;
-            }
-            case 'object': {
-                return areObjectsEqual(a, b, stack, areValuesEqual);
-            }
-        }
-    }
-    return areObjectsEqual(a, b, stack, areValuesEqual);
-}
-function areObjectsEqual(a, b, stack, areValuesEqual) {
-    if (Object.is(a, b)) {
-        return true;
-    }
-    let aTag = getTag(a);
-    let bTag = getTag(b);
-    if (aTag === argumentsTag) {
-        aTag = objectTag;
-    }
-    if (bTag === argumentsTag) {
-        bTag = objectTag;
-    }
-    if (aTag !== bTag) {
-        return false;
-    }
-    switch (aTag) {
-        case stringTag:
-            return a.toString() === b.toString();
-        case numberTag: {
-            const x = a.valueOf();
-            const y = b.valueOf();
-            return eq(x, y);
-        }
-        case booleanTag:
-        case dateTag:
-        case symbolTag:
-            return Object.is(a.valueOf(), b.valueOf());
-        case regexpTag: {
-            return a.source === b.source && a.flags === b.flags;
-        }
-        case functionTag: {
-            return a === b;
-        }
-    }
-    stack = stack ?? new Map();
-    const aStack = stack.get(a);
-    const bStack = stack.get(b);
-    if (aStack != null && bStack != null) {
-        return aStack === b;
-    }
-    stack.set(a, b);
-    stack.set(b, a);
-    try {
-        switch (aTag) {
-            case mapTag: {
-                if (a.size !== b.size) {
-                    return false;
-                }
-                for (const [key, value] of a.entries()) {
-                    if (!b.has(key) || !isEqualWithImpl(value, b.get(key), key, a, b, stack, areValuesEqual)) {
-                        return false;
-                    }
-                }
-                return true;
-            }
-            case setTag: {
-                if (a.size !== b.size) {
-                    return false;
-                }
-                const aValues = Array.from(a.values());
-                const bValues = Array.from(b.values());
-                for (let i = 0; i < aValues.length; i++) {
-                    const aValue = aValues[i];
-                    const index = bValues.findIndex(bValue => {
-                        return isEqualWithImpl(aValue, bValue, undefined, a, b, stack, areValuesEqual);
-                    });
-                    if (index === -1) {
-                        return false;
-                    }
-                    bValues.splice(index, 1);
-                }
-                return true;
-            }
-            case arrayTag:
-            case uint8ArrayTag:
-            case uint8ClampedArrayTag:
-            case uint16ArrayTag:
-            case uint32ArrayTag:
-            case bigUint64ArrayTag:
-            case int8ArrayTag:
-            case int16ArrayTag:
-            case int32ArrayTag:
-            case bigInt64ArrayTag:
-            case float32ArrayTag:
-            case float64ArrayTag: {
-                if (typeof Buffer !== 'undefined' && Buffer.isBuffer(a) !== Buffer.isBuffer(b)) {
-                    return false;
-                }
-                if (a.length !== b.length) {
-                    return false;
-                }
-                for (let i = 0; i < a.length; i++) {
-                    if (!isEqualWithImpl(a[i], b[i], i, a, b, stack, areValuesEqual)) {
-                        return false;
-                    }
-                }
-                return true;
-            }
-            case arrayBufferTag: {
-                if (a.byteLength !== b.byteLength) {
-                    return false;
-                }
-                return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
-            }
-            case dataViewTag: {
-                if (a.byteLength !== b.byteLength || a.byteOffset !== b.byteOffset) {
-                    return false;
-                }
-                return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
-            }
-            case errorTag: {
-                return a.name === b.name && a.message === b.message;
-            }
-            case objectTag: {
-                const areEqualInstances = areObjectsEqual(a.constructor, b.constructor, stack, areValuesEqual) ||
-                    (isPlainObject(a) && isPlainObject(b));
-                if (!areEqualInstances) {
-                    return false;
-                }
-                const aKeys = [...Object.keys(a), ...getSymbols(a)];
-                const bKeys = [...Object.keys(b), ...getSymbols(b)];
-                if (aKeys.length !== bKeys.length) {
-                    return false;
-                }
-                for (let i = 0; i < aKeys.length; i++) {
-                    const propKey = aKeys[i];
-                    const aProp = a[propKey];
-                    if (!Object.hasOwn(b, propKey)) {
-                        return false;
-                    }
-                    const bProp = b[propKey];
-                    if (!isEqualWithImpl(aProp, bProp, propKey, a, b, stack, areValuesEqual)) {
-                        return false;
-                    }
-                }
-                return true;
-            }
-            default: {
-                return false;
-            }
-        }
-    }
-    finally {
-        stack.delete(a);
-        stack.delete(b);
-    }
-}
-
-function isEqual(a, b) {
-    return isEqualWith(a, b, noop);
-}
-
-function capitalize(str) {
-    return (str.charAt(0).toUpperCase() + str.slice(1).toLowerCase());
-}
-
 function TableFilters({
   form: form$1,
   initialValues,
@@ -2615,10 +2674,9 @@ function TT({
   } = screen;
   const tableApi = react.runIfFn(api, id !== null && id !== void 0 ? id : "");
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [breadcrumbs && jsxRuntime.jsx(PageTopBar, {
-      breadcrumbs: breadcrumbs
-    }), jsxRuntime.jsx(TableTopBar, {
+    children: [jsxRuntime.jsx(TableTopBar, {
       title: title,
+      breadcrumbs: breadcrumbs,
       children: jsxRuntime.jsx(TableButtonBar, {
         buttonBar: buttonBar,
         createView: createView,

package/index.esm.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs, Fragment } from '@soperio/jsx-runtime';
+import { useApiQuery, useApiMutation, useMutate, useInvalidateMutation, useInvalidateQuery, useInvalidateParentMutation, useApiQueries } from '@compill/api';
+import { Shimmer, FlexCenter, QueryLoadingState, RetryOnError, TabContainer, ModalLoadingOverlay } from '@compill/components';
 import { Icon, Button, IconButton, Container, Tile, Popover, Collapse, Modal, Avatar, Popup, Checkbox, Badge } from '@valerya/ui';
 import Link from 'next/link';
+import { useParams, useNavigate, Outlet, useLocation, useMatch, Link as Link$1 } from 'react-router-dom';
 import React, { useRef, useCallback, useContext as useContext$2, useLayoutEffect, useEffect, createContext } from 'react';
 import { INVALIDATE_API, API } from '@compill/admin-api';
-import { useApiMutation, useMutate, useInvalidateMutation, useApiQuery, useInvalidateQuery, useInvalidateParentMutation, useApiQueries } from '@compill/api';
 import { useFormikContext, Formik, Form } from 'formik';
-import { useNavigate, useParams, Outlet, useLocation, useMatch, Link as Link$1 } from 'react-router-dom';
-import { ButtonBarButton as ButtonBarButton$1, ButtonBarSubmitButton as ButtonBarSubmitButton$1, PageSectionTitle as PageSectionTitle$1, ButtonBar as ButtonBar$1, ButtonBarDialogButton as ButtonBarDialogButton$1, TableRowActionButton as TableRowActionButton$1, DialogButton as DialogButton$1 } from '@compill/admin';
+import { ButtonBarButton as ButtonBarButton$1, ButtonBarSubmitButton as ButtonBarSubmitButton$1, PageSectionTitle as PageSectionTitle$1, ButtonBar as ButtonBar$1, ButtonBarDialogButton as ButtonBarDialogButton$1, Breadcrumbs as Breadcrumbs$1, TableRowActionButton as TableRowActionButton$1, DialogButton as DialogButton$1 } from '@compill/admin';
 import { toast } from 'react-toastify';
 import 'react/jsx-runtime';
-import { FlexCenter, QueryLoadingState, RetryOnError, TabContainer, ModalLoadingOverlay } from '@compill/components';
 import { FormProvider, TextArea, FormRenderer, mergeInitialFormValues, FieldLabel, SubmitButton } from '@compill/form';
 import { createContext as createContext$1, runIfFn, isFunction } from '@soperio/react';
 import { FormEditor } from '@compill/form-editor';
@@ -101,11 +101,309 @@ var mdiPublish = "M5,4V6H19V4H5M5,14H9V20H15V14H19L12,7L5,14Z";
 var mdiPublishOff = "M20.8 22.7L15 16.9V20H9V14H5L8.6 10.4L1.1 3L2.4 1.7L22.1 21.4L20.8 22.7M19 6V4H7.2L9.2 6H19M17.2 14H19L12 7L11.1 7.9L17.2 14Z";
 var mdiRefresh = "M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z";
 
+function noop() { }
+
+function isPlainObject(value) {
+    if (!value || typeof value !== 'object') {
+        return false;
+    }
+    const proto = Object.getPrototypeOf(value);
+    const hasObjectPrototype = proto === null ||
+        proto === Object.prototype ||
+        Object.getPrototypeOf(proto) === null;
+    if (!hasObjectPrototype) {
+        return false;
+    }
+    return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+function getSymbols(object) {
+    return Object.getOwnPropertySymbols(object).filter(symbol => Object.prototype.propertyIsEnumerable.call(object, symbol));
+}
+
+function getTag(value) {
+    if (value == null) {
+        return value === undefined ? '[object Undefined]' : '[object Null]';
+    }
+    return Object.prototype.toString.call(value);
+}
+
+const regexpTag = '[object RegExp]';
+const stringTag = '[object String]';
+const numberTag = '[object Number]';
+const booleanTag = '[object Boolean]';
+const argumentsTag = '[object Arguments]';
+const symbolTag = '[object Symbol]';
+const dateTag = '[object Date]';
+const mapTag = '[object Map]';
+const setTag = '[object Set]';
+const arrayTag = '[object Array]';
+const functionTag = '[object Function]';
+const arrayBufferTag = '[object ArrayBuffer]';
+const objectTag = '[object Object]';
+const errorTag = '[object Error]';
+const dataViewTag = '[object DataView]';
+const uint8ArrayTag = '[object Uint8Array]';
+const uint8ClampedArrayTag = '[object Uint8ClampedArray]';
+const uint16ArrayTag = '[object Uint16Array]';
+const uint32ArrayTag = '[object Uint32Array]';
+const bigUint64ArrayTag = '[object BigUint64Array]';
+const int8ArrayTag = '[object Int8Array]';
+const int16ArrayTag = '[object Int16Array]';
+const int32ArrayTag = '[object Int32Array]';
+const bigInt64ArrayTag = '[object BigInt64Array]';
+const float32ArrayTag = '[object Float32Array]';
+const float64ArrayTag = '[object Float64Array]';
+
+function eq(value, other) {
+    return value === other || (Number.isNaN(value) && Number.isNaN(other));
+}
+
+function isEqualWith(a, b, areValuesEqual) {
+    return isEqualWithImpl(a, b, undefined, undefined, undefined, undefined, areValuesEqual);
+}
+function isEqualWithImpl(a, b, property, aParent, bParent, stack, areValuesEqual) {
+    const result = areValuesEqual(a, b, property, aParent, bParent, stack);
+    if (result !== undefined) {
+        return result;
+    }
+    if (typeof a === typeof b) {
+        switch (typeof a) {
+            case 'bigint':
+            case 'string':
+            case 'boolean':
+            case 'symbol':
+            case 'undefined': {
+                return a === b;
+            }
+            case 'number': {
+                return a === b || Object.is(a, b);
+            }
+            case 'function': {
+                return a === b;
+            }
+            case 'object': {
+                return areObjectsEqual(a, b, stack, areValuesEqual);
+            }
+        }
+    }
+    return areObjectsEqual(a, b, stack, areValuesEqual);
+}
+function areObjectsEqual(a, b, stack, areValuesEqual) {
+    if (Object.is(a, b)) {
+        return true;
+    }
+    let aTag = getTag(a);
+    let bTag = getTag(b);
+    if (aTag === argumentsTag) {
+        aTag = objectTag;
+    }
+    if (bTag === argumentsTag) {
+        bTag = objectTag;
+    }
+    if (aTag !== bTag) {
+        return false;
+    }
+    switch (aTag) {
+        case stringTag:
+            return a.toString() === b.toString();
+        case numberTag: {
+            const x = a.valueOf();
+            const y = b.valueOf();
+            return eq(x, y);
+        }
+        case booleanTag:
+        case dateTag:
+        case symbolTag:
+            return Object.is(a.valueOf(), b.valueOf());
+        case regexpTag: {
+            return a.source === b.source && a.flags === b.flags;
+        }
+        case functionTag: {
+            return a === b;
+        }
+    }
+    stack = stack ?? new Map();
+    const aStack = stack.get(a);
+    const bStack = stack.get(b);
+    if (aStack != null && bStack != null) {
+        return aStack === b;
+    }
+    stack.set(a, b);
+    stack.set(b, a);
+    try {
+        switch (aTag) {
+            case mapTag: {
+                if (a.size !== b.size) {
+                    return false;
+                }
+                for (const [key, value] of a.entries()) {
+                    if (!b.has(key) || !isEqualWithImpl(value, b.get(key), key, a, b, stack, areValuesEqual)) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            case setTag: {
+                if (a.size !== b.size) {
+                    return false;
+                }
+                const aValues = Array.from(a.values());
+                const bValues = Array.from(b.values());
+                for (let i = 0; i < aValues.length; i++) {
+                    const aValue = aValues[i];
+                    const index = bValues.findIndex(bValue => {
+                        return isEqualWithImpl(aValue, bValue, undefined, a, b, stack, areValuesEqual);
+                    });
+                    if (index === -1) {
+                        return false;
+                    }
+                    bValues.splice(index, 1);
+                }
+                return true;
+            }
+            case arrayTag:
+            case uint8ArrayTag:
+            case uint8ClampedArrayTag:
+            case uint16ArrayTag:
+            case uint32ArrayTag:
+            case bigUint64ArrayTag:
+            case int8ArrayTag:
+            case int16ArrayTag:
+            case int32ArrayTag:
+            case bigInt64ArrayTag:
+            case float32ArrayTag:
+            case float64ArrayTag: {
+                if (typeof Buffer !== 'undefined' && Buffer.isBuffer(a) !== Buffer.isBuffer(b)) {
+                    return false;
+                }
+                if (a.length !== b.length) {
+                    return false;
+                }
+                for (let i = 0; i < a.length; i++) {
+                    if (!isEqualWithImpl(a[i], b[i], i, a, b, stack, areValuesEqual)) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            case arrayBufferTag: {
+                if (a.byteLength !== b.byteLength) {
+                    return false;
+                }
+                return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
+            }
+            case dataViewTag: {
+                if (a.byteLength !== b.byteLength || a.byteOffset !== b.byteOffset) {
+                    return false;
+                }
+                return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
+            }
+            case errorTag: {
+                return a.name === b.name && a.message === b.message;
+            }
+            case objectTag: {
+                const areEqualInstances = areObjectsEqual(a.constructor, b.constructor, stack, areValuesEqual) ||
+                    (isPlainObject(a) && isPlainObject(b));
+                if (!areEqualInstances) {
+                    return false;
+                }
+                const aKeys = [...Object.keys(a), ...getSymbols(a)];
+                const bKeys = [...Object.keys(b), ...getSymbols(b)];
+                if (aKeys.length !== bKeys.length) {
+                    return false;
+                }
+                for (let i = 0; i < aKeys.length; i++) {
+                    const propKey = aKeys[i];
+                    const aProp = a[propKey];
+                    if (!Object.hasOwn(b, propKey)) {
+                        return false;
+                    }
+                    const bProp = b[propKey];
+                    if (!isEqualWithImpl(aProp, bProp, propKey, a, b, stack, areValuesEqual)) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            default: {
+                return false;
+            }
+        }
+    }
+    finally {
+        stack.delete(a);
+        stack.delete(b);
+    }
+}
+
+function isEqual(a, b) {
+    return isEqualWith(a, b, noop);
+}
+
+function capitalize(str) {
+    return (str.charAt(0).toUpperCase() + str.slice(1).toLowerCase());
+}
+
+function isArray(value) {
+    return Array.isArray(value);
+}
+
 function Breadcrumbs(_a) {
   var {
       breadcrumbs
     } = _a,
     props = __rest(_a, ["breadcrumbs"]);
+  if (isArray(breadcrumbs)) {
+    return jsx("div", Object.assign({
+      dflex: true,
+      alignItems: "center",
+      placeContent: "center",
+      trait: "typo.h5"
+    }, props, {
+      children: breadcrumbs.map((b, index) => jsx(BreadcrumbItem, {
+        breadcrumb: b,
+        showSeparator: index > 0
+      }, index))
+    }));
+  }
+  return jsx(QueryBreadcrumbs, {
+    queryFn: breadcrumbs.queryFn,
+    queryField: breadcrumbs.queryField,
+    generate: breadcrumbs.generate
+  });
+}
+function QueryBreadcrumbs(_a) {
+  var {
+      queryFn,
+      queryField,
+      generate
+    } = _a,
+    props = __rest(_a, ["queryFn", "queryField", "generate"]);
+  const params = useParams();
+  const id = queryField ? params[queryField] : undefined;
+  const {
+    data,
+    isLoading,
+    isError
+  } = useApiQuery([""], queryFn, id);
+  if (isLoading || isError) {
+    return jsxs("div", {
+      dflex: true,
+      alignItems: "center",
+      children: [jsx(Shimmer, {
+        h: "8",
+        w: "24"
+      }), jsx(Icon, {
+        path: mdiCircleSmall,
+        mx: "1"
+      }), jsx(Shimmer, {
+        h: "8",
+        w: "20"
+      })]
+    });
+  }
+  const breadcrumbs = generate(data);
   return jsx("div", Object.assign({
     dflex: true,
     alignItems: "center",
@@ -1478,9 +1776,10 @@ function TableFilterButton(_a) {
 function TableTopBar(_a) {
   var {
       title,
+      breadcrumbs,
       children
     } = _a,
-    props = __rest(_a, ["title", "children"]);
+    props = __rest(_a, ["title", "breadcrumbs", "children"]);
   return jsxs("div", Object.assign({
     dflex: true,
     flexRow: true,
@@ -1488,12 +1787,16 @@ function TableTopBar(_a) {
     gap: "3",
     p: "8"
   }, props, {
-    children: [title && jsx("h2", {
-      textSize: "x2",
-      fontWeight: "600",
-      textColor: "#3f4254",
-      textTransform: "capitalize",
-      children: title
+    children: [jsxs("div", {
+      children: [title && jsx("h2", {
+        textSize: "x2",
+        fontWeight: "600",
+        textColor: "#3f4254",
+        textTransform: "capitalize",
+        children: title
+      }), breadcrumbs && jsx(Breadcrumbs$1, {
+        breadcrumbs: breadcrumbs
+      })]
     }), jsx("div", {
       flexGrow: true,
       children: "\u00A0"
@@ -1533,250 +1836,6 @@ function sortBy(arr, criteria) {
     return orderBy(arr, criteria, ['asc']);
 }
 
-function noop() { }
-
-function getSymbols(object) {
-    return Object.getOwnPropertySymbols(object).filter(symbol => Object.prototype.propertyIsEnumerable.call(object, symbol));
-}
-
-function getTag(value) {
-    if (value == null) {
-        return value === undefined ? '[object Undefined]' : '[object Null]';
-    }
-    return Object.prototype.toString.call(value);
-}
-
-const regexpTag = '[object RegExp]';
-const stringTag = '[object String]';
-const numberTag = '[object Number]';
-const booleanTag = '[object Boolean]';
-const argumentsTag = '[object Arguments]';
-const symbolTag = '[object Symbol]';
-const dateTag = '[object Date]';
-const mapTag = '[object Map]';
-const setTag = '[object Set]';
-const arrayTag = '[object Array]';
-const functionTag = '[object Function]';
-const arrayBufferTag = '[object ArrayBuffer]';
-const objectTag = '[object Object]';
-const errorTag = '[object Error]';
-const dataViewTag = '[object DataView]';
-const uint8ArrayTag = '[object Uint8Array]';
-const uint8ClampedArrayTag = '[object Uint8ClampedArray]';
-const uint16ArrayTag = '[object Uint16Array]';
-const uint32ArrayTag = '[object Uint32Array]';
-const bigUint64ArrayTag = '[object BigUint64Array]';
-const int8ArrayTag = '[object Int8Array]';
-const int16ArrayTag = '[object Int16Array]';
-const int32ArrayTag = '[object Int32Array]';
-const bigInt64ArrayTag = '[object BigInt64Array]';
-const float32ArrayTag = '[object Float32Array]';
-const float64ArrayTag = '[object Float64Array]';
-
-function isPlainObject(value) {
-    if (!value || typeof value !== 'object') {
-        return false;
-    }
-    const proto = Object.getPrototypeOf(value);
-    const hasObjectPrototype = proto === null ||
-        proto === Object.prototype ||
-        Object.getPrototypeOf(proto) === null;
-    if (!hasObjectPrototype) {
-        return false;
-    }
-    return Object.prototype.toString.call(value) === '[object Object]';
-}
-
-function eq(value, other) {
-    return value === other || (Number.isNaN(value) && Number.isNaN(other));
-}
-
-function isEqualWith(a, b, areValuesEqual) {
-    return isEqualWithImpl(a, b, undefined, undefined, undefined, undefined, areValuesEqual);
-}
-function isEqualWithImpl(a, b, property, aParent, bParent, stack, areValuesEqual) {
-    const result = areValuesEqual(a, b, property, aParent, bParent, stack);
-    if (result !== undefined) {
-        return result;
-    }
-    if (typeof a === typeof b) {
-        switch (typeof a) {
-            case 'bigint':
-            case 'string':
-            case 'boolean':
-            case 'symbol':
-            case 'undefined': {
-                return a === b;
-            }
-            case 'number': {
-                return a === b || Object.is(a, b);
-            }
-            case 'function': {
-                return a === b;
-            }
-            case 'object': {
-                return areObjectsEqual(a, b, stack, areValuesEqual);
-            }
-        }
-    }
-    return areObjectsEqual(a, b, stack, areValuesEqual);
-}
-function areObjectsEqual(a, b, stack, areValuesEqual) {
-    if (Object.is(a, b)) {
-        return true;
-    }
-    let aTag = getTag(a);
-    let bTag = getTag(b);
-    if (aTag === argumentsTag) {
-        aTag = objectTag;
-    }
-    if (bTag === argumentsTag) {
-        bTag = objectTag;
-    }
-    if (aTag !== bTag) {
-        return false;
-    }
-    switch (aTag) {
-        case stringTag:
-            return a.toString() === b.toString();
-        case numberTag: {
-            const x = a.valueOf();
-            const y = b.valueOf();
-            return eq(x, y);
-        }
-        case booleanTag:
-        case dateTag:
-        case symbolTag:
-            return Object.is(a.valueOf(), b.valueOf());
-        case regexpTag: {
-            return a.source === b.source && a.flags === b.flags;
-        }
-        case functionTag: {
-            return a === b;
-        }
-    }
-    stack = stack ?? new Map();
-    const aStack = stack.get(a);
-    const bStack = stack.get(b);
-    if (aStack != null && bStack != null) {
-        return aStack === b;
-    }
-    stack.set(a, b);
-    stack.set(b, a);
-    try {
-        switch (aTag) {
-            case mapTag: {
-                if (a.size !== b.size) {
-                    return false;
-                }
-                for (const [key, value] of a.entries()) {
-                    if (!b.has(key) || !isEqualWithImpl(value, b.get(key), key, a, b, stack, areValuesEqual)) {
-                        return false;
-                    }
-                }
-                return true;
-            }
-            case setTag: {
-                if (a.size !== b.size) {
-                    return false;
-                }
-                const aValues = Array.from(a.values());
-                const bValues = Array.from(b.values());
-                for (let i = 0; i < aValues.length; i++) {
-                    const aValue = aValues[i];
-                    const index = bValues.findIndex(bValue => {
-                        return isEqualWithImpl(aValue, bValue, undefined, a, b, stack, areValuesEqual);
-                    });
-                    if (index === -1) {
-                        return false;
-                    }
-                    bValues.splice(index, 1);
-                }
-                return true;
-            }
-            case arrayTag:
-            case uint8ArrayTag:
-            case uint8ClampedArrayTag:
-            case uint16ArrayTag:
-            case uint32ArrayTag:
-            case bigUint64ArrayTag:
-            case int8ArrayTag:
-            case int16ArrayTag:
-            case int32ArrayTag:
-            case bigInt64ArrayTag:
-            case float32ArrayTag:
-            case float64ArrayTag: {
-                if (typeof Buffer !== 'undefined' && Buffer.isBuffer(a) !== Buffer.isBuffer(b)) {
-                    return false;
-                }
-                if (a.length !== b.length) {
-                    return false;
-                }
-                for (let i = 0; i < a.length; i++) {
-                    if (!isEqualWithImpl(a[i], b[i], i, a, b, stack, areValuesEqual)) {
-                        return false;
-                    }
-                }
-                return true;
-            }
-            case arrayBufferTag: {
-                if (a.byteLength !== b.byteLength) {
-                    return false;
-                }
-                return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
-            }
-            case dataViewTag: {
-                if (a.byteLength !== b.byteLength || a.byteOffset !== b.byteOffset) {
-                    return false;
-                }
-                return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
-            }
-            case errorTag: {
-                return a.name === b.name && a.message === b.message;
-            }
-            case objectTag: {
-                const areEqualInstances = areObjectsEqual(a.constructor, b.constructor, stack, areValuesEqual) ||
-                    (isPlainObject(a) && isPlainObject(b));
-                if (!areEqualInstances) {
-                    return false;
-                }
-                const aKeys = [...Object.keys(a), ...getSymbols(a)];
-                const bKeys = [...Object.keys(b), ...getSymbols(b)];
-                if (aKeys.length !== bKeys.length) {
-                    return false;
-                }
-                for (let i = 0; i < aKeys.length; i++) {
-                    const propKey = aKeys[i];
-                    const aProp = a[propKey];
-                    if (!Object.hasOwn(b, propKey)) {
-                        return false;
-                    }
-                    const bProp = b[propKey];
-                    if (!isEqualWithImpl(aProp, bProp, propKey, a, b, stack, areValuesEqual)) {
-                        return false;
-                    }
-                }
-                return true;
-            }
-            default: {
-                return false;
-            }
-        }
-    }
-    finally {
-        stack.delete(a);
-        stack.delete(b);
-    }
-}
-
-function isEqual(a, b) {
-    return isEqualWith(a, b, noop);
-}
-
-function capitalize(str) {
-    return (str.charAt(0).toUpperCase() + str.slice(1).toLowerCase());
-}
-
 function TableFilters({
   form,
   initialValues,
@@ -2605,10 +2664,9 @@ function TT({
   } = screen;
   const tableApi = runIfFn(api, id !== null && id !== void 0 ? id : "");
   return jsxs(Fragment, {
-    children: [breadcrumbs && jsx(PageTopBar, {
-      breadcrumbs: breadcrumbs
-    }), jsx(TableTopBar, {
+    children: [jsx(TableTopBar, {
       title: title,
+      breadcrumbs: breadcrumbs,
       children: jsx(TableButtonBar, {
         buttonBar: buttonBar,
         createView: createView,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@compill/admin",
-    "version": "1.0.84",
+    "version": "1.0.86",
     "module": "./index.esm.js",
     "main": "./index.cjs.js"
 }

package/src/lib/breadcrumbs/BreadCrumbs.d.ts

@@ -4,6 +4,13 @@ export interface Breadcrumb {
     label: string;
     path?: string;
 }
-export declare function Breadcrumbs({ breadcrumbs, ...props }: {
-    breadcrumbs: Breadcrumb[];
-} & SoperioComponent): JSX.Element;
+interface BreadcrumbsProps extends SoperioComponent {
+    breadcrumbs: Breadcrumb[] | QueryBreadcrumbs;
+}
+export type QueryBreadcrumbs = {
+    queryFn: (...args: any) => Promise<any>;
+    queryField?: string;
+    generate: (results: any) => Breadcrumb[];
+};
+export declare function Breadcrumbs({ breadcrumbs, ...props }: BreadcrumbsProps): JSX.Element;
+export {};

package/src/lib/json/types/TableView.d.ts

@@ -3,7 +3,7 @@ import { API } from "@compill/admin-api";
 import { FormRendererConfig } from "@compill/form";
 import { TableProps } from "@compill/table";
 import { ButtonProps, ModalProps } from "@valerya/ui";
-import { Breadcrumb } from "../../breadcrumbs/BreadCrumbs";
+import { Breadcrumb, QueryBreadcrumbs } from "../../breadcrumbs/BreadCrumbs";
 import { ItemDeleteDialogProps } from "../dialog/ItemDeleteDialog";
 import { EditItemDialogConfig } from "./EditItemDialog";
 import { QueryWrapperDialogConfig } from "./QueryWrapperDialog";
@@ -11,7 +11,7 @@ import * as Yup from "yup";
 import { MutationQueryFn, MutationQueryKey } from "@compill/api";
 export type TableViewScreen = {
     api: API<any>;
-    breadcrumbs?: Breadcrumb[];
+    breadcrumbs?: Breadcrumb[] | QueryBreadcrumbs;
     buttonBar?: TableViewButtonConfig[];
     filters?: TableFilters;
     massActions?: TableMassActions;

package/src/lib/page/PageTopBar.d.ts

@@ -1,9 +1,9 @@
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 import React from "react";
-import { Breadcrumb } from "../breadcrumbs/BreadCrumbs";
+import { Breadcrumb, QueryBreadcrumbs } from "../breadcrumbs/BreadCrumbs";
 export interface PageTopBarProps extends SoperioComponent, ParentComponent {
     title?: string;
-    breadcrumbs?: Breadcrumb[];
+    breadcrumbs?: Breadcrumb[] | QueryBreadcrumbs;
 }
 export declare function PageTopBar({ title, breadcrumbs, children, ...props }: PageTopBarProps): JSX.Element;
 export declare function PageTabbedTopBarProvider({ children }: ParentComponent): JSX.Element;

package/src/lib/table/TableTopBar.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { Breadcrumb, QueryBreadcrumbs } from "@compill/admin";
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 interface TableTopBarProps extends SoperioComponent, ParentComponent {
     title?: string;
+    breadcrumbs?: Breadcrumb[] | QueryBreadcrumbs;
 }
-export declare function TableTopBar({ title, children, ...props }: TableTopBarProps): JSX.Element;
+export declare function TableTopBar({ title, breadcrumbs, children, ...props }: TableTopBarProps): JSX.Element;
 export {};