@linzjs/lui 24.2.0 → 24.3.0

package/CHANGELOG.md

@@ -5,6 +5,13 @@
 
 * **LuiComboSelect:** restore interface to support styling of the input element. ([#1270](https://github.com/linz/lui/issues/1270)) ([7ce6a13](https://github.com/linz/lui/commit/7ce6a137c7f16ffa3acbe4357569a6eb59ef47db))
 
+## [24.3.0](https://github.com/linz/Lui/compare/lui-v24.2.0...lui-v24.3.0) (2025-11-20)
+
+
+### Features
+
+* CS-8474 - filter characters in LuiInput ([#1272](https://github.com/linz/Lui/issues/1272)) ([2b58207](https://github.com/linz/Lui/commit/2b58207f2844eb769d9c274f55a5b1b8e2336dcf))
+
 ## [24.2.0](https://github.com/linz/Lui/compare/lui-v24.1.2...lui-v24.2.0) (2025-11-19)
 
 

package/README.md

@@ -50,4 +50,4 @@ There are lots of things to do in this project, often things will be left until
 
 Storybook is the main source of documentation.
 
-- [Lui Storybook](https://linz.github.io/Lui/)
+- [Lui Storybook](https://linz.github.io/Lui/)

package/dist/contexts/LuiFilterCharactersProvider.d.ts

@@ -0,0 +1,11 @@
+import React, { ChangeEvent, PropsWithChildren } from 'react';
+export interface LuiFilterCharactersContext {
+    filterCharacters: (input: string | undefined) => string | undefined;
+    filterInputEvent: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+}
+export declare const LuiFilterCharactersContext: React.Context<LuiFilterCharactersContext>;
+export declare function useFilterCharacters(): LuiFilterCharactersContext;
+export type LuiFilterCharactersProviderProps = {
+    filterFunction?: (input: string) => string;
+};
+export declare const LuiFilterCharactersProvider: ({ children, filterFunction, }: PropsWithChildren<LuiFilterCharactersProviderProps>) => React.JSX.Element;

package/dist/functions/LinzFreeTextFilter.d.ts

@@ -0,0 +1,14 @@
+export type LinzFreeTextFilterType = (value?: string | null) => string;
+/**
+ * Default LINZ free text filter function.
+ * Silently converts some invalid characters with supported alternatives.
+ * Removes all other invalid characters.
+ */
+export declare const LinzFreeTextFilter: LinzFreeTextFilterType;
+/**
+ * LINZ free text filter function that leaves invalid characters intact.
+ * Silently converts some invalid characters with supported alternatives.
+ * Leaves all other invalid characters as is.
+ * Should be paired with LinzFreeTextValidator to warn users about invalid characters.
+ */
+export declare const LinzFreeTextFilterConvertOnly: LinzFreeTextFilterType;

package/dist/functions/LinzFreeTextValidator.d.ts

@@ -0,0 +1,2 @@
+export declare const LinzInvalidCharMatcher: RegExp;
+export declare const LinzFreeTextValidator: (value?: string | null, invalidCharMatcher?: RegExp, maxReportedChars?: number) => string | undefined;

package/dist/index.d.ts

@@ -85,3 +85,6 @@ export { LuiErrorPanel } from './components/LuiErrorPanel/LuiErrorPanel';
 export { DrawerGlobalProvider, useDrawerGlobalContext, DrawerGlobalContext, } from './components/Drawer/DrawerGlobalContext';
 export { Drawer, DrawerProps } from './components/Drawer/Drawer';
 export { DrawerGlobal, DrawerGlobalProps, } from './components/Drawer/DrawerGlobal';
+export { LuiFilterCharactersProvider, useFilterCharacters, } from './contexts/LuiFilterCharactersProvider';
+export { LinzFreeTextValidator } from './functions/LinzFreeTextValidator';
+export { LinzFreeTextFilter, LinzFreeTextFilterConvertOnly, } from './functions/LinzFreeTextFilter';

package/dist/index.js

@@ -7018,6 +7018,113 @@ var DateInput = React.forwardRef(function (props, ref) {
         } })));
 });
 
+// eslint-disable-next-line no-control-regex
+var LinzInvalidCharMatcher = /([^\u0000-\u017f])/gu;
+var LinzFreeTextValidator = function (value, invalidCharMatcher, maxReportedChars) {
+    if (invalidCharMatcher === void 0) { invalidCharMatcher = LinzInvalidCharMatcher; }
+    if (maxReportedChars === void 0) { maxReportedChars = 10; }
+    if (!value) {
+        return undefined;
+    }
+    var matchedItems = value.match(invalidCharMatcher);
+    if (matchedItems === null) {
+        return undefined;
+    }
+    var invalidCharacters = Array.from(new Set(matchedItems)).slice(0, maxReportedChars);
+    return "Invalid character".concat(invalidCharacters.length === 1 ? '' : 's', " ").concat(invalidCharacters.join(', '));
+};
+
+function CreateLinzFreeTextFilter(removeInvalidChars) {
+    if (removeInvalidChars === void 0) { removeInvalidChars = true; }
+    return function (value) {
+        if (!value) {
+            return '';
+        }
+        var strLength = value.length;
+        if (!strLength) {
+            return '';
+        }
+        return Array.prototype.flatMap
+            .call(value, function (char) {
+            // Supported character range
+            if (char.match(LinzInvalidCharMatcher) === null) {
+                return char;
+            }
+            var charCode = char.charCodeAt(0);
+            // Silent conversion characters
+            // why: https://toitutewhenua.atlassian.net/wiki/spaces/STEP/pages/124322198/Minimum+Text+Validation#Silent-conversion-characters
+            switch (charCode) {
+                case 0x2018:
+                case 0x2019:
+                    return "'";
+                case 0x201c:
+                case 0x201d:
+                    return '"';
+                case 0x2022:
+                    return '*';
+                case 0x2013:
+                case 0x2014:
+                    return '-';
+            }
+            return removeInvalidChars ? '' : char;
+        })
+            .join('');
+    };
+}
+/**
+ * Default LINZ free text filter function.
+ * Silently converts some invalid characters with supported alternatives.
+ * Removes all other invalid characters.
+ */
+var LinzFreeTextFilter = CreateLinzFreeTextFilter(true);
+/**
+ * LINZ free text filter function that leaves invalid characters intact.
+ * Silently converts some invalid characters with supported alternatives.
+ * Leaves all other invalid characters as is.
+ * Should be paired with LinzFreeTextValidator to warn users about invalid characters.
+ */
+var LinzFreeTextFilterConvertOnly = CreateLinzFreeTextFilter(false);
+
+var LuiFilterCharactersContext = React.createContext({
+    filterCharacters: function (input) {
+        // Default implementation: return input as is.
+        return input;
+    },
+    filterInputEvent: function () {
+        // Default implementation: do nothing.
+        return;
+    }
+});
+function useFilterCharacters() {
+    return React.useContext(LuiFilterCharactersContext);
+}
+var LuiFilterCharactersProvider = function (_a) {
+    var children = _a.children, filterFunction = _a.filterFunction;
+    var filterCharacters = React.useCallback(function (input) {
+        if (input === undefined) {
+            return input;
+        }
+        var filter = typeof filterFunction === 'function'
+            ? filterFunction
+            : LinzFreeTextFilter;
+        return filter(input);
+    }, [filterFunction]);
+    var filterInputEvent = React.useCallback(function (event) {
+        var value = event.target.value;
+        var filteredValue = filterCharacters(value);
+        if (filteredValue !== value) {
+            var caretPosition = event.target.selectionStart;
+            event.target.value = filteredValue;
+            if (caretPosition !== null) {
+                var positionOffset = value.length - filteredValue.length;
+                var newCaretPosition = Math.max(caretPosition - positionOffset, 0);
+                event.target.setSelectionRange(newCaretPosition, newCaretPosition);
+            }
+        }
+    }, [filterFunction]);
+    return (React__default["default"].createElement(LuiFilterCharactersContext.Provider, { value: { filterCharacters: filterCharacters, filterInputEvent: filterInputEvent } }, children));
+};
+
 function useGenerateOrDefaultId(idFromProps) {
     var id = React.useState(idFromProps ? idFromProps : v4())[0];
     return id;
@@ -7026,6 +7133,7 @@ var BareInput = React.forwardRef(function (props, ref) { return React__default["
 var LuiTextInput = React.forwardRef(function (props, ref) {
     var _a, _b, _c;
     var id = useGenerateOrDefaultId((_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.id);
+    var filterInputEvent = useFilterCharacters().filterInputEvent;
     var LuiInput = ((_b = props.inputProps) === null || _b === void 0 ? void 0 : _b.type) === 'date' ? DateInput : BareInput;
     return (React__default["default"].createElement("div", { className: clsx$1('LuiTextInput', props.error && 'hasError', props.warning && 'hasWarning', props.className) },
         React__default["default"].createElement("label", { className: 'LuiTextInput-label', htmlFor: id },
@@ -7033,7 +7141,15 @@ var LuiTextInput = React.forwardRef(function (props, ref) {
             React__default["default"].createElement("span", { className: 'LuiTextInput-label-text ' +
                     clsx$1(props.hideLabel ? 'LuiScreenReadersOnly' : '') }, props.label),
             React__default["default"].createElement("span", { className: "LuiTextInput-inputWrapper" },
-                React__default["default"].createElement(LuiInput, __assign({ ref: ref, className: clsx$1('LuiTextInput-input', props.showPadlockIcon ? 'LuiTextInput-padlock-icon ' : '', props.size ? "LuiTextInput-".concat(props.size) : ''), min: ((_c = props.inputProps) === null || _c === void 0 ? void 0 : _c.type) === 'date' ? undefined : '0', value: props.value, onChange: props.onChange }, props.inputProps, { id: id })),
+                React__default["default"].createElement(LuiInput, __assign({ ref: ref, className: clsx$1('LuiTextInput-input', props.showPadlockIcon ? 'LuiTextInput-padlock-icon ' : '', props.size ? "LuiTextInput-".concat(props.size) : ''), min: ((_c = props.inputProps) === null || _c === void 0 ? void 0 : _c.type) === 'date' ? undefined : '0', value: props.value, onChange: function (event) {
+                        var _a;
+                        if (((_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.type) !== 'date') {
+                            filterInputEvent(event);
+                        }
+                        if (props.onChange) {
+                            props.onChange(event);
+                        }
+                    } }, props.inputProps, { id: id })),
                 props.icon),
             props.error && (React__default["default"].createElement("span", { className: "LuiTextInput-error" },
                 React__default["default"].createElement(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }),
@@ -7178,13 +7294,22 @@ var LuiSelectInput = function (props) {
 var LuiTextAreaInput = React__default["default"].forwardRef(function (props, ref) {
     var _a, _b;
     var id = useGenerateOrDefaultId((_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.id);
+    var filterInputEvent = useFilterCharacters().filterInputEvent;
     var rows = props.rows !== undefined ? props.rows : 5;
     return (React__default["default"].createElement("div", { className: clsx$1('LuiTextAreaInput', ((_b = props.inputProps) === null || _b === void 0 ? void 0 : _b.disabled) ? 'isDisabled' : '', props.error ? 'hasError' : '', props.warning ? 'hasWarning' : '') },
         React__default["default"].createElement("label", { htmlFor: id },
             props.mandatory && (React__default["default"].createElement("span", { className: "LuiTextAreaInput-mandatory" }, "*")),
             React__default["default"].createElement("span", { className: "LuiTextAreaInput-label" }, props.label),
             React__default["default"].createElement("div", { className: "LuiTextAreaInput-wrapper" },
-                React__default["default"].createElement("textarea", __assign({ id: id, value: props.value, onChange: props.onChange, ref: ref, rows: rows }, props.inputProps)))),
+                React__default["default"].createElement("textarea", __assign({ id: id, value: props.value, onChange: function (event) {
+                        var _a;
+                        if (((_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.type) !== 'date') {
+                            filterInputEvent(event);
+                        }
+                        if (props.onChange) {
+                            props.onChange(event);
+                        }
+                    }, ref: ref, rows: rows }, props.inputProps)))),
         props.error && (React__default["default"].createElement("span", { className: "LuiTextAreaInput-error" },
             React__default["default"].createElement(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextAreaInput-error-icon", size: "sm", status: "error" }),
             props.error)),
@@ -41344,6 +41469,9 @@ exports.Drawer = Drawer;
 exports.DrawerGlobal = DrawerGlobal;
 exports.DrawerGlobalContext = DrawerGlobalContext;
 exports.DrawerGlobalProvider = DrawerGlobalProvider;
+exports.LinzFreeTextFilter = LinzFreeTextFilter;
+exports.LinzFreeTextFilterConvertOnly = LinzFreeTextFilterConvertOnly;
+exports.LinzFreeTextValidator = LinzFreeTextValidator;
 exports.LuiAccordicard = LuiAccordicard;
 exports.LuiAccordicardStatic = LuiAccordicardStatic;
 exports.LuiAccordion = LuiAccordion;
@@ -41386,6 +41514,7 @@ exports.LuiErrorPage = LuiErrorPage;
 exports.LuiErrorPanel = LuiErrorPanel;
 exports.LuiExpandableBanner = LuiExpandableBanner;
 exports.LuiFileInputBox = LuiFileInputBox;
+exports.LuiFilterCharactersProvider = LuiFilterCharactersProvider;
 exports.LuiFilterContainer = LuiFilterContainer;
 exports.LuiFilterMenu = LuiFilterMenu;
 exports.LuiFooter = LuiFooter;
@@ -41456,6 +41585,7 @@ exports.isChromatic = isChromatic;
 exports.useClickedOutsideElement = useClickedOutsideElement;
 exports.useDrawerGlobalContext = useDrawerGlobalContext;
 exports.useEscapeFunction = useEscapeFunction;
+exports.useFilterCharacters = useFilterCharacters;
 exports.useLuiCloseableHeaderMenuContextV2 = useLuiCloseableHeaderMenuContextV2;
 exports.useMediaQuery = useMediaQuery;
 exports.usePageClickFunction = usePageClickFunction;