@luscii-healthtech/web-ui 35.13.1 → 35.13.2

package/dist/components/Select/Select.d.ts

@@ -29,6 +29,12 @@ export interface SelectProps<Option extends OptionMinimal = OptionMinimal, IsMul
      * This change is protected by policy: https://app.glassfrog.com/organizations/13950/orgnav/policies/12870328
      */
     value?: any;
+    /**
+     * The internal processing in this component is causing issues, but we cannot
+     * just remove it. This prop allows us to use the component in a fully controlled
+     * way, without any processing of the value.
+     */
+    skipValueProcessing?: boolean;
 }
 /**
  * A wrapper around react-select to style it according to our design specification.

package/dist/index.development.js

@@ -4289,12 +4289,25 @@ const SelectLoadingIndicator = (props) => React__namespace.default.createElement
 function generateCustomStyles(hasError) {
   return {
     option: (baseStyles, state) => {
-      return Object.assign(Object.assign({}, baseStyles), { fontWeight: state.isSelected ? "bold" : "normal", fontSize: "14px", backgroundColor: "none", color: "inherit", position: "relative", padding: "0.75rem", opacity: state.isDisabled ? "0.5" : 1, "&:after": {
-        visibility: state.isSelected ? "visible" : "hidden"
-      }, transition: "background-color 0.3s ease-in-out", "&:hover": {
+      return Object.assign(Object.assign({}, baseStyles), {
+        fontWeight: state.isSelected ? "bold" : "normal",
+        fontSize: "14px",
         // tailwind blue-50
-        backgroundColor: state.isSelected ? "transparent" : "#F2FAFD"
-      }, pointerEvents: state.isDisabled ? "none" : "auto" });
+        backgroundColor: state.isFocused ? "#F2FAFD" : "none",
+        color: "inherit",
+        position: "relative",
+        padding: "0.75rem",
+        opacity: state.isDisabled ? "0.5" : 1,
+        "&:after": {
+          visibility: state.isSelected ? "visible" : "hidden"
+        },
+        transition: "background-color 0.3s ease-in-out",
+        "&:hover": {
+          // tailwind blue-50
+          backgroundColor: state.isSelected ? "transparent" : "#F2FAFD"
+        },
+        pointerEvents: state.isDisabled ? "none" : "auto"
+      });
     },
     container: (baseStyles) => {
       return Object.assign(Object.assign({}, baseStyles), { flexGrow: "initial" });
@@ -4355,7 +4368,7 @@ function generateCustomStyles(hasError) {
   };
 }
 const Select = React__namespace.default.forwardRef((_a, innerRef) => {
-  var { isError = false, styles, options, onChange, value, width = "full", isMulti, className } = _a, otherProps = __rest(_a, ["isError", "styles", "options", "onChange", "value", "width", "isMulti", "className"]);
+  var { isError = false, styles, options, onChange, value, width = "full", isMulti, className, skipValueProcessing } = _a, otherProps = __rest(_a, ["isError", "styles", "options", "onChange", "value", "width", "isMulti", "className", "skipValueProcessing"]);
   const customStyles = generateCustomStyles(isError);
   const mergedStyles = ReactSelect.mergeStyles(customStyles, styles);
   const isOptionsGrouped = !options ? false : options.reduce((acc, o) => acc || "options" in o && !("values" in o), false);
@@ -4375,7 +4388,7 @@ const Select = React__namespace.default.forwardRef((_a, innerRef) => {
     var { children } = _a2, commonProps = __rest(_a2, ["children"]);
     return React__namespace.default.createElement(ReactSelect.components.SelectContainer, Object.assign({}, commonProps, { innerProps: Object.assign({}, commonProps.innerProps, Object.assign({}, getDataAttributes())) }), children);
   };
-  return React__namespace.default.createElement(ReactSelect__default.default, Object.assign({}, otherProps, { ref: innerRef, styles: mergedStyles, options, onChange: onChangeWrapped, value: valueWrapped, isMulti, className: classNames__default.default("customized-select", className, {
+  return React__namespace.default.createElement(ReactSelect__default.default, Object.assign({}, otherProps, { ref: innerRef, styles: mergedStyles, options, onChange: skipValueProcessing ? onChange : onChangeWrapped, value: skipValueProcessing ? value : valueWrapped, isMulti, className: classNames__default.default("customized-select", className, {
     "ui-w-16": width === "sm",
     "ui-w-32": width === "md",
     "ui-w-56": width === "lg",