@inventreedb/ui 0.11.3 → 1.4.0

package/dist/types/Tables.d.ts

@@ -64,7 +64,7 @@ export type TableState = {
  */
 export type TableColumnProps<T = any> = {
     accessor?: string;
-    title?: string;
+    title?: string | ReactNode;
     ordering?: string;
     sortable?: boolean;
     switchable?: boolean;
@@ -131,6 +131,7 @@ export type RowViewProps = RowAction & RowModelProps;
  * @param barcodeActions : any[] - List of barcode actions
  * @param tableFilters : TableFilter[] - List of custom filters
  * @param tableActions : any[] - List of custom action groups
+ * @param isRecordSelectable : (record: any, index: number) => boolean - Callback function to determine if a row is selectable
  * @param detailAction: boolean - Enable detail action for each row (default = true)
  * @param dataFormatter : (data: any) => any - Callback function to reformat data returned by server (if not in default format)
  * @param rowActions : (record: any) => RowAction[] - Callback function to generate row actions
@@ -161,6 +162,7 @@ export type InvenTreeTableProps<T = any> = {
     barcodeActions?: React.ReactNode[];
     tableFilters?: TableFilter[];
     tableActions?: React.ReactNode[];
+    isRecordSelectable?: (record: T, index: number) => boolean;
     rowExpansion?: DataTableRowExpansionProps<T>;
     dataFormatter?: (data: any) => any;
     rowActions?: (record: T) => RowAction[];

package/lib/components/RowActions.tsx

@@ -139,8 +139,8 @@ export function RowActions({
               aria-label={`row-action-menu-${index ?? ''}`}
               onClick={openMenu}
               disabled={disabled}
-              variant='subtle'
-              color='gray'
+              variant='transparent'
+              size='sm'
             >
               <IconDots />
             </ActionIcon>

package/lib/components/nav/DetailDrawer.tsx

@@ -26,7 +26,7 @@ export interface DrawerProps {
   closeOnEscape?: boolean;
 }
 
-function DetailDrawerComponent({
+export function DetailDrawerComponent({
   title,
   position = 'right',
   size,

package/lib/enums/ModelInformation.tsx

@@ -186,6 +186,7 @@ export const ModelInformationDict: ModelDict = {
     label_multiple: () => t`Sales Order Shipments`,
     url_overview: '/sales/index/shipments',
     url_detail: '/sales/shipment/:pk/',
+    admin_url: '/order/salesordershipment/',
     api_endpoint: ApiEndpoints.sales_order_shipment_list,
     supports_barcode: true,
     icon: 'shipment'

package/lib/hooks/UseFilterSet.tsx

@@ -1,5 +1,5 @@
 import { useLocalStorage } from '@mantine/hooks';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import type { FilterSetState, TableFilter } from '../types/Filters';
 
 export default function useFilterSet(
@@ -16,15 +16,15 @@ export default function useFilterSet(
     getInitialValueInEffect: false
   });
 
-  const activeFilters: TableFilter[] = useMemo(() => {
+  useEffect(() => {
     if (storedFilters == null) {
-      // If there are no stored filters, set initial values
-      const filters = initialFilters || [];
-      setStoredFilters(filters);
-      return filters;
+      setStoredFilters(initialFilters || []);
     }
-    return storedFilters || [];
-  }, [storedFilters]);
+  }, [storedFilters, initialFilters, setStoredFilters]);
+
+  const activeFilters: TableFilter[] = useMemo(() => {
+    return storedFilters ?? initialFilters ?? [];
+  }, [storedFilters, initialFilters]);
 
   // Callback to clear all active filters from the table
   const clearActiveFilters = useCallback(() => {

package/lib/index.ts

@@ -21,6 +21,12 @@ export type {
   StockAdjustmentFormsContext
 } from './types/Plugins';
 
+export type {
+  PanelIndicatorType,
+  PanelType,
+  PanelGroupType
+} from './types/Panel';
+
 export type {
   RowAction,
   RowViewProps,
@@ -135,7 +141,8 @@ export {
 export {
   type DrawerProps,
   DetailDrawer,
-  DetailDrawerLink
+  DetailDrawerLink,
+  DetailDrawerComponent
 } from './components/nav/DetailDrawer';
 export { StylishText } from './components/StylishText';
 
@@ -144,3 +151,4 @@ export {
   type StoredTableStateProps,
   useStoredTableState
 } from './states/StoredTableState';
+export { useLocalLibState } from './states/LocalLibState';

package/lib/states/types.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { InstanceRenderInterface } from '../types/Rendering';
+
+export type setRenderProps = (
+  model: string,
+  renderer: (props: Readonly<InstanceRenderInterface>) => ReactNode
+) => void;

package/lib/types/Forms.tsx

@@ -45,6 +45,7 @@ export type ApiFormFieldHeader = {
  * @param api_url : The API endpoint to fetch data from (for related fields)
  * @param pk_field : The primary key field for the related field (default = "pk")
  * @param model : The model to use for related fields
+ * @param custom_model : Optional custom model name (plugins may register renderers for custom models)
  * @param modelRenderer : Optional function to render the related model instance (for related fields)
  * @param filters : Optional API filters to apply to related fields
  * @param child: Optional definition of a child field (for nested objects)
@@ -101,6 +102,7 @@ export type ApiFormFieldType = {
   api_url?: string;
   pk_field?: string;
   model?: ModelType;
+  custom_model?: string;
   modelRenderer?: (instance: any) => ReactNode;
   filters?: any;
   child?: ApiFormFieldType;

package/lib/types/Panel.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+
+// The type of indicator dot to be shown against a panel
+export type PanelIndicatorType = 'info' | 'warning' | 'danger' | null;
+
+/**
+ * Type used to specify a single panel in a panel group
+ */
+export type PanelType = {
+  name: string;
+  label: string;
+  controls?: ReactNode;
+  icon?: ReactNode;
+  notification_dot?: PanelIndicatorType | (() => Promise<PanelIndicatorType>);
+  content?: ReactNode;
+  hidden?: boolean;
+  disabled?: boolean;
+  showHeadline?: boolean;
+  supportsDirty?: boolean;
+};
+
+/**
+ * Type used to specify a group of panels
+ */
+export type PanelGroupType = {
+  id: string;
+  label: string;
+  panelIDs?: string[];
+  panels?: PanelType[];
+};

package/lib/types/Plugins.tsx

@@ -2,16 +2,24 @@ import type { I18n } from '@lingui/core';
 import type { MantineColorScheme, MantineTheme } from '@mantine/core';
 import type { QueryClient } from '@tanstack/react-query';
 import type { AxiosInstance } from 'axios';
+import type { JSX } from 'react';
 import type { NavigateFunction } from 'react-router-dom';
 import type { ModelDict } from '../enums/ModelInformation';
 import type { ModelType } from '../enums/ModelType';
+import type { setRenderProps } from '../states/types';
 import type {
   ApiFormModalProps,
+  ApiFormProps,
   BulkEditApiFormModalProps,
   StockOperationProps
 } from './Forms';
 import type { UseModalReturn } from './Modals';
-import type { RenderInstanceProps } from './Rendering';
+import type {
+  RemoteInstanceProps,
+  RenderInlineModelProps,
+  RenderInstanceProps,
+  ThumbnailProps
+} from './Rendering';
 import type { SettingsStateProps } from './Settings';
 import type { InvenTreeTableRenderProps } from './Tables';
 import type { UserStateProps } from './User';
@@ -46,6 +54,7 @@ export type InvenTreeFormsContext = {
   create: (props: ApiFormModalProps) => UseModalReturn;
   delete: (props: ApiFormModalProps) => UseModalReturn;
   edit: (props: ApiFormModalProps) => UseModalReturn;
+  editApiForm: (props: { id?: string; props: ApiFormProps }) => React.ReactNode;
   stockActions: StockAdjustmentFormsContext;
 };
 
@@ -97,6 +106,13 @@ export type InvenTreePluginContext = {
   globalSettings: SettingsStateProps;
   modelInformation: ModelDict;
   renderInstance: (props: Readonly<RenderInstanceProps>) => React.ReactNode;
+  renderRemoteInstance: (
+    props: Readonly<RemoteInstanceProps>
+  ) => React.ReactNode;
+  renderInlineModel: (
+    props: Readonly<RenderInlineModelProps>
+  ) => React.ReactNode;
+  thumbnail: (props: Readonly<ThumbnailProps>) => JSX.Element;
   host: string;
   i18n: I18n;
   locale: string;
@@ -104,6 +120,9 @@ export type InvenTreePluginContext = {
   theme: MantineTheme;
   colorScheme: MantineColorScheme;
   forms: InvenTreeFormsContext;
+  stateFnc: {
+    setRenderer: setRenderProps;
+  };
   tables: InvenTreeTablesContext<any>;
   importer: ImporterDrawerContext;
   model?: ModelType | string;

package/lib/types/Rendering.tsx

@@ -1,4 +1,11 @@
+import type {
+  QueryObserverResult,
+  UseQueryResult
+} from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import type { ApiEndpoints } from '..';
 import type { ModelType } from '../enums/ModelType';
+import type { PathParams } from './Core';
 
 /**
  * Interface for rendering a model instance.
@@ -22,4 +29,57 @@ export type ModelRendererDict = EnumDictionary<
 
 export type RenderInstanceProps = {
   model: ModelType | undefined;
+  custom_model?: string;
 } & InstanceRenderInterface;
+
+export interface UseInstanceResult {
+  instance: any;
+  setInstance: (instance: any) => void;
+  refreshInstance: () => void;
+  refreshInstancePromise: () => Promise<QueryObserverResult<any, any>>;
+  instanceQuery: UseQueryResult;
+  isLoaded: boolean;
+}
+
+export interface useInstanceProps {
+  endpoint: ApiEndpoints;
+  pk?: string | number | undefined;
+  hasPrimaryKey?: boolean;
+  params?: any;
+  pathParams?: PathParams;
+  disabled?: boolean;
+  defaultValue?: any;
+  refetchOnMount?: boolean;
+  refetchOnWindowFocus?: boolean;
+  updateInterval?: number;
+}
+
+export interface RemoteInstanceProps {
+  model: ModelType;
+  modelUrl?: string;
+  modelRenderer?: (instance: any) => ReactNode;
+  pk: number;
+}
+export interface ThumbnailProps {
+  src?: string;
+  alt?: string;
+  size?: number;
+  text?: ReactNode;
+  align?: string;
+  link?: string;
+  hover?: boolean;
+  hoverSize?: number;
+}
+
+export interface RenderInlineModelProps {
+  primary: ReactNode;
+  secondary?: ReactNode;
+  showSecondary?: boolean;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  image?: string;
+  labels?: string[];
+  url?: string;
+  navigate?: any;
+  tooltip?: string;
+}

package/lib/types/Tables.tsx

@@ -100,7 +100,7 @@ export type TableState = {
  */
 export type TableColumnProps<T = any> = {
   accessor?: string;
-  title?: string;
+  title?: string | ReactNode;
   ordering?: string;
   sortable?: boolean;
   switchable?: boolean;
@@ -173,6 +173,7 @@ export type RowViewProps = RowAction & RowModelProps;
  * @param barcodeActions : any[] - List of barcode actions
  * @param tableFilters : TableFilter[] - List of custom filters
  * @param tableActions : any[] - List of custom action groups
+ * @param isRecordSelectable : (record: any, index: number) => boolean - Callback function to determine if a row is selectable
  * @param detailAction: boolean - Enable detail action for each row (default = true)
  * @param dataFormatter : (data: any) => any - Callback function to reformat data returned by server (if not in default format)
  * @param rowActions : (record: any) => RowAction[] - Callback function to generate row actions
@@ -203,6 +204,7 @@ export type InvenTreeTableProps<T = any> = {
   barcodeActions?: React.ReactNode[];
   tableFilters?: TableFilter[];
   tableActions?: React.ReactNode[];
+  isRecordSelectable?: (record: T, index: number) => boolean;
   rowExpansion?: DataTableRowExpansionProps<T>;
   dataFormatter?: (data: any) => any;
   rowActions?: (record: T) => RowAction[];

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inventreedb/ui",
     "description": "UI components for the InvenTree project",
-    "version": "0.11.3",
+    "version": "1.4.0",
     "private": false,
     "type": "module",
     "license": "MIT",
@@ -60,17 +60,17 @@
         "@github/webauthn-json": "^2.1.1",
         "@lingui/core": "^5.9.2",
         "@lingui/react": "^5.9.2",
-        "@mantine/carousel": "^8.2.7",
-        "@mantine/charts": "^8.2.7",
-        "@mantine/core": "^8.2.7",
-        "@mantine/dates": "^8.2.7",
-        "@mantine/dropzone": "^8.2.7",
-        "@mantine/form": "^8.2.7",
-        "@mantine/hooks": "^8.2.7",
-        "@mantine/modals": "^8.2.7",
-        "@mantine/notifications": "^8.2.7",
-        "@mantine/spotlight": "^8.2.7",
-        "@mantine/vanilla-extract": "^8.2.7",
+        "@mantine/carousel": "^9.2.1",
+        "@mantine/charts": "^9.2.1",
+        "@mantine/core": "^9.2.1",
+        "@mantine/dates": "^9.2.1",
+        "@mantine/dropzone": "^9.2.1",
+        "@mantine/form": "^9.2.1",
+        "@mantine/hooks": "^9.2.1",
+        "@mantine/modals": "^9.2.1",
+        "@mantine/notifications": "^9.2.1",
+        "@mantine/spotlight": "^9.2.1",
+        "@mantine/vanilla-extract": "^9.2.1",
         "@messageformat/date-skeleton": "^1.1.0",
         "@sentry/react": "^10.43.0",
         "@tabler/icons-react": "^3.17.0",
@@ -84,12 +84,13 @@
         "codemirror": "^6.0.2",
         "dayjs": "^1.11.13",
         "dompurify": "^3.2.4",
-        "easymde": "^2.18.0",
+        "easymde": "^2.20.0",
+        "embla-carousel": "^8.5.2",
         "embla-carousel-react": "^8.5.2",
         "fuse.js": "^7.0.0",
         "html5-qrcode": "^2.3.8",
-        "mantine-contextmenu": "^8.2.0",
-        "mantine-datatable": "^8.2.0",
+        "mantine-contextmenu": "^9.2.1",
+        "mantine-datatable": "^9.2.0",
         "qrcode": "^1.5.4",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
@@ -131,7 +132,7 @@
         "rollup": "^4.59.0",
         "rollup-plugin-license": "^3.7.0",
         "typescript": "^5.9.3",
-        "vite": "7.3.2",
+        "vite": "^6.4.2",
         "vite-plugin-babel-macros": "^1.0.6",
         "vite-plugin-dts": "^4.5.4",
         "vite-plugin-externals": "^0.6.2",
@@ -139,6 +140,6 @@
     },
     "resolutions": {
         "undici": "^6.24.0",
-        "vite": "^8.0.5"
+        "vite": "^6.4.2"
     }
 }