@olenbetong/synergi-react 2.3.4 → 2.3.6

package/es/components/DateNavigator/index.js

@@ -117,9 +117,5 @@ export function DateNavigator({ date: dateProp, defaultDate, disableTodayButton,
             updateDate(new Date(dateUtc + oneDay * modifier));
         }
     }
-    return (
-    // biome-ignore lint/a11y/noNoninteractiveTabindex: I hate this component
-    // biome-ignore lint/a11y/noStaticElementInteractions: legacy component
-    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: legacy component
-    _jsxs("div", { className: "ObDateNavigator-root", onKeyDown: handleKeyDown, tabIndex: 0, "aria-label": "Date navigator", children: [_jsx(Arrow, { direction: "left", onClick: () => updateDate(new Date(dateUtc - oneDay)), disabled: disablePrev }), _jsx("div", { className: "ObDateNavigator-date", children: text }), _jsx(Arrow, { direction: "right", onClick: () => updateDate(new Date(dateUtc + oneDay)), disabled: disableNext }), !disableTodayButton && (_jsx("button", { type: "button", className: "ObDateNavigator-today btn-reset", onClick: jumpToToday, children: getLocalizedString("Today") })), _jsx("div", { "aria-live": "polite", ref: liveRef, style: { position: "absolute", left: "-9999px" } })] }));
+    return (_jsxs("div", { className: "ObDateNavigator-root", onKeyDown: handleKeyDown, tabIndex: 0, "aria-label": "Date navigator", children: [_jsx(Arrow, { direction: "left", onClick: () => updateDate(new Date(dateUtc - oneDay)), disabled: disablePrev }), _jsx("div", { className: "ObDateNavigator-date", children: text }), _jsx(Arrow, { direction: "right", onClick: () => updateDate(new Date(dateUtc + oneDay)), disabled: disableNext }), !disableTodayButton && (_jsx("button", { type: "button", className: "ObDateNavigator-today btn-reset", onClick: jumpToToday, children: getLocalizedString("Today") })), _jsx("div", { "aria-live": "polite", ref: liveRef, style: { position: "absolute", left: "-9999px" } })] }));
 }

package/es/components/SplitContainer/index.js

@@ -36,9 +36,7 @@ settingsStore.keys().then((keys) => Promise.allSettled(keys
     }
 }))));
 const Divider = forwardRef(function Divider(props, ref) {
-    return (
-    // biome-ignore lint/a11y/useSemanticElements: NO!
-    _jsx("div", { className: clsx("ObSplitContainer-divider", props.className), tabIndex: 0, ref: ref, role: "separator", "aria-orientation": props.direction, "aria-valuemin": props.min, "aria-valuemax": props.max, "aria-valuenow": props.size, children: _jsx("span", { children: "\u2022\u2022\u2022" }) }));
+    return (_jsx("div", { className: clsx("ObSplitContainer-divider", props.className), tabIndex: 0, ref: ref, role: "separator", "aria-orientation": props.direction, "aria-valuemin": props.min, "aria-valuemax": props.max, "aria-valuenow": props.size, children: _jsx("span", { children: "\u2022\u2022\u2022" }) }));
 });
 function SplitRoot({ className, direction, ...props }) {
     return _jsx("div", { className: clsx(className, "ObSplitContainer-root", direction), ...props });

package/es/components/ValueToggleGroup/index.js

@@ -6,9 +6,7 @@ export const ValueToggleGroup = forwardRef(function ValueToggleGroup({ options,
     let randomId = useId();
     let groupName = name || `toggle-${id ?? randomId}`;
     let isControlled = value !== undefined;
-    return (
-    // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: legacy component
-    _jsx("fieldset", { className: clsx("ObValueToggleGroup", orientation, className), role: "radiogroup", ref: ref, style: style, children: options.map((opt) => {
+    return (_jsx("fieldset", { className: clsx("ObValueToggleGroup", orientation, className), role: "radiogroup", ref: ref, style: style, children: options.map((opt) => {
             return (_jsxs("label", { className: clsx("ObValueToggleOption", { disabled: opt.disabled }), children: [_jsx("input", { type: "radio", name: groupName, value: opt.value, checked: isControlled ? value === opt.value : undefined, defaultChecked: !isControlled ? defaultValue === opt.value : undefined, onChange: () => onChange?.(opt.value), disabled: opt.disabled }), _jsx("span", { className: "ObValueToggleLabel", children: opt.label ?? opt.value })] }, opt.value));
         }) }));
 });

package/es/elements/ElementDamage/DuplicateDamage/DesktopView.js

@@ -3,7 +3,12 @@ import { Grid, Typography } from "@mui/material";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { Link } from "@olenbetong/appframe-mui";
 function SummaryItem({ col, label, children, em, align, padding }) {
-    return (_jsxs(Grid, { size: col, sx: { p: padding ?? 2, borderBottom: (t) => `1px solid ${t.palette.divider}` }, children: [label && (_jsx(Typography, { variant: "body1", fontSize: "0.9rem", fontWeight: 500, mb: 1, textAlign: align, children: getLocalizedString(label) })), children && (_jsx(Typography, { fontSize: em ? "1.4rem" : "0.9rem", whiteSpace: "pre-line", fontWeight: em ? 600 : undefined, textAlign: align, children: children }))] }));
+    return (_jsxs(Grid, { size: col, sx: { p: padding ?? 2, borderBottom: (t) => `1px solid ${t.palette.divider}` }, children: [label && (_jsx(Typography, { variant: "body1", sx: { fontSize: "0.9rem", fontWeight: 500, mb: 1, textAlign: align }, children: getLocalizedString(label) })), children && (_jsx(Typography, { sx: {
+                    fontSize: em ? "1.4rem" : "0.9rem",
+                    fontWeight: em ? 600 : undefined,
+                    textAlign: align,
+                    whiteSpace: "pre-line",
+                }, children: children }))] }));
 }
 export function ElementDamagesItem({ record, linkToDamage }) {
     return (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { col: 1.5, children: linkToDamage ? (_jsx(Link, { href: "#", onClick: (e) => {

package/es/elements/ElementDamage/DuplicateDamage/PhoneView.js

@@ -6,5 +6,5 @@ export function DuplicatePhoneViewItem({ record, linkToDamage }) {
             if (linkToDamage) {
                 window.location.href = `${record.ID}`;
             }
-        }, children: _jsxs(CardContent, { children: [_jsx(Typography, { sx: { fontSize: 14 }, color: "text.secondary", gutterBottom: true, children: record.Date.toLocaleDateString() }), _jsxs(Typography, { variant: "h5", mb: 1.5, children: [record.ElementID, " - ", record.DisplayName] }), _jsxs(Typography, { children: [getLocalizedString("Description"), ":"] }), _jsx(Typography, { mb: 1.5, color: "text.secondary", children: record.Description }), _jsxs(Typography, { children: [getLocalizedString("Cause"), ": "] }), _jsx(Typography, { mb: 1.5, color: "text.secondary", children: record.Cause }), _jsxs(Typography, { children: [getLocalizedString("Action"), ": "] }), _jsx(Typography, { mb: 1.5, color: "text.secondary", children: record.Action })] }) }));
+        }, children: _jsxs(CardContent, { children: [_jsx(Typography, { sx: { fontSize: 14 }, color: "text.secondary", gutterBottom: true, children: record.Date.toLocaleDateString() }), _jsxs(Typography, { variant: "h5", sx: { mb: 1.5 }, children: [record.ElementID, " - ", record.DisplayName] }), _jsxs(Typography, { children: [getLocalizedString("Description"), ":"] }), _jsx(Typography, { sx: { mb: 1.5 }, color: "text.secondary", children: record.Description }), _jsxs(Typography, { children: [getLocalizedString("Cause"), ": "] }), _jsx(Typography, { sx: { mb: 1.5 }, color: "text.secondary", children: record.Cause }), _jsxs(Typography, { children: [getLocalizedString("Action"), ": "] }), _jsx(Typography, { sx: { mb: 1.5 }, color: "text.secondary", children: record.Action })] }) }));
 }

package/es/elements/ElementDamage/RegisterFix.js

@@ -41,5 +41,5 @@ export function RegisterFix({ value, defaultValue, onFix, edit }) {
             alert(error.message);
         }
     }
-    return (_jsxs(_Fragment, { children: [edit ? (_jsx(Button, { loading: loading, loadingPosition: "end", endIcon: _jsx(CheckIcon, {}), onClick: handleRegisterFix, disabled: !!fixValue?.RegisteredFix, variant: "contained", children: getLocalizedString("Register fix") })) : (_jsx(FormControlLabel, { control: _jsx(Checkbox, {}), label: getLocalizedString("Register fixed"), name: "RegisteredFix", id: "NewElementDamage_RegisteredFix" })), fixValue?.RegisteredFix && (_jsx(Typography, { mb: 1.5, color: "text.secondary", children: localize `Registered fix by ${fixValue.RegisteredFixFullName ?? fixValue.RegisteredFixBy} on the ${formatter.format(fixValue.RegisteredFix)}` }))] }));
+    return (_jsxs(_Fragment, { children: [edit ? (_jsx(Button, { loading: loading, loadingPosition: "end", endIcon: _jsx(CheckIcon, {}), onClick: handleRegisterFix, disabled: !!fixValue?.RegisteredFix, variant: "contained", children: getLocalizedString("Register fix") })) : (_jsx(FormControlLabel, { control: _jsx(Checkbox, {}), label: getLocalizedString("Register fixed"), name: "RegisteredFix", id: "NewElementDamage_RegisteredFix" })), fixValue?.RegisteredFix && (_jsx(Typography, { sx: { mb: 1.5 }, color: "text.secondary", children: localize `Registered fix by ${fixValue.RegisteredFixFullName ?? fixValue.RegisteredFixBy} on the ${formatter.format(fixValue.RegisteredFix)}` }))] }));
 }

package/es/elements/ElementLookupDialog/BarcodeScanner/index.js

@@ -22,7 +22,7 @@ export function BarcodeScanner({ onRead }) {
             position: "relative",
             bgcolor: "black",
             height: "100%",
-        }, children: [_jsxs(Box, { height: "100%", ref: readerRoot, children: [_jsx(Box, { component: "video", className: "dbrScanner-video", playsInline: true, sx: frameSx }), _jsx(Box, { component: "canvas", sx: frameSx, width: "1280", height: "720", ref: canvas }), error && _jsx(ErrorIcon, { ...error })] }), _jsxs(Box, { sx: {
+        }, children: [_jsxs(Box, { sx: { height: "100%" }, ref: readerRoot, children: [_jsx(Box, { component: "video", className: "dbrScanner-video", playsInline: true, sx: frameSx }), _jsx(Box, { component: "canvas", sx: frameSx, width: "1280", height: "720", ref: canvas }), error && _jsx(ErrorIcon, { ...error })] }), _jsxs(Box, { sx: {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",

package/es/elements/ElementLookupDialog/HIDScanner/index.js

@@ -26,10 +26,15 @@ export function AddElementHIDScanner({ onScan }) {
         };
     }, []);
     useHIDScanner(onScan, enabled);
-    return (_jsx(Box, { height: "100%", bgcolor: "#ddd", display: "flex", alignItems: "center", justifyContent: "center", tabIndex: 0, ref: root, sx: {
+    return (_jsx(Box, { sx: {
+            height: "100%",
+            bgcolor: "#ddd",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
             backgroundImage: enabled ? "linear-gradient(var(--angle), #777, #bbb, #777)" : "none",
             animation: enabled ? "MovingBackground 8s linear infinite" : "none",
-        }, children: enabled ? (_jsxs("span", { children: [getLocalizedString("Listening for scanned elements"), "..."] })) : (_jsx(Button, { variant: "contained", onClick: () => {
+        }, tabIndex: 0, ref: root, children: enabled ? (_jsxs("span", { children: [getLocalizedString("Listening for scanned elements"), "..."] })) : (_jsx(Button, { variant: "contained", onClick: () => {
                 if (root.current)
                     root.current.focus();
             }, children: getLocalizedString("Start listening") })) }));

package/es/elements/ElementLookupDialog/index.js

@@ -72,7 +72,7 @@ export function ElementLookupDialog(props) {
     }
     return (_jsx(ResponsiveDialog, { open: open, onClose: onClose, slotProps: {
             paper: { sx: { overflow: "hidden" } },
-        }, children: _jsxs(Box, { display: "flex", flexDirection: "column", maxHeight: "100%", overflow: "hidden", flexGrow: 1, children: [_jsxs(Tabs, { value: tab, onChange: (_, newTab) => setTab(newTab), variant: "fullWidth", sx: { flexShrink: 0 }, children: [props.mode !== "search" && _jsx(Tab, { icon: _jsx(Edit, {}), label: getLocalizedString("Manual"), value: "manual" }), _jsx(Tab, { icon: _jsx(TapAndPlay, {}), label: getLocalizedString("Scanner"), value: "scanner" }), _jsx(Tab, { icon: _jsx(QrCodeScanner, {}), label: getLocalizedString("Camera"), value: "camera" })] }), tab === "camera" && (_jsx(Box, { flexBasis: "12rem", flexGrow: 1, flexShrink: 2, children: _jsx(BarcodeScanner, { onRead: (element) => handleElementAdd(element, "camera-barcode") }) })), tab === "manual" && (_jsx(Box, { p: 2, children: _jsx(AddElementManualForm, { onAdd: (element) => handleElementAdd(element, "manual"), allowEmptyElement: props.allowEmptyElement }) })), tab === "scanner" && (_jsx(Box, { flexBasis: "12rem", flexGrow: 1, flexShrink: 2, children: _jsx(AddElementHIDScanner, { onScan: (element) => handleElementAdd(element, element.startsWith(Giai.BARCODE_PREFIX) ? "hid-barcode" : "hid-rfid") }) })), _jsxs(Box, { flex: "3 1 14rem", overflow: "auto", children: [props.mode === "multi" && (_jsx(Alert, { icon: false, severity: "info", sx: { justifyContent: "center", py: 0, position: "sticky", top: 0, zIndex: 1 }, slotProps: {
+        }, children: _jsxs(Box, { sx: { display: "flex", flexDirection: "column", maxHeight: "100%", overflow: "hidden", flexGrow: 1 }, children: [_jsxs(Tabs, { value: tab, onChange: (_, newTab) => setTab(newTab), variant: "fullWidth", sx: { flexShrink: 0 }, children: [props.mode !== "search" && _jsx(Tab, { icon: _jsx(Edit, {}), label: getLocalizedString("Manual"), value: "manual" }), _jsx(Tab, { icon: _jsx(TapAndPlay, {}), label: getLocalizedString("Scanner"), value: "scanner" }), _jsx(Tab, { icon: _jsx(QrCodeScanner, {}), label: getLocalizedString("Camera"), value: "camera" })] }), tab === "camera" && (_jsx(Box, { sx: { flexBasis: "12rem", flexGrow: 1, flexShrink: 2 }, children: _jsx(BarcodeScanner, { onRead: (element) => handleElementAdd(element, "camera-barcode") }) })), tab === "manual" && (_jsx(Box, { sx: { p: 2 }, children: _jsx(AddElementManualForm, { onAdd: (element) => handleElementAdd(element, "manual"), allowEmptyElement: props.allowEmptyElement }) })), tab === "scanner" && (_jsx(Box, { sx: { flexBasis: "12rem", flexGrow: 1, flexShrink: 2 }, children: _jsx(AddElementHIDScanner, { onScan: (element) => handleElementAdd(element, element.startsWith(Giai.BARCODE_PREFIX) ? "hid-barcode" : "hid-rfid") }) })), _jsxs(Box, { sx: { flex: "3 1 14rem", overflow: "auto" }, children: [props.mode === "multi" && (_jsx(Alert, { icon: false, severity: "info", sx: { justifyContent: "center", py: 0, position: "sticky", top: 0, zIndex: 1 }, slotProps: {
                                 message: { sx: { py: 0.5 } },
                             }, children: localize `${elements.length} elements selected` })), _jsx(List, { disablePadding: true, children: elements.map(({ element }) => (_jsx(ListItem, { "data-elementid": element.ElementID, secondaryAction: _jsx(Button, { color: "error", variant: "outlined", onClick: () => {
                                         setElements((current) => props.mode === "multi" ? current.filter((e) => e.element.ElementID !== element.ElementID) : []);

package/es/elements/ProjectSelect.js

@@ -31,9 +31,11 @@ export function ProjectSelect({ className, disabled, id, names, onChange, readOn
         return new Set([...nameCount.entries()].filter(([, count]) => count > 1).map(([name]) => name));
     }, [projects]);
     return (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: sx, autoHighlight: true, autoSelect: true, clearOnEscape: true, className: className, options: projects, disabled: disabled, getOptionLabel: (option) => option?.ProjectID !== undefined ? `${option.ProjectID}: ${option.ProjectName}` : "", isOptionEqualToValue: (option, value) => option.Domain === value.Domain && option.ProjectID === value.ProjectID, onChange: (_, value) => handleSelect(value), onClose: () => setQuery(""), value: value !== undefined ? value : selected, renderInput: (params) => (_jsx(TextField, { ...params, label: label ? label : getLocalizedString("Project ID"), id: id ?? "ProjectLookup", fullWidth: true, slotProps: {
+                        input: params.slotProps?.input,
+                        inputLabel: params.slotProps?.inputLabel,
                         htmlInput: {
                             readOnly,
-                            ...params.inputProps,
+                            ...params.slotProps?.htmlInput,
                         },
                     }, autoComplete: "off", variant: "filled", required: required, onChange: (evt) => setQuery(evt.target.value), value: query })), renderOption: (props, option) => {
                     let isDuplicated = option.ProjectName && duplicatedNames.has(option.ProjectName);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/synergi-react",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "description": "Standalone React component for SynergiWeb and Partner Portal",
   "type": "module",
   "exports": {
@@ -39,8 +39,8 @@
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
     "@olenbetong/appframe-core": "2.11.10",
-    "@olenbetong/appframe-react": "1.21.22",
-    "@olenbetong/appframe-mui": "6.0.8"
+    "@olenbetong/appframe-react": "1.21.23",
+    "@olenbetong/appframe-mui": "6.0.10"
   },
   "repository": {
     "type": "git",
@@ -62,6 +62,6 @@
     "build:sass": "sass ./src/index.scss ./dist/styles/styles.css --source-map-urls=relative --style compressed",
     "build:sass:components": "node ./scripts/buildSassComponents.mjs",
     "build:tsc:post": "node ./scripts/replaceCss.mjs",
-    "build:tsc": "rm -rf ./es tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json"
+    "build:tsc": "node --no-warnings ../../scripts/clean.ts ./es tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json"
   }
 }

package/src/elements/ElementDamage/DuplicateDamage/DesktopView.tsx

@@ -16,16 +16,18 @@ function SummaryItem({ col, label, children, em, align, padding }: SummaryItemPr
 	return (
 		<Grid size={col} sx={{ p: padding ?? 2, borderBottom: (t) => `1px solid ${t.palette.divider}` }}>
 			{label && (
-				<Typography variant="body1" fontSize="0.9rem" fontWeight={500} mb={1} textAlign={align}>
+				<Typography variant="body1" sx={{ fontSize: "0.9rem", fontWeight: 500, mb: 1, textAlign: align }}>
 					{getLocalizedString(label)}
 				</Typography>
 			)}
 			{children && (
 				<Typography
-					fontSize={em ? "1.4rem" : "0.9rem"}
-					whiteSpace="pre-line"
-					fontWeight={em ? 600 : undefined}
-					textAlign={align}
+					sx={{
+						fontSize: em ? "1.4rem" : "0.9rem",
+						fontWeight: em ? 600 : undefined,
+						textAlign: align,
+						whiteSpace: "pre-line",
+					}}
 				>
 					{children}
 				</Typography>

package/src/elements/ElementDamage/DuplicateDamage/PhoneView.tsx

@@ -21,22 +21,22 @@ export function DuplicatePhoneViewItem({ record, linkToDamage }: DuplicatePhoneV
 				<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
 					{record.Date.toLocaleDateString()}
 				</Typography>
-				<Typography variant="h5" mb={1.5}>
+				<Typography variant="h5" sx={{ mb: 1.5 }}>
 					{record.ElementID} - {record.DisplayName}
 				</Typography>
 
 				<Typography>{getLocalizedString("Description")}:</Typography>
-				<Typography mb={1.5} color="text.secondary">
+				<Typography sx={{ mb: 1.5 }} color="text.secondary">
 					{record.Description}
 				</Typography>
 
 				<Typography>{getLocalizedString("Cause")}: </Typography>
-				<Typography mb={1.5} color="text.secondary">
+				<Typography sx={{ mb: 1.5 }} color="text.secondary">
 					{record.Cause}
 				</Typography>
 
 				<Typography>{getLocalizedString("Action")}: </Typography>
-				<Typography mb={1.5} color="text.secondary">
+				<Typography sx={{ mb: 1.5 }} color="text.secondary">
 					{record.Action}
 				</Typography>
 			</CardContent>

package/src/elements/ElementDamage/RegisterFix.tsx

@@ -91,7 +91,7 @@ export function RegisterFix({ value, defaultValue, onFix, edit }: RegisterFixPro
 			)}
 
 			{fixValue?.RegisteredFix && (
-				<Typography mb={1.5} color="text.secondary">
+				<Typography sx={{ mb: 1.5 }} color="text.secondary">
 					{localize`Registered fix by ${fixValue.RegisteredFixFullName ?? fixValue.RegisteredFixBy} on the ${formatter.format(fixValue.RegisteredFix)}`}
 				</Typography>
 			)}

package/src/elements/ElementLookupDialog/BarcodeScanner/index.tsx

@@ -39,7 +39,7 @@ export function BarcodeScanner({ onRead }: BarcodeScannerProps) {
 				height: "100%",
 			}}
 		>
-			<Box height="100%" ref={readerRoot}>
+			<Box sx={{ height: "100%" }} ref={readerRoot}>
 				<Box component="video" className="dbrScanner-video" playsInline sx={frameSx} />
 				<Box component="canvas" sx={frameSx} width="1280" height="720" ref={canvas} />
 				{error && <ErrorIcon {...error} />}

package/src/elements/ElementLookupDialog/HIDScanner/index.tsx

@@ -38,17 +38,17 @@ export function AddElementHIDScanner({ onScan }: { onScan: (id: string) => void
 
 	return (
 		<Box
-			height="100%"
-			bgcolor="#ddd"
-			display="flex"
-			alignItems="center"
-			justifyContent="center"
-			tabIndex={0}
-			ref={root}
 			sx={{
+				height: "100%",
+				bgcolor: "#ddd",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
 				backgroundImage: enabled ? "linear-gradient(var(--angle), #777, #bbb, #777)" : "none",
 				animation: enabled ? "MovingBackground 8s linear infinite" : "none",
 			}}
+			tabIndex={0}
+			ref={root}
 		>
 			{enabled ? (
 				<span>{getLocalizedString("Listening for scanned elements")}...</span>

package/src/elements/ElementLookupDialog/HIDScanner/useHIDScanner.ts

@@ -6,7 +6,7 @@ export function useHIDScanner(onRead: (value: string) => void, enabled = false)
 
 		let hexKeys = "ABCDEFabcdefxX0123456789";
 		let buffer = "";
-		let clearBufferTimeout: NodeJS.Timeout;
+		let clearBufferTimeout: number;
 
 		function handleKeyDownEvent(event: KeyboardEvent) {
 			if (hexKeys.includes(event.key)) {

package/src/elements/ElementLookupDialog/index.tsx

@@ -116,19 +116,19 @@ export function ElementLookupDialog(props: ElementLookupDialogProps) {
 				paper: { sx: { overflow: "hidden" } },
 			}}
 		>
-			<Box display="flex" flexDirection="column" maxHeight="100%" overflow="hidden" flexGrow={1}>
+			<Box sx={{ display: "flex", flexDirection: "column", maxHeight: "100%", overflow: "hidden", flexGrow: 1 }}>
 				<Tabs value={tab} onChange={(_, newTab) => setTab(newTab)} variant="fullWidth" sx={{ flexShrink: 0 }}>
 					{props.mode !== "search" && <Tab icon={<Edit />} label={getLocalizedString("Manual")} value="manual" />}
 					<Tab icon={<TapAndPlay />} label={getLocalizedString("Scanner")} value="scanner" />
 					<Tab icon={<QrCodeScanner />} label={getLocalizedString("Camera")} value="camera" />
 				</Tabs>
 				{tab === "camera" && (
-					<Box flexBasis="12rem" flexGrow={1} flexShrink={2}>
+					<Box sx={{ flexBasis: "12rem", flexGrow: 1, flexShrink: 2 }}>
 						<BarcodeScanner onRead={(element) => handleElementAdd(element, "camera-barcode")} />
 					</Box>
 				)}
 				{tab === "manual" && (
-					<Box p={2}>
+					<Box sx={{ p: 2 }}>
 						<AddElementManualForm
 							onAdd={(element) => handleElementAdd(element, "manual")}
 							allowEmptyElement={props.allowEmptyElement}
@@ -136,7 +136,7 @@ export function ElementLookupDialog(props: ElementLookupDialogProps) {
 					</Box>
 				)}
 				{tab === "scanner" && (
-					<Box flexBasis="12rem" flexGrow={1} flexShrink={2}>
+					<Box sx={{ flexBasis: "12rem", flexGrow: 1, flexShrink: 2 }}>
 						<AddElementHIDScanner
 							onScan={(element) =>
 								handleElementAdd(element, element.startsWith(Giai.BARCODE_PREFIX) ? "hid-barcode" : "hid-rfid")
@@ -145,7 +145,7 @@ export function ElementLookupDialog(props: ElementLookupDialogProps) {
 					</Box>
 				)}
 
-				<Box flex="3 1 14rem" overflow="auto">
+				<Box sx={{ flex: "3 1 14rem", overflow: "auto" }}>
 					{props.mode === "multi" && (
 						<Alert
 							icon={false}

package/src/elements/ProjectSelect.tsx

@@ -96,9 +96,11 @@ export function ProjectSelect({
 						id={id ?? "ProjectLookup"}
 						fullWidth
 						slotProps={{
+							input: params.slotProps?.input,
+							inputLabel: params.slotProps?.inputLabel,
 							htmlInput: {
 								readOnly,
-								...params.inputProps,
+								...params.slotProps?.htmlInput,
 							},
 						}}
 						autoComplete="off"

package/src/global.d.ts

@@ -1,2 +1,5 @@
 /// <reference path="@olenbetong/appframe-core" />
 /// <reference path="@olenbetong/appframe-data" />
+
+declare module "*.css" {}
+declare module "*.scss" {}