dce-reactkit 3.6.9 → 3.6.11

package/dist/esm/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/types/helpers/combineClassNames.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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
+ */
+declare const combineClassNames: (classNames: string[]) => string;
+export default combineClassNames;

package/dist/esm/types/index.d.ts

@@ -67,6 +67,7 @@ import validatePhoneNumber from './helpers/validators/validatePhoneNumber';
 import validateString from './helpers/validators/validateString';
 import idify from './helpers/idify';
 import makeLinksClickable from './helpers/makeLinksClickable';
+import combineClassNames from './helpers/combineClassNames';
 import ModalButtonType from './types/ModalButtonType';
 import ModalSize from './types/ModalSize';
 import ModalType from './types/ModalType';
@@ -85,4 +86,4 @@ import PickableItem from './components/ItemPicker/types/PickableItem';
 import DBEntry from './components/DBEntryManagerPanel/types/DBEntry';
 import DBEntryField from './components/DBEntryManagerPanel/types/DBEntryField';
 import DBEntryFieldType from './components/DBEntryManagerPanel/types/DBEntryFieldType';
-export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, IntelliTableColumn, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, IntelliTableColumn, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };

package/dist/index.d.ts

@@ -642,6 +642,7 @@ declare const AutoscrollToBottomContainer: React.FC<Props$1>;
  * A switch with multiple options for selection
  * @author Alessandra De Lucas
  * @author Gabe Abrams
+ * @author Austen Money
  */
 
 type Props = {
@@ -1416,6 +1417,14 @@ declare const makeLinksClickable: (text: string, opts?: {
     inheritColor?: boolean;
 }) => React.ReactNode;
 
+/**
+ * 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
+ */
+declare const combineClassNames: (classNames: string[]) => string;
+
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -1466,4 +1475,4 @@ declare const LogBuiltInMetadata: {
     };
 };
 
-export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, ceilToNumDecimals, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };
+export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.6.9",
+  "version": "3.6.11",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -27,13 +27,13 @@
     "react-select": "^5.7.3"
   },
   "peerDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^x.x.x",
     "@fortawesome/free-regular-svg-icons": "^x.x.x",
     "@fortawesome/free-solid-svg-icons": "^x.x.x",
-    "@fortawesome/fontawesome-svg-core": "^x.x.x",
     "@fortawesome/react-fontawesome": "^x.x.x",
     "bootstrap": "^5.x.x",
-    "react": "^x.x.x",
-    "express": "^x.x.x"
+    "express": "^x.x.x",
+    "react": "^x.x.x"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",
@@ -55,7 +55,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
-    "raixa": "^1.0.19",
+    "raixa": "^1.0.21",
     "rollup": "^2.70.2",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-sourcemaps": "^0.6.3",

package/src/components/MultiSwitch.tsx

@@ -2,6 +2,7 @@
  * A switch with multiple options for selection
  * @author Alessandra De Lucas
  * @author Gabe Abrams
+ * @author Austen Money
  */
 
 // Import React
@@ -11,6 +12,10 @@ import React, { useReducer } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
+// Import shared helpers
+import idify from '../helpers/idify';
+import combineClassNames from '../helpers/combineClassNames';
+
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
@@ -253,12 +258,21 @@ const MultiSwitch: React.FC<Props> = (props) => {
   /*----------------------------------------*/
 
   const optionElements = options.map((option) => {
+    const isSelected = (option.id === selectedOptionId);
+    const isHovered = (option.id === hoveredOptionId);
+
     return (
       <button
         type="button"
-        className={`MultiSwitch-option-button${option.id === hoveredOptionId ? ' MultiSwitch-option-button-hovered' : ''}`}
+        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={(
-          option.id === selectedOptionId
+          isSelected
             ? `option "${option.label}", currently selected`
             : `click to select option "${option.label}"`
         )}

package/src/helpers/combineClassNames.ts

@@ -0,0 +1,27 @@
+/**
+ * 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: string[]): string => {
+  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(' ')
+  );
+};
+
+export default combineClassNames;

package/src/index.ts

@@ -82,6 +82,7 @@ import validatePhoneNumber from './helpers/validators/validatePhoneNumber';
 import validateString from './helpers/validators/validateString';
 import idify from './helpers/idify';
 import makeLinksClickable from './helpers/makeLinksClickable';
+import combineClassNames from './helpers/combineClassNames';
 
 // Import types
 import ModalButtonType from './types/ModalButtonType';
@@ -182,6 +183,7 @@ export {
   logClientEvent,
   addFatalErrorHandler,
   leaveToURL,
+  combineClassNames,
   // Server helpers
   initServer,
   genRouteHandler,