@linzjs/lui 22.7.0 → 22.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/components/common/Hooks.d.ts +4 -0
- package/dist/index.js +15 -3
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +15 -3
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/lui.esm.js
CHANGED
|
@@ -39896,7 +39896,17 @@ var usePageClickFunction = function (onClickInsideArg, onClickOutsideArg) {
|
|
|
39896
39896
|
};
|
|
39897
39897
|
}, [elementRef, onClickInside, onClickOutside]);
|
|
39898
39898
|
return elementRef;
|
|
39899
|
-
};
|
|
39899
|
+
};
|
|
39900
|
+
/**
|
|
39901
|
+
* Provides a stable ID across renders, can be replaced in react 18+ by native implementation
|
|
39902
|
+
*/
|
|
39903
|
+
function useId() {
|
|
39904
|
+
var idRef = useRef('');
|
|
39905
|
+
if (idRef.current === '') {
|
|
39906
|
+
idRef.current = v4();
|
|
39907
|
+
}
|
|
39908
|
+
return idRef.current;
|
|
39909
|
+
}
|
|
39900
39910
|
|
|
39901
39911
|
var sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
|
|
39902
39912
|
var buildHideClassDict = function (_a) {
|
|
@@ -42270,6 +42280,8 @@ var _a;
|
|
|
42270
42280
|
var LuiModalV2 = function (props) {
|
|
42271
42281
|
var _a;
|
|
42272
42282
|
var modalRef = useRef(null);
|
|
42283
|
+
var rootId = useId();
|
|
42284
|
+
var headingTextId = "".concat(rootId, "_headingText");
|
|
42273
42285
|
var handleClickOutside = useCallback(function () { var _a; return props.shouldCloseOnOverlayClick && ((_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props)); }, [props.shouldCloseOnEsc, props.onClose]);
|
|
42274
42286
|
useClickedOutsideElement(modalRef, handleClickOutside);
|
|
42275
42287
|
var handleEsc = useCallback(function (e) {
|
|
@@ -42296,7 +42308,7 @@ var LuiModalV2 = function (props) {
|
|
|
42296
42308
|
// disble the `shouldClose` props as we handle them ourselves
|
|
42297
42309
|
shouldCloseOnOverlayClick: false, shouldCloseOnEsc: false, overlayClassName: "modal", className: props.lowContrast ? 'lui-scrim-low-contrast' : 'lui-scrim', appElement: document.getElementById('root'),
|
|
42298
42310
|
// required to prevent warnings that are not applicable in real usage
|
|
42299
|
-
ariaHideApp: !isTest, parentSelector: props.appendToElement },
|
|
42311
|
+
ariaHideApp: !isTest, parentSelector: props.appendToElement, aria: { labelledby: props.headingText ? headingTextId : undefined } },
|
|
42300
42312
|
React__default.createElement("div", { ref: function (el) {
|
|
42301
42313
|
modalRef.current = el;
|
|
42302
42314
|
handleAutoFocus(el);
|
|
@@ -42305,7 +42317,7 @@ var LuiModalV2 = function (props) {
|
|
|
42305
42317
|
props.isLoading && (React__default.createElement(LuiMiniSpinner, { size: 20, divProps: { className: 'lui-modal-v2-header-spinner' } })),
|
|
42306
42318
|
showHeadingIcon && (React__default.createElement("div", { className: "lui-modal-v2-header-icon" },
|
|
42307
42319
|
React__default.createElement(LuiIcon, __assign({ size: "md", name: "", alt: "Help" }, props.headingIcon, { className: clsx('', (_a = props.headingIcon) === null || _a === void 0 ? void 0 : _a.className) })))),
|
|
42308
|
-
props.headingText && (React__default.createElement("h2", { className: "lui-modal-v2-header-title" }, props.headingText)),
|
|
42320
|
+
props.headingText && (React__default.createElement("h2", { id: headingTextId, className: "lui-modal-v2-header-title" }, props.headingText)),
|
|
42309
42321
|
showButtons && (React__default.createElement("div", { className: "lui-modal-v2-header-buttons" },
|
|
42310
42322
|
showHelpButton && React__default.createElement(HelpButton, { helpLink: props.helpLink }),
|
|
42311
42323
|
showCloseButton && React__default.createElement(CloseButton, { onClose: props.onClose })))),
|