@nxgt/material 2.4.1 → 2.5.0

package/dist/lib/components/ui/media/camera/camera.d.ts

@@ -1,3 +1,6 @@
-import { ComponentProps } from 'react';
-export type CameraProps = {} & ComponentProps<'div'>;
-export declare function Camera({ ...props }: CameraProps): import("react").JSX.Element;
+/**
+ * Webcam preview with a start / stop toggle and a still capture. It renders
+ * in the browser only, after mount (`getUserMedia` has no server side), as
+ * in `@nxgt/material-vue`.
+ */
+export declare const Camera: import('react').ComponentType<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

package/dist/lib/components/ui/media/camera/capture-photo.d.ts

@@ -0,0 +1,13 @@
+import { CameraAlert, CameraState } from './types';
+export type CapturePhotoResult = {
+    capturedImage?: string;
+    alert?: CameraAlert;
+    isProcessing: boolean;
+};
+/**
+ * Draws the current frame of `video` onto a canvas sized by
+ * `captureSettings`, mirrored when asked, and returns it as a data URL.
+ * `null` when there is nothing to capture: not streaming, no video, or no
+ * `document` (on the server).
+ */
+export declare function capturePhotoFromVideo(video: HTMLVideoElement | null, state: Pick<CameraState, 'isStreaming' | 'captureSettings'>): CapturePhotoResult | null;

package/dist/lib/components/ui/media/camera/index.d.ts

@@ -1 +1,9 @@
-export {};
+export { Camera } from './camera';
+export { useCameraContext } from './camera-context';
+export type { CapturePhotoResult } from './capture-photo';
+export { capturePhotoFromVideo } from './capture-photo';
+export type { CameraStore } from './state/camera.store';
+export { createCameraStore } from './state/camera.store';
+export type { CameraActions, CameraAlert, CameraContextValue, CameraDeviceInfo, CameraProps, CameraState, CaptureSettings, ImageFormat, } from './types';
+export { useCamera } from './use-camera';
+export { getCameraDevices, isCameraSupported, requestCameraPermissions, } from './utils/camera.utils';

package/dist/lib/components/ui/media/camera/state/camera.reducers.d.ts

@@ -1,5 +1,5 @@
 import { CameraReducerCreators } from './camera.slice';
-export declare const createCapturePhotoReducer: (create: CameraReducerCreators) => import('@reduxjs/toolkit').CaseReducer<import('../types').CameraState, {
+export declare const createCapturePhotoReducer: (create: CameraReducerCreators) => import('@reduxjs/toolkit').CaseReducer<import('..').CameraState, {
     payload: HTMLVideoElement | null;
     type: string;
 }> & {

package/dist/lib/components/ui/media/camera/state/camera.slice.d.ts

@@ -1,8 +1,8 @@
 import { ReducerCreators } from '@reduxjs/toolkit';
-import { CameraAlert, CameraState } from '../types';
+import { CameraAlert, CameraDeviceInfo, CameraState } from '../types';
 export declare const cameraSlice: import('@reduxjs/toolkit').Slice<CameraState, {
     readonly setDevices: import('@reduxjs/toolkit').CaseReducer<CameraState, {
-        payload: MediaDeviceInfo[];
+        payload: CameraDeviceInfo[];
         type: string;
     }> & {
         _reducerDefinitionType: import("@reduxjs/toolkit").ReducerType.reducer;
@@ -49,7 +49,7 @@ export declare const cameraSlice: import('@reduxjs/toolkit').Slice<CameraState,
         cameraSupported: false;
     } | {
         hasPermission: boolean;
-        devices: import('../types').CameraDeviceInfo[];
+        devices: CameraDeviceInfo[];
         cameraSupported: true;
     }, {
         rejectValue: {
@@ -84,7 +84,7 @@ export declare const cameraSlice: import('@reduxjs/toolkit').Slice<CameraState,
             cameraSupported: false;
         } | {
             hasPermission: boolean;
-            devices: import('../types').CameraDeviceInfo[];
+            devices: CameraDeviceInfo[];
             cameraSupported: true;
         }, void, {
             rejectValue: {
@@ -140,9 +140,4 @@ export declare const cameraSlice: import('@reduxjs/toolkit').Slice<CameraState,
         }>;
     };
 }, "camera", "camera", import('@reduxjs/toolkit').SliceSelectors<CameraState>>;
-type CameraSliceActions = typeof cameraSlice.actions;
-export type CameraActions = {
-    [K in keyof CameraSliceActions]: (...args: Parameters<CameraSliceActions[K]>) => void;
-};
 export type CameraReducerCreators = ReducerCreators<CameraState>;
-export {};

package/dist/lib/components/ui/media/camera/state/camera.store.d.ts

@@ -1,10 +1,16 @@
 import { CameraState } from '../types';
-export declare const store: import('@reduxjs/toolkit').EnhancedStore<CameraState, import('redux').UnknownAction, import('@reduxjs/toolkit').Tuple<[import('redux').StoreEnhancer<{
+/**
+ * A store for one `Camera`. Each instance creates its own, never a module
+ * singleton: two cameras on a page, or two requests on a server, would
+ * otherwise share one state.
+ */
+export declare function createCameraStore(preloadedState?: Partial<CameraState>): import('@reduxjs/toolkit').EnhancedStore<CameraState, import('redux').UnknownAction, import('@reduxjs/toolkit').Tuple<[import('redux').StoreEnhancer<{
     dispatch: import('redux-thunk').ThunkDispatch<CameraState, undefined, import('redux').UnknownAction>;
 }>, import('redux').StoreEnhancer]>>;
+export type CameraStore = ReturnType<typeof createCameraStore>;
 export declare const useCameraActions: () => import('@reduxjs/toolkit').CaseReducerActions<{
     readonly setDevices: import('@reduxjs/toolkit').CaseReducer<CameraState, {
-        payload: MediaDeviceInfo[];
+        payload: import('..').CameraDeviceInfo[];
         type: string;
     }> & {
         _reducerDefinitionType: import("@reduxjs/toolkit").ReducerType.reducer;
@@ -28,7 +34,7 @@ export declare const useCameraActions: () => import('@reduxjs/toolkit').CaseRedu
         _reducerDefinitionType: import("@reduxjs/toolkit").ReducerType.reducer;
     };
     readonly setAlert: import('@reduxjs/toolkit').CaseReducer<CameraState, {
-        payload: import('../types').CameraAlert | null;
+        payload: import('..').CameraAlert | null;
         type: string;
     }> & {
         _reducerDefinitionType: import("@reduxjs/toolkit").ReducerType.reducer;
@@ -51,7 +57,7 @@ export declare const useCameraActions: () => import('@reduxjs/toolkit').CaseRedu
         cameraSupported: false;
     } | {
         hasPermission: boolean;
-        devices: import('../types').CameraDeviceInfo[];
+        devices: import('..').CameraDeviceInfo[];
         cameraSupported: true;
     }, {
         rejectValue: {
@@ -86,7 +92,7 @@ export declare const useCameraActions: () => import('@reduxjs/toolkit').CaseRedu
             cameraSupported: false;
         } | {
             hasPermission: boolean;
-            devices: import('../types').CameraDeviceInfo[];
+            devices: import('..').CameraDeviceInfo[];
             cameraSupported: true;
         }, void, {
             rejectValue: {

package/dist/lib/components/ui/media/camera/state/camera.thunks.d.ts

@@ -1,11 +1,11 @@
 import { CameraReducerCreators } from './camera.slice';
-export declare const createRequestPermissionThunk: (create: CameraReducerCreators) => import('@reduxjs/toolkit').AsyncThunkReducers<import('../types').CameraState, void, {
+export declare const createRequestPermissionThunk: (create: CameraReducerCreators) => import('@reduxjs/toolkit').AsyncThunkReducers<import('..').CameraState, void, {
     hasPermission: boolean;
     devices: never[];
     cameraSupported: false;
 } | {
     hasPermission: boolean;
-    devices: import('../types').CameraDeviceInfo[];
+    devices: import('..').CameraDeviceInfo[];
     cameraSupported: true;
 }, {
     rejectValue: {
@@ -40,7 +40,7 @@ export declare const createRequestPermissionThunk: (create: CameraReducerCreator
         cameraSupported: false;
     } | {
         hasPermission: boolean;
-        devices: import('../types').CameraDeviceInfo[];
+        devices: import('..').CameraDeviceInfo[];
         cameraSupported: true;
     }, void, {
         rejectValue: {
@@ -55,7 +55,7 @@ export declare const createRequestPermissionThunk: (create: CameraReducerCreator
         rejectedMeta?: unknown;
     }>;
 };
-export declare const createStartStreamThunk: (create: CameraReducerCreators) => import('@reduxjs/toolkit').AsyncThunkReducers<import('../types').CameraState, (stream: MediaStream) => void, void, {
+export declare const createStartStreamThunk: (create: CameraReducerCreators) => import('@reduxjs/toolkit').AsyncThunkReducers<import('..').CameraState, (stream: MediaStream) => void, void, {
     rejectValue: {
         message: string;
     };

package/dist/lib/components/ui/media/camera/types.d.ts

@@ -1,4 +1,4 @@
-import { CameraActions } from './state/camera.slice';
+import { ComponentProps, RefObject } from 'react';
 export type ImageFormat = 'png' | 'jpeg' | 'webp';
 export type CaptureSettings = {
     resolution: {
@@ -25,14 +25,24 @@ export type CameraState = {
     captureSettings: CaptureSettings;
     alert: CameraAlert | null;
 };
+/** What `useCamera()` / `useCameraContext()` hand a part of the camera. */
+export type CameraActions = {
+    setDevices: (devices: CameraDeviceInfo[]) => void;
+    selectDevice: (deviceId: string | null) => void;
+    setPermission: (hasPermission: boolean) => void;
+    setStreaming: (isStreaming: boolean) => void;
+    setAlert: (alert: CameraAlert | null) => void;
+    setCameraSupported: (cameraSupported: boolean) => void;
+    requestPermission: () => Promise<void>;
+    startStream: () => void;
+    stopStream: () => void;
+    capturePhoto: () => void;
+};
 export type CameraContextValue = {
-    videoRef: React.RefObject<HTMLVideoElement | null>;
-    canvasRef: React.RefObject<HTMLCanvasElement | null>;
-    streamRef: React.RefObject<MediaStream | null>;
+    videoRef: RefObject<HTMLVideoElement | null>;
+    canvasRef: RefObject<HTMLCanvasElement | null>;
+    streamRef: RefObject<MediaStream | null>;
     state: CameraState;
-    actions: Omit<CameraActions, 'startStream' | 'capturePhoto'> & {
-        capturePhoto: () => void;
-        startStream: () => void;
-        stopStream: () => void;
-    };
+    actions: CameraActions;
 };
+export type CameraProps = ComponentProps<'div'>;

package/dist/lib/components/ui/media/camera/use-camera.d.ts

@@ -1,11 +1,5 @@
-export declare function useCamera(): {
-    videoRef: import('react').RefObject<HTMLVideoElement | null>;
-    canvasRef: import('react').RefObject<HTMLCanvasElement | null>;
-    streamRef: import('react').RefObject<MediaStream | null>;
-    state: import('./types').CameraState;
-    actions: Omit<import('./state').CameraActions, "capturePhoto" | "startStream"> & {
-        capturePhoto: () => void;
-        startStream: () => void;
-        stopStream: () => void;
-    };
-};
+/**
+ * The camera's context, plus its lifecycle: asks for permission on mount
+ * and stops the stream on unmount. Inside `<Camera>` only.
+ */
+export declare function useCamera(): import('./types').CameraContextValue;

package/dist/lib/components/ui/media/camera/utils/camera.utils.d.ts

@@ -1,5 +1,4 @@
 import { CameraDeviceInfo } from '../types';
-export * from './camera.utils';
 /**
  * Get available camera devices
  */

package/dist/lib/components/ui/media/index.d.ts

@@ -1,3 +1,4 @@
+export * from './camera';
 export * from './carousel';
 export * from './file-list';
 export * from './files-form-field';

package/dist/lib/components/ui/overlays/dialog/dialog-outside.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A combobox inside a dialog portals its list outside the dialog's content;
+ * a pointer or focus landing there is not "outside" and must not close it.
+ */
+export declare function keepComboboxOverlay(event: Pick<Event, 'target' | 'preventDefault'>): void;

package/dist/lib/components/ui/overlays/dialog/dialog-scroll-content.d.ts

@@ -0,0 +1,9 @@
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import { ComponentProps } from 'react';
+/**
+ * A dialog content for a dialog taller than the screen: the overlay scrolls,
+ * and the content sits in it with a margin, instead of being clipped at the
+ * viewport. It renders its own close button (top right).
+ */
+declare function DialogScrollContent({ className, children, onInteractOutside, onPointerDownOutside, onFocusOutside, onOpenAutoFocus, onCloseAutoFocus, ...props }: ComponentProps<typeof DialogPrimitive.Content>): import("react").JSX.Element;
+export { DialogScrollContent };

package/dist/lib/components/ui/overlays/dialog/index.d.ts

@@ -1 +1,2 @@
 export * from './dialog';
+export * from './dialog-scroll-content';

package/dist/lib/components/ui/primitives/icon/icon-context.d.ts

@@ -1,7 +1,7 @@
 /**
  * `true` inside a control that already carries an accessible name — a named
  * `IconButton`, and so `InputGroupButton` and `IconLinkButton`, which render
- * one. An `Icon` there with no `aria-label` of its own renders
+ * one, and a `Button` with text or an `aria-label`. An `Icon` there with no `aria-label` of its own renders
  * `aria-hidden="true"` instead of `role="img" aria-label="Icon {name}"`, so a
  * screen reader reads "Delete" and not "Delete, Icon trash".
  *

package/dist/lib/components/ui/primitives/table/table.d.ts

@@ -6,5 +6,10 @@ declare function TableFooter({ className, ...props }: ComponentProps<'tfoot'>):
 declare function TableRow({ className, ...props }: ComponentProps<'tr'>): import("react").JSX.Element;
 declare function TableHead({ className, ...props }: ComponentProps<'th'>): import("react").JSX.Element;
 declare function TableCell({ className, ...props }: ComponentProps<'td'>): import("react").JSX.Element;
+/**
+ * A full-width row for "nothing here": one cell spanning `colSpan` columns
+ * (default 1), its content centred.
+ */
+declare function TableEmpty({ className, colSpan, children, ...props }: ComponentProps<'td'>): import("react").JSX.Element;
 declare function TableCaption({ className, ...props }: ComponentProps<'caption'>): import("react").JSX.Element;
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, };
+export { Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, TableHead, TableHeader, TableRow, };

package/dist/lib/components/ui/selection/index.d.ts

@@ -4,6 +4,7 @@ export * from './checkbox';
 export * from './checkbox-group';
 export * from './combobox';
 export * from './combobox-field';
+export * from './native-select';
 export * from './radio-group';
 export * from './select';
 export * from './select-card-field';

package/dist/lib/components/ui/selection/native-select/index.d.ts

@@ -0,0 +1 @@
+export * from './native-select';

package/dist/lib/components/ui/selection/native-select/native-select.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+export type NativeSelectProps = ComponentProps<'select'>;
+/**
+ * The browser's own `<select>`, styled like the library's inputs, with a
+ * chevron. `value` / `defaultValue` / `onChange` and every other attribute go
+ * to the `<select>`; `className` too, the wrapper only positions the chevron.
+ */
+declare function NativeSelect({ className, ...props }: NativeSelectProps): import("react").JSX.Element;
+declare function NativeSelectOption({ className, ...props }: ComponentProps<'option'>): import("react").JSX.Element;
+declare function NativeSelectOptGroup({ className, ...props }: ComponentProps<'optgroup'>): import("react").JSX.Element;
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/dist/lib/components/ui/selection/radio-group/radio-group.d.ts

@@ -13,4 +13,11 @@ export type RadioGroupProps = {
 declare function RadioGroup({ options, label, helperText, error, orientation, className, id, ...props }: RadioGroupProps): import("react").JSX.Element;
 declare function RadioGroupBase({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Root>): import("react").JSX.Element;
 declare function RadioGroupItem({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Item>): import("react").JSX.Element;
-export { RadioGroup, RadioGroupBase, RadioGroupItem };
+/**
+ * The labelled `RadioGroup` under `@nxgt/material-vue`'s name, so code reads
+ * the same in both libraries. Same component, same props. The names align
+ * fully in 3.0; `RadioGroup` is not deprecated.
+ */
+declare const RadioGroupField: typeof RadioGroup;
+export type RadioGroupFieldProps = RadioGroupProps;
+export { RadioGroup, RadioGroupBase, RadioGroupField, RadioGroupItem };

package/dist/lib/i18n/resources/en/en.d.ts

@@ -323,6 +323,7 @@ export declare const en: {
             };
         };
         table: {
+            loading: string;
             labels: {
                 asc: string;
                 desc: string;
@@ -749,6 +750,8 @@ export declare const en: {
         };
         stepper: {
             step: string;
+            completed: string;
+            error: string;
         };
         "location-field": {
             placeholder: string;
@@ -1164,6 +1167,10 @@ export declare const en: {
         spinner: {
             loading: string;
         };
+        slider: {
+            minimum: string;
+            maximum: string;
+        };
         "scroll-to-top": {
             label: string;
         };

package/dist/lib/i18n/resources/en/material.json.d.ts

@@ -313,6 +313,7 @@ declare const _default: {
 		}
 	},
 	"table": {
+		"loading": "Loading data…",
 		"labels": {
 			"asc": "Asc",
 			"desc": "Desc",
@@ -738,7 +739,9 @@ declare const _default: {
 		"open": "Open URL"
 	},
 	"stepper": {
-		"step": "Step {step}"
+		"step": "Step {step}",
+		"completed": "Completed",
+		"error": "Error"
 	},
 	"location-field": {
 		"placeholder": "No location selected",
@@ -1154,6 +1157,10 @@ declare const _default: {
 	"spinner": {
 		"loading": "Loading..."
 	},
+	"slider": {
+		"minimum": "Minimum",
+		"maximum": "Maximum"
+	},
 	"scroll-to-top": {
 		"label": "Scroll to top"
 	},

package/dist/lib/i18n/resources/fr/fr.d.ts

@@ -323,6 +323,7 @@ export declare const fr: {
             };
         };
         table: {
+            loading: string;
             labels: {
                 asc: string;
                 desc: string;
@@ -749,6 +750,8 @@ export declare const fr: {
         };
         stepper: {
             step: string;
+            completed: string;
+            error: string;
         };
         "location-field": {
             placeholder: string;
@@ -1164,6 +1167,10 @@ export declare const fr: {
         spinner: {
             loading: string;
         };
+        slider: {
+            minimum: string;
+            maximum: string;
+        };
         "scroll-to-top": {
             label: string;
         };

package/dist/lib/i18n/resources/fr/material.json.d.ts

@@ -313,6 +313,7 @@ declare const _default: {
 		}
 	},
 	"table": {
+		"loading": "Chargement des données…",
 		"labels": {
 			"asc": "Asc",
 			"desc": "Desc",
@@ -738,7 +739,9 @@ declare const _default: {
 		"open": "Ouvrir l’URL"
 	},
 	"stepper": {
-		"step": "Étape {step}"
+		"step": "Étape {step}",
+		"completed": "Terminée",
+		"error": "Erreur"
 	},
 	"location-field": {
 		"placeholder": "Aucun emplacement sélectionné",
@@ -1154,6 +1157,10 @@ declare const _default: {
 	"spinner": {
 		"loading": "Chargement..."
 	},
+	"slider": {
+		"minimum": "Minimum",
+		"maximum": "Maximum"
+	},
 	"scroll-to-top": {
 		"label": "Retour en haut"
 	},

package/dist/lib/i18n/resources/resources.d.ts

@@ -321,6 +321,7 @@ export declare const resources: {
                 };
             };
             table: {
+                loading: string;
                 labels: {
                     asc: string;
                     desc: string;
@@ -747,6 +748,8 @@ export declare const resources: {
             };
             stepper: {
                 step: string;
+                completed: string;
+                error: string;
             };
             "location-field": {
                 placeholder: string;
@@ -1162,6 +1165,10 @@ export declare const resources: {
             spinner: {
                 loading: string;
             };
+            slider: {
+                minimum: string;
+                maximum: string;
+            };
             "scroll-to-top": {
                 label: string;
             };
@@ -1516,6 +1523,7 @@ export declare const resources: {
                 };
             };
             table: {
+                loading: string;
                 labels: {
                     asc: string;
                     desc: string;
@@ -1942,6 +1950,8 @@ export declare const resources: {
             };
             stepper: {
                 step: string;
+                completed: string;
+                error: string;
             };
             "location-field": {
                 placeholder: string;
@@ -2357,6 +2367,10 @@ export declare const resources: {
             spinner: {
                 loading: string;
             };
+            slider: {
+                minimum: string;
+                maximum: string;
+            };
             "scroll-to-top": {
                 label: string;
             };