@linzjs/lui 21.38.0 → 21.38.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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

@@ -59351,10 +59351,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 +59370,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); } })));