dce-reactkit 3.6.10 → 3.6.11

package/dist/cjs/types/components/MultiSwitch.d.ts

@@ -2,6 +2,7 @@
  * A switch with multiple options for selection
  * @author Alessandra De Lucas
  * @author Gabe Abrams
+ * @author Austen Money
  */
 import React from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';

package/dist/esm/index.js

@@ -41147,10 +41147,35 @@ const AutoscrollToBottomContainer = (props) => {
             messageAfterItems)));
 };
 
+/**
+ * Merges a list of class names into a class name, intelligently handling spaces
+ * @author Gabe Abrams
+ * @param classNames the list of class names to merge
+ * @returns the merged class name
+ */
+const combineClassNames = (classNames) => {
+    return (classNames
+        // Trim whitespace
+        .map((className) => {
+        return className.trim();
+    })
+        // Remove empty class names
+        .filter((className) => {
+        return className.length > 0;
+    })
+        // Change multiple spaces for just one space
+        .map((className) => {
+        return className.replace(/\s+/g, ' ');
+    })
+        // Join with spaces
+        .join(' '));
+};
+
 /**
  * A switch with multiple options for selection
  * @author Alessandra De Lucas
  * @author Gabe Abrams
+ * @author Austen Money
  */
 /* ------------- Actions ------------ */
 // Types of actions
@@ -41309,7 +41334,14 @@ const MultiSwitch = (props) => {
     /* --------------- Main UI -------------- */
     /*----------------------------------------*/
     const optionElements = options.map((option) => {
-        return (React__default.createElement("button", { type: "button", className: `MultiSwitch-option-button${option.id === hoveredOptionId ? ' MultiSwitch-option-button-hovered' : ''}`, "aria-label": (option.id === selectedOptionId
+        const isSelected = (option.id === selectedOptionId);
+        const isHovered = (option.id === hoveredOptionId);
+        return (React__default.createElement("button", { type: "button", key: option.id, className: combineClassNames([
+                'MultiSwitch-option-button',
+                (isHovered ? 'MultiSwitch-option-button-hovered' : ''),
+                `MultiSwitch-option-button-with-id-${idify(option.id)}`,
+                `MultiSwitch-option-button-is${isSelected ? '' : '-not'}-selected`,
+            ]), "aria-label": (isSelected
                 ? `option "${option.label}", currently selected`
                 : `click to select option "${option.label}"`), onClick: () => {
                 // Remove hover
@@ -43278,30 +43310,6 @@ const makeLinksClickable = (text, opts) => {
     return elements;
 };
 
-/**
- * Merges a list of class names into a class name, intelligently handling spaces
- * @author Gabe Abrams
- * @param classNames the list of class names to merge
- * @returns the merged class name
- */
-const combineClassNames = (classNames) => {
-    return (classNames
-        // Trim whitespace
-        .map((className) => {
-        return className.trim();
-    })
-        // Remove empty class names
-        .filter((className) => {
-        return className.length > 0;
-    })
-        // Change multiple spaces for just one space
-        .map((className) => {
-        return className.replace(/\s+/g, ' ');
-    })
-        // Join with spaces
-        .join(' '));
-};
-
 /**
  * Days of the week
  * @author Gabe Abrams