@k-int/stripes-kint-components 5.6.1 → 5.7.0

package/src/lib/Typedown/Typedown.js

@@ -28,6 +28,7 @@ const Typedown = ({
   renderFooter = null,
   renderListItem = null,
   required,
+  selectedStyles, // A way to pass any styles that need to be applied globally on selection
   uniqueIdentificationPath = 'id'
 }) => {
   const selectedUniqueId = get(input.value, uniqueIdentificationPath);
@@ -86,12 +87,12 @@ const Typedown = ({
     }
   } = useTypedown(input.name);
 
-  const renderItem = useCallback((option) => (
+  const renderItem = useCallback((option, optionIsSelected = false) => (
     <div
       className={css.listItem}
     >
       {renderListItem ?
-        renderListItem(option, currentlyTyped, exactMatch) :
+        renderListItem(option, currentlyTyped, exactMatch, optionIsSelected) :
         get(option, uniqueIdentificationPath)
       }
     </div>
@@ -119,12 +120,15 @@ const Typedown = ({
         >
           {displayData?.length ? displayData?.map((d, index) => {
             const isSelectedEval = isSelected ? isSelected(input.value, d) : get(input.value, uniqueIdentificationPath) === get(d, uniqueIdentificationPath);
+
+            const selectedCSS = selectedStyles ?? css.selectedMenuButton;
             return (
               <button
                 key={`typedown-button-[${index}]`}
                 className={classnames(
                   css.fullWidth,
-                  css.menuButton
+                  css.menuButton,
+                  { [`${selectedCSS}`]: isSelectedEval },
                 )}
                 data-selected={isSelectedEval}
                 id={`typedown-button-[${index}]`}
@@ -135,7 +139,7 @@ const Typedown = ({
                 onKeyDown={listKeyDownHandler}
                 type="button"
               >
-                {renderItem(d)}
+                {renderItem(d, isSelectedEval)}
               </button>
             );
           }) :
@@ -161,13 +165,15 @@ const Typedown = ({
     footerRef,
     handleChange,
     handleNextFocus,
-    input,
+    input.name,
+    input.value,
     isSelected,
     listKeyDownHandler,
     listRef,
     renderFooter,
     renderItem,
     searchWidth,
+    selectedStyles,
     uniqueIdentificationPath
   ]);
 
@@ -270,6 +276,7 @@ Typedown.propTypes = {
   renderFooter: PropTypes.func,
   renderListItem: PropTypes.func,
   required: PropTypes.bool,
+  selectedStyles: PropTypes.string,
   uniqueIdentificationPath: PropTypes.string
 };
 

package/styles/TypeDown.css

@@ -33,7 +33,12 @@
   text-align: left;
 }
 
-.menuButton[data-selected=true], .selected {
+/* .menuButton[data-selected=true], .selected {
+  background-color: var(--primary);
+  color: #fff;
+} */
+
+.selectedMenuButton {
   background-color: var(--primary);
   color: #fff;
 }