New source found from dndbeyond.com

ddb_main/tools/js/Shared/containers/panes/DefenseManagePane/DefenseManagePane.tsx

@@ -1,12 +1,13 @@
+import clsx from "clsx";
 import { sortBy } from "lodash";
 import React from "react";
 import { connect, DispatchProp } from "react-redux";
+import { AnyAction } from "redux";
 
 import {
   Collapsible,
   DamageTypeIcon,
   DataOriginName,
-  Select,
   ComponentConstants,
 } from "@dndbeyond/character-components/es";
 import {
@@ -29,8 +30,10 @@ import {
   CharacterTheme,
 } from "@dndbeyond/character-rules-engine/es";
 
+import { Select } from "~/components/Select";
 import { useSidebar } from "~/contexts/Sidebar";
 import { PaneInfo } from "~/contexts/Sidebar/Sidebar";
+import formStyles from "~/subApps/builder/styles/form.module.css";
 import { Header } from "~/subApps/sheet/components/Sidebar/components/Header";
 import { getDataOriginComponentInfo } from "~/subApps/sheet/components/Sidebar/helpers/paneUtils";
 import { PaneComponentEnum } from "~/subApps/sheet/components/Sidebar/types";
@@ -38,6 +41,7 @@ import { PaneComponentEnum } from "~/subApps/sheet/components/Sidebar/types";
 import * as appEnvSelectors from "../../../selectors/appEnv";
 import { SharedAppState } from "../../../stores/typings";
 import DefenseManagePaneCustomItem from "./DefenseManagePaneCustomItem";
+import styles from "./styles.module.css";
 
 const DEFENSE_ADJUSTMENT_TYPE_OPTION = {
   RESISTANCE: 1,
@@ -54,7 +58,9 @@ interface AdjustmentGroupInfo {
   adjustments: Array<AdjustmentGroupEntry>;
 }
 
-interface Props extends DispatchProp {
+// TODO: We are typing with AnyAction here to work around issues with UnknownAction, the type that was introduced in Redux 5.
+// If we decide to modernize to Redux 5, we will need to refactor much of the Rules Engine redux usage.
+interface Props extends DispatchProp<AnyAction> {
   resistances: Array<DefenseAdjustment>;
   immunities: Array<DefenseAdjustment>;
   vulnerabilities: Array<DefenseAdjustment>;
@@ -324,7 +330,7 @@ class DefenseManagePane extends React.PureComponent<Props, State> {
       { label: "Vulnerabilities", adjustments: [] },
     ];
     customDefenseAdjustments.forEach((defenseAdjustment, newDefIdx) => {
-      const { type, adjustmentId, source } = defenseAdjustment;
+      const { type, adjustmentId } = defenseAdjustment;
 
       let groupIdx: number | null = null;
       let definition:
@@ -484,26 +490,30 @@ class DefenseManagePane extends React.PureComponent<Props, State> {
         header="Customize"
         className="ct-defense-manage-pane__custom"
       >
-        <div className="ct-defense-manage-pane__custom-fields">
-          <div className="dct-defense-manage-pane__custom-field">
+        <label className={clsx([formStyles.label, styles.label])}>
+          Defense Type
+        </label>
+        <Select
+          options={adjustmentTypeOptions}
+          onChange={this.handleChangeAdjustmentType}
+          value={adjustmentType}
+          name="defense-adjustment-type"
+        />
+        {adjustmentType !== null && (
+          <>
+            <label className={clsx([formStyles.label, styles.label])}>
+              Defense Sub-Type
+            </label>
             <Select
-              options={adjustmentTypeOptions}
-              onChange={this.handleChangeAdjustmentType}
-              value={adjustmentType}
+              options={sortBy(adjustmentSubTypeOptions, "label")}
+              onChange={this.handleChangeAdjustmentSubType}
+              resetAfterChoice={true}
+              placeholder={subTypePlaceholder}
+              value={null}
+              name="defense-adjustment-sub-type"
             />
-          </div>
-          <div className="ct-defense-manage-pane__custom-field">
-            {adjustmentType !== null && (
-              <Select
-                options={sortBy(adjustmentSubTypeOptions, "label")}
-                onChange={this.handleChangeAdjustmentSubType}
-                resetAfterChoice={true}
-                placeholder={subTypePlaceholder}
-                value={null}
-              />
-            )}
-          </div>
-        </div>
+          </>
+        )}
         <div className="ct-defense-manage-pane__custom-items">
           {this.renderCustomDefenseAdjustmentList()}
         </div>
@@ -523,11 +533,11 @@ class DefenseManagePane extends React.PureComponent<Props, State> {
     const { resistances, vulnerabilities, immunities } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         {this.renderDamageAdjustmentGroup("Resistances", resistances)}
         {this.renderDamageAdjustmentGroup("Immunities", immunities)}
         {this.renderDamageAdjustmentGroup("Vulnerabilities", vulnerabilities)}
-      </React.Fragment>
+      </>
     );
   };