@linzjs/lui 18.5.1 → 18.6.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [18.6.1](https://github.com/linz/lui/compare/v18.6.0...v18.6.1) (2023-08-14)
+
+
+### Bug Fixes
+
+* **LuiMultiSwitch:** Fix controlled props warning for read-only text input ([#985](https://github.com/linz/lui/issues/985)) ([ac718ee](https://github.com/linz/lui/commit/ac718eeaf08f1e58107098d44ed7497c6b42963b))
+
+# [18.6.0](https://github.com/linz/lui/compare/v18.5.1...v18.6.0) (2023-08-14)
+
+
+### Features
+
+* **LuiMultiSwitch:** Adding ability to disable particular options ([#984](https://github.com/linz/lui/issues/984)) ([7eeddf3](https://github.com/linz/lui/commit/7eeddf3b86e98bf7e9f6748a3db6eb61d2f317d1))
+
 ## [18.5.1](https://github.com/linz/lui/compare/v18.5.0...v18.5.1) (2023-08-13)
 
 

package/dist/components/LuiMultiSwitch/LuiMultiSwitch.d.ts

@@ -4,6 +4,7 @@ export interface LuiMultiSwitchOption<ValueType> {
     value: ValueType;
     shortcutKey?: string;
     className?: string;
+    disabled?: boolean;
 }
 export declare const LuiMultiSwitchYesNo: LuiMultiSwitchOption<boolean>[];
 export interface LuiMultiSwitchProps<ValueType> {

package/dist/index.js

@@ -67825,7 +67825,10 @@ var LuiMultiSwitch = function (_a) {
             switch (_b.label) {
                 case 0:
                     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    if (disabled || updating.current || newSelectedIndex === selectedIndex) {
+                    if (disabled ||
+                        updating.current ||
+                        newSelectedIndex === selectedIndex ||
+                        options[newSelectedIndex].disabled) {
                         return [2 /*return*/];
                     }
                     if (isUncontrolled) {
@@ -67862,7 +67865,7 @@ var LuiMultiSwitch = function (_a) {
         select(newSelectedIndex).then();
     };
     return (React__default["default"].createElement("div", { className: clsx('LuiMultiSwitch', className), role: 'radiogroup', "data-testid": props['data-testid'] },
-        React__default["default"].createElement("input", { ref: inputRef, name: id.current, type: 'text', value: selectedIndex, autoFocus: autoFocus, onKeyUp: function (e) {
+        React__default["default"].createElement("input", { ref: inputRef, readOnly: true, name: id.current, type: 'text', value: selectedIndex, autoFocus: autoFocus, onKeyUp: function (e) {
                 e.key === 'ArrowLeft' && selectOffset(-1);
                 e.key === 'ArrowRight' && selectOffset(1);
                 e.key === ' ' && selectOffset(1, true);
@@ -67870,7 +67873,7 @@ var LuiMultiSwitch = function (_a) {
                     return e.key && e.key === option.shortcutKey && select(i).then();
                 });
             } }),
-        React__default["default"].createElement("div", { className: clsx('LuiMultiSwitch-labels', disabled && 'LuiMultiSwitch-disabled') }, options === null || options === void 0 ? void 0 : options.map(function (option, i) { return (React__default["default"].createElement("label", { role: 'radio', key: i, htmlFor: id.current, "aria-disabled": disabled, "aria-checked": selectedIndex === i, className: option.className, onClick: function () { return select(i); }, onTouchStart: function () { return select(i); } }, option.text)); }))));
+        React__default["default"].createElement("div", { className: clsx('LuiMultiSwitch-labels', disabled && 'LuiMultiSwitch-disabled') }, options === null || options === void 0 ? void 0 : options.map(function (option, i) { return (React__default["default"].createElement("label", { role: 'radio', key: i, htmlFor: id.current, "aria-disabled": option.disabled || disabled, "aria-checked": selectedIndex === i, className: option.className, onClick: function () { return select(i); }, onTouchStart: function () { return select(i); } }, option.text)); }))));
 };
 
 var css_248z$5 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiListBox {\n  padding: 0;\n  list-style: none;\n}\n.LuiListBox .LuiListBoxItem {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  user-select: none;\n  color: #2a292c;\n  line-height: 24px;\n  outline: none;\n  padding: 0.5rem 0.75rem;\n  border: 2px solid transparent;\n}\n.LuiListBox .LuiListBoxItem:focus-visible {\n  border-color: #007198;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-selected {\n  background: #e2f3f7;\n}\n.LuiListBox .LuiListBoxItem:hover, .LuiListBox .LuiListBoxItem.LuiListBoxItem-selected:hover {\n  background: #d6eef4;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-disabled {\n  background: #eaeaea;\n}\n.LuiListBox .LuiListBox-emptyIndicator, .LuiListBox .LuiListBox-loadingIndicator {\n  padding: 0.5rem 0.75rem;\n}\n.LuiListBox .LuiListBoxGroup .LuiListBoxGroup-heading {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  user-select: none;\n  color: #6b6966;\n  line-height: 16px;\n  padding: 0.5rem 0.5rem;\n}";