@linzjs/lui 21.38.0 → 21.38.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [21.38.2](https://github.com/linz/lui/compare/v21.38.1...v21.38.2) (2024-07-02)
+
+
+### Bug Fixes
+
+* **LuiModalV2:** only call setAppElement when modal mounts ([#1131](https://github.com/linz/lui/issues/1131)) ([10bea9a](https://github.com/linz/lui/commit/10bea9ab56258dec28aba99634bb0240bf52d92c))
+
+## [21.38.1](https://github.com/linz/lui/compare/v21.38.0...v21.38.1) (2024-07-01)
+
+
+### Bug Fixes
+
+* **ColorPalette:** prevent id errors ([#1130](https://github.com/linz/lui/issues/1130)) ([1925e57](https://github.com/linz/lui/commit/1925e576760f523e2b3170ff3a9263b1d1c9bb07))
+
 # [21.38.0](https://github.com/linz/lui/compare/v21.37.0...v21.38.0) (2024-07-01)
 
 

package/dist/components/LuiColourPicker/ColorInput.d.ts

@@ -5,5 +5,5 @@ export declare const ColorInput: React.ForwardRefExoticComponent<{
     name: string;
     color: string;
     description?: string | undefined;
-    label?: Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "aria-label" | "htmlFor"> | undefined;
-} & Omit<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "id" | "name" | "type" | "value"> & React.RefAttributes<HTMLInputElement>>;
+    label?: Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "title" | "aria-label" | "htmlFor"> | undefined;
+} & Omit<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "name" | "type" | "value"> & React.RefAttributes<HTMLInputElement>>;

package/dist/index.js

@@ -42264,6 +42264,11 @@ var LuiModalV2 = function (props) {
     var showHelpButton = Boolean(props.helpLink);
     var showButtons = showCloseButton || showHelpButton;
     var showHeadingIcon = props.headingIcon && !props.isLoading;
+    // this is here for the tests
+    React.useEffect(function () {
+        if (isProcess && !isTest)
+            Modal.setAppElement('#root');
+    }, []);
     return (React__default["default"].createElement(Modal, { key: props.key, isOpen: true, 
         // disble the `shouldClose` props as we handle them ourselves
         shouldCloseOnOverlayClick: false, shouldCloseOnEsc: false, overlayClassName: "modal", className: props.lowContrast ? 'lui-scrim-low-contrast' : 'lui-scrim', 
@@ -42304,10 +42309,8 @@ var HeaderTitle = function (props) {
     return ReactDOM.createPortal(React__default["default"].createElement("h2", { className: clsx('lui-modal-v2-header-title lui-modal-v2-header-title-portal', props.className) }, props.children), target);
 };
 LuiModalV2.HeaderTitle = HeaderTitle;
-// this is here for the tests
-var isTest = typeof process !== 'undefined' && ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test';
-if (!isTest)
-    Modal.setAppElement('#root');
+var isProcess = typeof process !== 'undefined';
+var isTest = isProcess && ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test';
 
 var LuiAlertModalV2 = function (props) {
     var level = props.level, className = props.className, children = props.children, rest = __rest(props, ["level", "className", "children"]);
@@ -59351,10 +59354,13 @@ var ColorInputGroup = React.forwardRef(function (props, ref) {
     return (React__default["default"].createElement("div", __assign({ ref: ref }, props, { role: (_a = props.role) !== null && _a !== void 0 ? _a : 'lui-input-color-group', className: clsx('lui-input-color-group', props.className) })));
 });
 var ColorInput = React.forwardRef(function (props, ref) {
-    var name = props.name, color = props.color, description = props.description, label = props.label, input = __rest(props, ["name", "color", "description", "label"]);
+    var _a;
+    var randomId = $bdb11010cef70236$export$f680877a34711e37();
+    var name = props.name, color = props.color, description = props.description, label = props.label, _b = props.id, id = _b === void 0 ? randomId : _b, input = __rest(props, ["name", "color", "description", "label", "id"]);
+    var title = description || color;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("input", __assign({ ref: ref }, input, { name: name, type: "radio", id: color, value: color, className: clsx('lui-input-color-radio', input.className) })),
-        React__default["default"].createElement("label", __assign({}, label, { htmlFor: color, style: __assign(__assign({}, label === null || label === void 0 ? void 0 : label.style), { color: color, backgroundColor: color }), className: clsx('lui-input-colour-label', label === null || label === void 0 ? void 0 : label.className), "aria-label": description || color, title: description }))));
+        React__default["default"].createElement("input", __assign({ ref: ref }, input, { title: (_a = input.title) !== null && _a !== void 0 ? _a : title, name: name, type: "radio", id: id, value: color, className: clsx('lui-input-color-radio', input.className) })),
+        React__default["default"].createElement("label", __assign({}, label, { htmlFor: id, style: __assign(__assign({}, label === null || label === void 0 ? void 0 : label.style), { color: color, backgroundColor: color }), className: clsx('lui-input-colour-label', label === null || label === void 0 ? void 0 : label.className), "aria-label": description || color, title: description }))));
 });
 
 /**
@@ -59367,7 +59373,7 @@ var ColorInput = React.forwardRef(function (props, ref) {
 var ColorPalette = React.forwardRef(function (_a, ref) {
     var _b;
     var _c = _a.selected, selected = _c === void 0 ? (_b = defaultColours[0]) === null || _b === void 0 ? void 0 : _b.color : _c, onSelect = _a.onSelect; _a.children; var name = _a.name, className = _a.className, divProps = __rest(_a, ["selected", "onSelect", "children", "name", "className"]);
-    var colourGroupIdentifier = v4();
+    var colourGroupIdentifier = $bdb11010cef70236$export$f680877a34711e37();
     return (React__default["default"].createElement(ColorInputGroup, __assign({ ref: ref }, divProps, { className: clsx('lui-color-picker', className) }), defaultColours.map(function (_a) {
         var color = _a.color, description = _a.description;
         return (React__default["default"].createElement(ColorInput, __assign({ key: color, name: name !== null && name !== void 0 ? name : colourGroupIdentifier }, { color: color, description: description }, { checked: color === selected, onChange: function () { return onSelect(color); } })));