@trops/dash-react 1.0.19 → 1.0.21

package/dist/index.js

@@ -3268,7 +3268,7 @@ var SelectInput = function SelectInput(_ref) {
           },
           className: "w-full rounded-md border px-3 py-2 transition-colors duration-150 ".concat(styles.backgroundColor, " ").concat(styles.borderColor, " ").concat(styles.textColor, " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 ").concat(styles.focusRingColor || "", " disabled:opacity-50 disabled:cursor-not-allowed text-left flex items-center justify-between gap-2 ").concat(inputClassName),
           children: [/*#__PURE__*/jsxs("span", {
-            className: "flex items-center gap-2 truncate",
+            className: "flex items-center gap-2 truncate flex-1 min-w-0",
             children: [(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.icon) && /*#__PURE__*/jsx(FontAwesomeIcon, {
               icon: selectedOption.icon,
               className: "h-3.5 w-3.5 shrink-0 opacity-70"
@@ -3276,6 +3276,9 @@ var SelectInput = function SelectInput(_ref) {
               className: "truncate",
               children: selectedOption ? selectedOption.label : placeholder
             })]
+          }), (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.badge) && /*#__PURE__*/jsx("span", {
+            className: "flex-shrink-0",
+            children: selectedOption.badge
           }), /*#__PURE__*/jsx(FontAwesomeIcon, {
             icon: "chevron-down",
             className: "h-3 w-3 shrink-0 opacity-50 transition-transform duration-150 ".concat(isOpen ? "rotate-180" : "")
@@ -3294,14 +3297,14 @@ var SelectInput = function SelectInput(_ref) {
                 },
                 className: "w-full text-left px-3 py-1.5 flex items-center gap-2 text-sm transition-colors duration-150 ".concat(isSelected ? "".concat(itemStyles.selectedBackgroundColor || itemStyles.hoverBackgroundColor, " ").concat(itemStyles.selectedTextColor || styles.textColor) : "".concat(styles.textColor, " ").concat(itemStyles.hoverBackgroundColor, " ").concat(itemStyles.hoverTextColor)),
                 children: [option.icon && /*#__PURE__*/jsx(FontAwesomeIcon, {
-                  icon: option.icon,
+                  icon: isSelected ? "check" : option.icon,
                   className: "h-3.5 w-3.5 shrink-0 opacity-70"
                 }), /*#__PURE__*/jsx("span", {
                   className: "truncate",
                   children: option.label
-                }), isSelected && /*#__PURE__*/jsx(FontAwesomeIcon, {
-                  icon: "check",
-                  className: "h-3 w-3 shrink-0 ml-auto opacity-70"
+                }), option.badge && /*#__PURE__*/jsx("span", {
+                  className: "flex-shrink-0 ml-auto",
+                  children: option.badge
                 })]
               }, option.value);
             })