@linzjs/lui 24.2.0 → 24.3.1

package/dist/lui.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef as forwardRef$1, useState, useRef, useCallback, useEffect, useContext, Fragment, useLayoutEffect, createContext, useMemo, Component, cloneElement, useId as useId$1, useInsertionEffect as useInsertionEffect$1, Children, isValidElement, createElement, useImperativeHandle, useReducer } from 'react';
+import React__default, { forwardRef as forwardRef$1, useState, useRef, useCallback, useEffect, useContext, createContext, Fragment, useLayoutEffect, useMemo, Component, cloneElement, useId as useId$1, useInsertionEffect as useInsertionEffect$1, Children, isValidElement, createElement, useImperativeHandle, useReducer } from 'react';
 import { Menu as Menu$2, ControlledMenu, applyStatics, MenuItem, SubMenu, MenuDivider, MenuHeader, useMenuState, FocusableItem } from '@szhsin/react-menu';
 import lottie from 'lottie-web/build/player/lottie_light';
 import crypto$1 from 'crypto';
@@ -6989,6 +6989,113 @@ var DateInput = forwardRef$1(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 = createContext({
+    filterCharacters: function (input) {
+        // Default implementation: return input as is.
+        return input;
+    },
+    filterInputEvent: function () {
+        // Default implementation: do nothing.
+        return;
+    }
+});
+function useFilterCharacters() {
+    return useContext(LuiFilterCharactersContext);
+}
+var LuiFilterCharactersProvider = function (_a) {
+    var children = _a.children, filterFunction = _a.filterFunction;
+    var filterCharacters = useCallback(function (input) {
+        if (input === undefined) {
+            return input;
+        }
+        var filter = typeof filterFunction === 'function'
+            ? filterFunction
+            : LinzFreeTextFilter;
+        return filter(input);
+    }, [filterFunction]);
+    var filterInputEvent = 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.createElement(LuiFilterCharactersContext.Provider, { value: { filterCharacters: filterCharacters, filterInputEvent: filterInputEvent } }, children));
+};
+
 function useGenerateOrDefaultId(idFromProps) {
     var id = useState(idFromProps ? idFromProps : v4())[0];
     return id;
@@ -6997,6 +7104,7 @@ var BareInput = forwardRef$1(function (props, ref) { return React__default.creat
 var LuiTextInput = forwardRef$1(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.createElement("div", { className: clsx$1('LuiTextInput', props.error && 'hasError', props.warning && 'hasWarning', props.className) },
         React__default.createElement("label", { className: 'LuiTextInput-label', htmlFor: id },
@@ -7004,7 +7112,15 @@ var LuiTextInput = forwardRef$1(function (props, ref) {
             React__default.createElement("span", { className: 'LuiTextInput-label-text ' +
                     clsx$1(props.hideLabel ? 'LuiScreenReadersOnly' : '') }, props.label),
             React__default.createElement("span", { className: "LuiTextInput-inputWrapper" },
-                React__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.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.createElement("span", { className: "LuiTextInput-error" },
                 React__default.createElement(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }),
@@ -7149,13 +7265,22 @@ var LuiSelectInput = function (props) {
 var LuiTextAreaInput = React__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.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.createElement("label", { htmlFor: id },
             props.mandatory && (React__default.createElement("span", { className: "LuiTextAreaInput-mandatory" }, "*")),
             React__default.createElement("span", { className: "LuiTextAreaInput-label" }, props.label),
             React__default.createElement("div", { className: "LuiTextAreaInput-wrapper" },
-                React__default.createElement("textarea", __assign({ id: id, value: props.value, onChange: props.onChange, ref: ref, rows: rows }, props.inputProps)))),
+                React__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.createElement("span", { className: "LuiTextAreaInput-error" },
             React__default.createElement(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextAreaInput-error-icon", size: "sm", status: "error" }),
             props.error)),
@@ -18237,7 +18362,23 @@ var LuiModalV2 = function (props) {
                 showButtons && (React__default.createElement("div", { className: "lui-modal-v2-header-buttons" },
                     showHelpButton && React__default.createElement(HelpButton, { helpLink: props.helpLink }),
                     showCloseButton && React__default.createElement(CloseButton, { onClose: props.onClose })))),
-            React__default.createElement("div", { className: "lui-modal-v2-contents" }, props.children))));
+            React__default.createElement(ModalContents, { children: props.children, tabIndex: props.tabIndex }))));
+};
+var ModalContents = function (props) {
+    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.createElement("div", { className: "lui-modal-v2-contents" }, props.children);
 };
 var ButtonRow = function (props) { return (React__default.createElement("div", { className: clsx$1('lui-modal-v2-btn-row', props.className) }, props.children)); };
 LuiModalV2.Buttons = ButtonRow;
@@ -41306,5 +41447,5 @@ var DrawerGlobal = forwardRef$1(function (props, ref) {
     return (React__default.createElement(Drawer, __assign({}, props, { ref: ref, isOpen: isOpen, onRequestClose: onRequestClose })));
 });
 
-export { CheckboxItemRenderer, ColorBucket, ColorInput, ColorInputGroup, ColorPalette, Drawer, DrawerGlobal, DrawerGlobalContext, DrawerGlobalProvider, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiAlertModalV2, LuiAppFooterSml, LuiAutoExpandTextAreaInput, LuiBadge, LuiBanner, LuiBannerContent, LuiBannerV2, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiCounter, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorIllustration, LuiErrorPage, LuiErrorPanel, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFooter, LuiFormSectionHeader, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiModalV2, LuiMoneyInput, LuiMultiSwitch, LuiMultiSwitchYesNo, LuiPagination, LuiPassiveSearchInput, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuDivider, LuiSelectMenuHeader, LuiSelectMenuItem, LuiSelectMenuItemSwitch, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiSplitButton, LuiSplitButtonMenuItem, LuiSplitButtonPosition, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, defaultColours, isChromatic, useClickedOutsideElement, useDrawerGlobalContext, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef, useToast };
+export { CheckboxItemRenderer, ColorBucket, ColorInput, ColorInputGroup, ColorPalette, Drawer, DrawerGlobal, DrawerGlobalContext, DrawerGlobalProvider, LinzFreeTextFilter, LinzFreeTextFilterConvertOnly, LinzFreeTextValidator, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiAlertModalV2, LuiAppFooterSml, LuiAutoExpandTextAreaInput, LuiBadge, LuiBanner, LuiBannerContent, LuiBannerV2, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiCounter, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorIllustration, LuiErrorPage, LuiErrorPanel, LuiExpandableBanner, LuiFileInputBox, LuiFilterCharactersProvider, LuiFilterContainer, LuiFilterMenu, LuiFooter, LuiFormSectionHeader, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiModalV2, LuiMoneyInput, LuiMultiSwitch, LuiMultiSwitchYesNo, LuiPagination, LuiPassiveSearchInput, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuDivider, LuiSelectMenuHeader, LuiSelectMenuItem, LuiSelectMenuItemSwitch, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiSplitButton, LuiSplitButtonMenuItem, LuiSplitButtonPosition, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, defaultColours, isChromatic, useClickedOutsideElement, useDrawerGlobalContext, useEscapeFunction, useFilterCharacters, useLuiCloseableHeaderMenuContextV2, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef, useToast };
 //# sourceMappingURL=lui.esm.js.map