@inventreedb/ui 0.11.3 → 1.4.1

package/lib/plugin/LocalizedComponent.tsx

@@ -0,0 +1,85 @@
+import { i18n } from '@lingui/core';
+import { I18nProvider } from '@lingui/react';
+import { Skeleton } from '@mantine/core';
+import { useEffect, useState } from 'react';
+
+/**
+ * Attempt to load the locale file for the given locale, returning null if it fails
+ */
+async function tryLoadLocale(locale: string): Promise<any> {
+  try {
+    const messages = await import(`./locales/${locale}/messages.ts`);
+    return messages;
+  } catch (error) {
+    console.warn(`Failed to load locale ${locale}`);
+    return null;
+  }
+}
+
+/**
+ * Helper function to dynamically load frontend translations,
+ * based on the provided locale.
+ */
+async function loadPluginLocale(locale: string) {
+  let messages = null;
+
+  // Find the most specific locale file possible, with fallbacks to less specific locales if necessary
+  messages = await tryLoadLocale(locale);
+
+  if (!messages && locale.includes('-')) {
+    const fallbackLocale = locale.split('-')[0];
+    console.debug(
+      `Locale ${locale} not found, trying fallback locale ${fallbackLocale}`
+    );
+    messages = await tryLoadLocale(fallbackLocale);
+  }
+
+  if (!messages && locale.includes('_')) {
+    const fallbackLocale = locale.split('_')[0];
+    console.debug(
+      `Locale ${locale} not found, trying fallback locale ${fallbackLocale}`
+    );
+    messages = await tryLoadLocale(fallbackLocale);
+  }
+
+  if (!messages && locale !== 'en') {
+    console.debug(`Locale ${locale} not found, trying fallback locale en`);
+    messages = await tryLoadLocale('en');
+  }
+
+  if (messages?.messages) {
+    i18n.load(locale, messages.messages);
+    i18n.activate(locale);
+  } else {
+    console.error(`Failed to load any locale for ${locale}`);
+  }
+}
+
+/**
+ * Wrapper function for a plugin-defined component which needs to support dynamic locale loading.
+ *
+ * This is primarily designed for usage by the InvenTree plugin creator tool
+ */
+export default function LocalizedComponent({
+  locale,
+  children
+}: {
+  locale: string;
+  children: React.ReactNode;
+}) {
+  const [loaded, setLoaded] = useState(false);
+
+  // Reload the component when the locale changes
+  useEffect(() => {
+    setLoaded(false);
+    loadPluginLocale(locale).then(() => {
+      setLoaded(true);
+    });
+  }, [locale]);
+
+  return loaded ? (
+    <I18nProvider i18n={i18n}>{children}</I18nProvider>
+  ) : (
+    <Skeleton w='100%' animate />
+  );
+}

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/Filters.tsx

@@ -41,6 +41,7 @@ export type TableFilter = {
   name: string;
   label?: string;
   description?: string;
+  placeholder?: string;
   type?: TableFilterType;
   choices?: TableFilterChoice[];
   choiceFunction?: () => TableFilterChoice[];
@@ -52,6 +53,16 @@ export type TableFilter = {
   apiFilter?: Record<string, any>;
   model?: ModelType;
   modelRenderer?: (instance: any) => string;
+  transform?: (item: any) => TableFilterChoice;
+  multi?: boolean;
+};
+
+/*
+ * A named snapshot of a set of active filters, saved to local storage.
+ */
+export type NamedFilterSet = {
+  name: string;
+  filters: Pick<TableFilter, 'name' | 'value' | 'displayValue'>[];
 };
 
 /*
@@ -62,10 +73,18 @@ export type TableFilter = {
  * activeFilters: An array of active filters
  * setActiveFilters: A function to set the active filters
  * clearActiveFilters: A function to clear all active filters
+ * savedFilterSets: Named filter set snapshots persisted to local storage
+ * saveFilterSet: Save the current active filters under a given name
+ * loadFilterSet: Replace active filters with a previously saved named set
+ * deleteFilterSet: Remove a saved named filter set by name
  */
 export type FilterSetState = {
   filterKey: string;
   activeFilters: TableFilter[];
   setActiveFilters: (filters: TableFilter[]) => void;
   clearActiveFilters: () => void;
+  savedFilterSets: NamedFilterSet[];
+  saveFilterSet: (name: string) => void;
+  loadFilterSet: (name: string) => void;
+  deleteFilterSet: (name: string) => void;
 };

package/lib/types/Forms.tsx

@@ -2,6 +2,7 @@ import type { DefaultMantineColor, MantineStyleProp } from '@mantine/core';
 import type { UseFormReturnType } from '@mantine/form';
 import type { JSX, ReactNode } from 'react';
 import type { FieldValues, UseFormReturn } from 'react-hook-form';
+import type { NavigateFunction } from 'react-router-dom';
 import type { ApiEndpoints } from '../enums/ApiEndpoints';
 import type { ModelType } from '../enums/ModelType';
 import type { PathParams, UiSizeType } from './Core';
@@ -45,6 +46,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)
@@ -97,10 +99,12 @@ export type ApiFormFieldType = {
     | 'file upload'
     | 'nested object'
     | 'dependent field'
-    | 'table';
+    | 'table'
+    | 'tags';
   api_url?: string;
   pk_field?: string;
   model?: ModelType;
+  custom_model?: string;
   modelRenderer?: (instance: any) => ReactNode;
   filters?: any;
   child?: ApiFormFieldType;
@@ -158,6 +162,7 @@ export type ApiFormFieldSet = Record<string, ApiFormFieldType>;
  * @param modelType : Define a model type for this form
  * @param follow : Boolean, follow the result of the form (if possible)
  * @param table : Table to update on success (if provided)
+ * @param navigate : Optional navigate function to use for following results (if follow is true)
  */
 export interface ApiFormProps {
   url: ApiEndpoints | string;
@@ -187,6 +192,7 @@ export interface ApiFormProps {
   follow?: boolean;
   actions?: ApiFormAction[];
   timeout?: number;
+  navigate?: NavigateFunction;
   keepOpenOption?: boolean;
   onKeepOpenChange?: (keepOpen: boolean) => void;
 }

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.
@@ -8,6 +15,7 @@ export interface InstanceRenderInterface {
   link?: boolean;
   navigate?: any;
   showSecondary?: boolean;
+  showHover?: boolean;
   extra?: Record<string, any>;
 }
 
@@ -22,4 +30,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

@@ -84,7 +84,7 @@ export type TableState = {
  * @param editable - Whether the value of this column can be edited
  * @param definition - Optional field definition for the column
  * @param render - A custom render function
- * @param filter - A custom filter function
+ * @param filter - Filter name (string) to look up from tableFilters and attach an inline icon, or a custom render function for the filter popover
  * @param filtering - Whether the column is filterable
  * @param width - The width of the column
  * @param minWidth - The minimum width of the column
@@ -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;
@@ -109,7 +109,10 @@ export type TableColumnProps<T = any> = {
   editable?: boolean;
   definition?: ApiFormFieldType;
   render?: (record: T, index?: number) => any;
-  filter?: any;
+  filter?:
+    | string
+    | string[]
+    | (({ close }: { close: () => void }) => ReactNode);
   filtering?: boolean;
   width?: number;
   minWidth?: string | number;
@@ -173,6 +176,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 +207,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.1",
     "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",
@@ -114,7 +115,7 @@
         "@lingui/babel-plugin-lingui-macro": "^5.9.2",
         "@lingui/cli": "^5.9.2",
         "@lingui/macro": "^5.9.2",
-        "@playwright/test": "^1.58.2",
+        "@playwright/test": "^1.16.0",
         "@types/node": "^25.5.0",
         "@types/qrcode": "^1.5.5",
         "@types/react": "^19.2.14",
@@ -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"
     }
 }