DEV: adds support for disabled in select-kit (#35037)

If you row has `disabled` as property it will be used to disable the
row.

app/assets/javascripts/discourse/tests/integration/components/select-kit/single-select-test.gjs

@@ -576,4 +576,25 @@ module("Integration | Component | select-kit/single-select", function (hooks) {
       .hasAttribute("type", "hidden")
       .hasAttribute("value", "1");
   });
+
+  test("disabled", async function (assert) {
+    const self = this;
+
+    this.setProperties({
+      content: [{ id: 1, name: "john", disabled: true }],
+      value: null,
+    });
+
+    await render(
+      <template>
+        <SingleSelect @value={{self.value}} @content={{self.content}} />
+      </template>
+    );
+
+    await this.subject.expand();
+
+    assert
+      .dom('.select-kit-row.disabled[data-index="0"][aria-disabled]')
+      .exists();
+  });
 });

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.gjs

@@ -27,14 +27,16 @@ import selectKitPropUtils from "select-kit/lib/select-kit-prop-utils";
   "role",
   "ariaChecked:aria-checked",
   "guid:data-guid",
-  "rowLang:lang"
+  "rowLang:lang",
+  "rowDisabled:aria-disabled"
 )
 @classNameBindings(
   "isHighlighted",
   "isSelected",
   "isNone",
   "isNone:none",
-  "item.classNames"
+  "item.classNames",
+  "rowDisabled:disabled"
 )
 @selectKitPropUtils
 export default class SelectKitRow extends Component {
@@ -116,6 +118,7 @@ export default class SelectKitRow extends Component {
       rowLabel: this.getProperty(this.item, "labelProperty"),
       rowTitle: this.getProperty(this.item, "titleProperty"),
       rowLang: this.getProperty(this.item, "langProperty"),
+      rowDisabled: this.getProperty(this.item, "disabled"),
     });
   }
 

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -215,6 +215,11 @@
     justify-content: flex-start;
     padding: 0.5em;
 
+    &.disabled {
+      pointer-events: none;
+      opacity: 0.4;
+    }
+
     > * {
       pointer-events: none;
     }