@intility/bifrost-react-select 4.0.2 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @intility/bifrost-react-select
 
+## 4.1.0
+
+### Minor Changes
+
+- ab69807d: Styling changes for Select input #740
+
+## 4.0.3
+
+### Patch Changes
+
+- 3db0503a: Fix: `selectComponents` properties should now correcly be non-null
+
 ## 4.0.2
 
 ### Patch Changes

package/dist/Select.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode, RefAttributes } from "react";
-import { GroupBase, Props as ReactSelectProps, SelectInstance, components } from "react-select";
+import { GroupBase, Props as ReactSelectProps, SelectInstance, components as originalComponents } from "react-select";
 import { AsyncProps as AsyncSelectProps } from "react-select/async";
 import { CreatableProps as CreatableSelectProps } from "react-select/creatable";
 import { AsyncCreatableProps as AsyncCreatableSelectProps } from "react-select/async-creatable";
@@ -20,12 +20,12 @@ export declare const selectStyles: {
     singleValue: (provided: any, state: any) => any;
     option: (provided: any, state: any) => any;
     multiValue: (provided: any, state: any) => any;
-    multiValueLabel: (provided: any, state: any) => any;
+    multiValueLabel: (provided: any) => any;
     multiValueRemove: (provided: any, state: any) => any;
     group: (provided: any) => any;
     groupHeading: (provided: any) => any;
 };
-export declare const selectComponents: Partial<typeof components>;
+export declare const selectComponents: typeof originalComponents;
 declare const selectStates: readonly ["default", "alert"];
 export type SelectState = (typeof selectStates)[number];
 export type SelectProps = {

package/dist/Select.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */ "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import ReactSelectDefaultExport from "react-select";
+import ReactSelectDefaultExport, { components as originalComponents } from "react-select";
 import AsyncReactSelect from "react-select/async";
 import CreatableReactSelect from "react-select/creatable";
 import AsyncCreatableReactSelect from "react-select/async-creatable";
@@ -22,18 +22,18 @@ export const selectStyles = {
     control: (provided, state)=>({
             ...provided,
             "&:hover": {
-                borderColor: state.isFocused ? "var(--bfc-theme-3)" : "var(--bfc-base-c-inverted-2)",
+                borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : "var(--bfc-base-c-inverted-2)",
                 // Change color of dropdown icon when hover on Select
                 ".bf-select__dropdown-indicator": {
-                    color: "var(--bfc-theme-3)"
+                    color: "var(--bfc-base-c)"
                 }
             },
             backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
             borderWidth: "1px",
             borderStyle: "solid",
-            borderColor: state.isFocused ? "var(--bfc-theme-3)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
-            boxShadow: "none",
-            borderRadius: state.selectProps.menuIsOpen ? " var(--bf-radius-xs) var(--bf-radius-xs) 0 0" : "var(--bf-radius-xs)",
+            borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
+            boxShadow: state.isFocused ? "inset 0 0 0 1px var(--bfc-base-c-inverted)" : "none",
+            borderRadius: state.selectProps.menuIsOpen ? "var(--bf-radius-xs) var(--bf-radius-xs) 0 0" : "var(--bf-radius-xs)",
             minHeight: "var(--bfs40)",
             cursor: "text"
         }),
@@ -57,7 +57,7 @@ export const selectStyles = {
         }),
     dropdownIndicator: (provided, state)=>({
             ...provided,
-            color: state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-theme-1)",
+            color: state.isFocused ? "var(--bfc-base-c)" : "var(--bfc-base-c-2)",
             cursor: "pointer",
             padding: "var(--bfs4)",
             marginRight: "var(--bfs8)"
@@ -84,7 +84,7 @@ export const selectStyles = {
             ...provided,
             backgroundColor: "var(--bfc-base-3)",
             padding: 0,
-            border: "1px solid var(--bfc-theme-3)",
+            border: "2px solid var(--bfc-base-c-inverted)",
             borderTop: "none",
             borderRadius: "0 0 var(--bf-radius-xs) var(--bf-radius-xs)"
         }),
@@ -111,11 +111,11 @@ export const selectStyles = {
                 color: "var(--bfc-theme)"
             },
             "& .bf-select-selected-icon": {
-                color: "var(--bfc-base-c-theme)",
+                color: "var(--bfc-base-c)",
                 marginLeft: "var(--bfs4)"
             },
             "&:hover": {
-                backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-1)",
+                backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
                 cursor: state.isDisabled ? "default" : "pointer"
             },
             fontSize: "var(--bf-font-size-l)",
@@ -125,31 +125,30 @@ export const selectStyles = {
         }),
     multiValue: (provided, state)=>({
             ...provided,
-            backgroundColor: state.isDisabled ? "var(--bfc-base-c-inverted-2)" : "var(--bfc-theme-c)",
-            borderRadius: "var(--bf-radius-xs)"
+            backgroundColor: "var(--bfc-base)",
+            borderRadius: "var(--bf-radius-xs)",
+            border: state.isDisabled ? "1px solid var(--bfc-base-c-disabled)" : "var(--bf-border)",
+            opacity: state.isDisabled ? 0.5 : 1
         }),
-    multiValueLabel: (provided, state)=>({
+    multiValueLabel: (provided)=>({
             ...provided,
-            color: state.isDisabled ? "var(--bfc-base-1)" : "var(--bfc-base-c-theme)",
-            fontSize: "var(--bf-font-size-m)"
+            fontSize: "var(--bf-font-size-m)",
+            padding: "2px 4px 2px 8px",
+            color: "inherit"
         }),
     multiValueRemove: (provided, state)=>({
             ...provided,
-            color: state.isDisabled ? "var(--bfc-base-1)" : state.isFocused ? "var(--bfc-theme-c-base-3)" : "var(--bfc-theme-1)",
-            borderRadius: "unset",
-            borderTopRightRadius: "var(--bf-radius-xs)",
-            borderBottomRightRadius: "var(--bf-radius-xs)",
-            paddingLeft: "var(--bfs2)",
-            paddingRight: "var(--bfs2)",
-            marginLeft: "var(--bfs2)",
+            color: "var(--bfc-base-c-2)",
+            paddingLeft: 5,
+            paddingRight: 5,
             background: state.isFocused && "var(--bfc-theme-2)",
             "&:hover": {
-                color: "var(--bfc-theme-c-base-3)",
+                color: "var(--bfc-base-c-1)",
                 cursor: "pointer",
-                background: "var(--bfc-theme)"
+                background: "var(--bfc-base-2)"
             },
             "&:active": {
-                background: "var(--bfc-theme-2)"
+                background: "var(--bfc-base-3)"
             },
             svg: {
                 marginTop: "1px"
@@ -171,6 +170,7 @@ export const selectStyles = {
         })
 };
 export const selectComponents = {
+    ...originalComponents,
     DropdownIndicator,
     Input: CustomInput,
     MenuList: CustomMenuList,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intility/bifrost-react-select",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "description": "React select component for Intility's design system, Bifrost.",
   "type": "module",
   "main": "dist/Select.js",
@@ -39,7 +39,7 @@
     "@intility/bifrost-react": "^4.0.2"
   },
   "devDependencies": {
-    "@intility/bifrost-react": "^4.0.2"
+    "@intility/bifrost-react": "^4.3.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",