@luscii-healthtech/web-ui 27.2.2 → 27.2.3

package/dist/index.development.js

@@ -3483,7 +3483,7 @@ const SelectDropdownIndicator = (props) => React__namespace.default.createElemen
 
 const SelectLoadingIndicator = (props) => React__namespace.default.createElement(LoadingIndicator, Object.assign({ asSpinner: true, spinnerColor: "gray" }, props.innerProps, { style: props.getStyles("loadingIndicator", props) }));
 
-function generateCustomStyles(hasError, isIE11) {
+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": {
@@ -3494,34 +3494,43 @@ function generateCustomStyles(hasError, isIE11) {
       }, pointerEvents: state.isDisabled ? "none" : "auto" });
     },
     container: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { flexGrow: isIE11 ? 0.5 : "initial" });
+      return Object.assign(Object.assign({}, baseStyles), { flexGrow: "initial" });
     },
     input: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { padding: 0 });
+      return Object.assign(Object.assign({}, baseStyles), { padding: 0, margin: 0 });
     },
     multiValue: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { lineHeight: isIE11 ? "25px" : "1rem" });
+      return Object.assign(Object.assign({}, baseStyles), { lineHeight: "1rem" });
     },
     valueContainer: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { padding: ".5rem" });
+      return Object.assign(Object.assign({}, baseStyles), { padding: ".5rem", margin: 0 });
     },
     control: (baseStyles, state) => {
-      const defaultBorderColor = state.isFocused ? "#045baa" : "#D1D5DB";
-      const validatedBorderColor = hasError ? "#c53030" : defaultBorderColor;
-      const defaultOutline = hasError ? "rgba(255, 98, 102, 0.3)" : "rgba(0, 159, 227, 0.3)";
-      const validatedOutline = `4px solid ${state.isFocused ? defaultOutline : "transparent"}`;
+      const navyBlue = "rgb(30 64 175)";
+      const lightGray = "#D1D5DB";
+      const red = "#c53030";
+      const lightRedTransparent = "rgba(255, 98, 102, 0.3)";
+      const darkBlue = "#1e40af";
+      const mediumGray = "#9CA3AF";
+      const lightShadow = "rgba(0, 0, 0, 0.05)";
+      const defaultBorderColor = state.isFocused || state.menuIsOpen ? navyBlue : lightGray;
+      const validatedBorderColor = hasError ? red : defaultBorderColor;
+      const defaultOutline = hasError ? lightRedTransparent : darkBlue;
+      const validatedOutline = `2px solid ${state.isFocused ? defaultOutline : "transparent"}`;
       return Object.assign(Object.assign({}, baseStyles), {
         fontSize: "14px",
         transition: "border 0.3s ease-in-out",
         // primary outline
         outline: validatedOutline,
+        outlineOffset: "-2px",
         borderColor: validatedBorderColor,
         borderWidth: "1px !important",
         borderStyle: "solid",
         borderRadius: "4px",
-        boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.05)",
+        height: "44px",
+        boxShadow: `0px 1px 2px ${lightShadow}`,
         "&:hover": {
-          borderColor: "#9CA3AF",
+          borderColor: mediumGray,
           // selector for the chevron
           '> [class*="IndicatorsContainer"]': {
             opacity: 1
@@ -3531,9 +3540,9 @@ function generateCustomStyles(hasError, isIE11) {
     },
     // The placeholder has the following css prop: grid-area: 1/1/2/3;
     // And grid-area doesn't work on IE11, so we need to style it slightly different.
-    placeholder: (baseStyles) => Object.assign(Object.assign({}, baseStyles), { fontWeight: 100, color: "#6B7280", paddingTop: isIE11 ? "1.2rem" : void 0 }),
+    placeholder: (baseStyles) => Object.assign(Object.assign({}, baseStyles), { fontWeight: 100, color: "#6B7280", margin: 0 }),
     singleValue: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { paddingTop: isIE11 ? "1.2rem" : void 0, fontSize: "14px" });
+      return Object.assign(Object.assign({}, baseStyles), { fontSize: "14px" });
     },
     indicatorSeparator: () => ({
       display: "none"
@@ -3543,8 +3552,7 @@ function generateCustomStyles(hasError, isIE11) {
 }
 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"]);
-  const isIE11 = "MSInputMethodContext" in window && "documentMode" in document;
-  const customStyles = generateCustomStyles(isError, isIE11);
+  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);
   const flatmappedOptions = !options ? [] : isOptionsGrouped ? options.flatMap((g) => g.options) : options;