@linzjs/lui 24.2.0 → 24.3.1

package/CHANGELOG.md

@@ -5,6 +5,22 @@
 
 * **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.1](https://github.com/linz/Lui/compare/lui-v24.3.0...lui-v24.3.1) (2025-11-24)
+
+
+### Bug Fixes
+
+* **LuiModal:** add tabindex prop for modal controller ([45d8a36](https://github.com/linz/Lui/commit/45d8a36a4cc723559de1caaa89a9a38de7a10045))
+* **LuiModal:** add tabindex prop for modal controller ([45d8a36](https://github.com/linz/Lui/commit/45d8a36a4cc723559de1caaa89a9a38de7a10045))
+* **LuiModal:** SEARCH-7756 add tabindex prop for modal controller ([#1290](https://github.com/linz/Lui/issues/1290)) ([45d8a36](https://github.com/linz/Lui/commit/45d8a36a4cc723559de1caaa89a9a38de7a10045))
+
+## [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/components/Drawer/Drawer.d.ts

@@ -3,7 +3,7 @@ import { Splitter } from '../Splitter/Splitter';
 import './Drawer.scss';
 import { UseDisableParentScroll } from './utils';
 type Position = 'top' | 'bottom' | 'left' | 'right';
-export type DrawerProps = PropsWithChildren<{
+type BaseDrawerProps = {
     /** It's not recommended to make this prop dynamic during runtime as it might affect the opening animation. See the `Positions` story for more info. */
     position?: Position;
     /** Drawer open state is fully handled by the parent */
@@ -39,6 +39,7 @@ export type DrawerProps = PropsWithChildren<{
     mountChildrenOn?: 'mount' | 'first-open';
     /** Called when the drawer is resized either manually or programmatically.  */
     onResized?: ComponentProps<typeof Splitter>['onResized'];
-}> & Omit<ComponentProps<typeof Splitter>, 'ratio' | 'orientation' | 'onResized' | 'startAt' | 'min' | 'max'>;
+};
+export type DrawerProps = PropsWithChildren<BaseDrawerProps> & Omit<ComponentProps<typeof Splitter>, 'ratio' | 'orientation' | 'onResized' | 'startAt' | 'min' | 'max'>;
 export declare const Drawer: React.ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/LuiModal/LuiModalV2.d.ts

@@ -21,6 +21,8 @@ export type LuiModalV2Props = {
     preventAutoFocus?: boolean;
     /** By default, the modal portal will be appended to the document's body, but we might need to append it to another element. This is passed the React Modal `parentSelector` prop. */
     appendToElement?: () => HTMLElement;
+    /** Sets the tab index of the modal container */
+    tabIndex?: number | null;
 };
 /** Implements the [updated modal design system](https://www.figma.com/design/E7g3n5ziI7bR8MisISayia/FigLUI?node-id=9924-54717&t=q2r6Gct1cKGP9Q5B-0), keeping the same api as `LuiModal` as much as possible. */
 export declare const LuiModalV2: {

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

@@ -83,5 +83,10 @@ export { useToast } from './components/Toast';
 export { LuiMessagingContextProvider, useShowLUIMessage, LuiToastMessage, } from './components/Toast/Upgrade';
 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 { Drawer } from './components/Drawer/Drawer';
+export type { DrawerProps } from './components/Drawer/Drawer';
+export { DrawerGlobal } from './components/Drawer/DrawerGlobal';
+export type { 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)),
@@ -18266,7 +18391,23 @@ var LuiModalV2 = function (props) {
                 showButtons && (React__default["default"].createElement("div", { className: "lui-modal-v2-header-buttons" },
                     showHelpButton && React__default["default"].createElement(HelpButton, { helpLink: props.helpLink }),
                     showCloseButton && React__default["default"].createElement(CloseButton, { onClose: props.onClose })))),
-            React__default["default"].createElement("div", { className: "lui-modal-v2-contents" }, props.children))));
+            React__default["default"].createElement(ModalContents, { children: props.children, tabIndex: props.tabIndex }))));
+};
+var ModalContents = function (props) {
+    React.useEffect(function () {
+        var modalContent = document.querySelector('.ReactModal__Content');
+        if (props.tabIndex === undefined || !modalContent)
+            return;
+        switch (props.tabIndex) {
+            case null:
+                modalContent === null || modalContent === void 0 ? void 0 : modalContent.removeAttribute('tabindex');
+                break;
+            default:
+                modalContent === null || modalContent === void 0 ? void 0 : modalContent.setAttribute('tabindex', props.tabIndex.toString());
+                break;
+        }
+    }, []);
+    return React__default["default"].createElement("div", { className: "lui-modal-v2-contents" }, props.children);
 };
 var ButtonRow = function (props) { return (React__default["default"].createElement("div", { className: clsx$1('lui-modal-v2-btn-row', props.className) }, props.children)); };
 LuiModalV2.Buttons = ButtonRow;
@@ -41344,6 +41485,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 +41530,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 +41601,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;