@intility/bifrost-react-select 5.0.2 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @intility/bifrost-react-select
 
+## 5.1.0
+
+### Minor Changes
+
+- c7e5540: Bump `react-select` dependency to `5.10.1`
+
+### Patch Changes
+
+- 30fd9d3: Fix: Avoid wrapping `<Select isMulti>` with a single long-worded option selected. #178
+
 ## 5.0.2
 
 ### Patch Changes

package/dist/Select.js

@@ -55,7 +55,7 @@ export const selectStyles = {
                 borderBottomRightRadius: "var(--bf-radius-s)"
             },
             backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
-            borderWidth: "1px",
+            borderWidth: 1,
             borderStyle: "solid",
             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",
@@ -81,7 +81,7 @@ export const selectStyles = {
             },
             color: "var(--bfc-base-c-2)",
             cursor: "pointer",
-            padding: "var(--bfs4)",
+            padding: 4,
             margin: "1px 4px 0px 0px"
         }),
     dropdownIndicator: (provided, state)=>({
@@ -91,17 +91,16 @@ export const selectStyles = {
             },
             color: state.isFocused ? "var(--bfc-base-c)" : "var(--bfc-base-c-2)",
             cursor: "pointer",
-            padding: "var(--bfs4)",
+            padding: 4,
             marginRight: 8
         }),
     input: (provided)=>({
             ...provided,
-            ".bf-select-small &": {
-                marginBlock: 0
-            },
             color: "var(--bfc-base-c)",
             fontFamily: "inherit",
-            fontSize: "var(--bf-font-size-l)"
+            fontSize: "var(--bf-font-size-l)",
+            margin: 0,
+            padding: 0
         }),
     menuPortal: (provided)=>({
             ...provided,
@@ -148,7 +147,7 @@ export const selectStyles = {
             color: state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-base-c)",
             "& .bf-select-selected-icon": {
                 color: "var(--bfc-base-c)",
-                marginLeft: "var(--bfs4)"
+                marginLeft: 4
             },
             "&:hover": {
                 backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base)",
@@ -164,7 +163,8 @@ export const selectStyles = {
             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
+            opacity: state.isDisabled ? 0.5 : 1,
+            maxWidth: "calc(100% - 10px)"
         }),
     multiValueLabel: (provided)=>({
             ...provided,
@@ -177,7 +177,7 @@ export const selectStyles = {
             color: "var(--bfc-base-c-2)",
             paddingLeft: 5,
             paddingRight: 5,
-            background: state.isFocused && "var(--bfc-theme-2)",
+            background: state.isFocused ? "var(--bfc-theme-2)" : undefined,
             "&:hover": {
                 color: "var(--bfc-base-c)",
                 cursor: "pointer",
@@ -187,14 +187,14 @@ export const selectStyles = {
                 background: "var(--bfc-base-3)"
             },
             svg: {
-                marginTop: "1px"
+                marginTop: 1
             }
         }),
     group: (provided)=>({
             ...provided,
-            padding: "var(--bfs6) 0",
+            padding: "6px 0",
             "&:first-of-type": {
-                marginTop: "var(--bfs4)"
+                marginTop: 4
             }
         }),
     groupHeading: (provided)=>({
@@ -202,7 +202,7 @@ export const selectStyles = {
             textTransform: "capitalize",
             color: "var(--bfc-base-c-2)",
             fontSize: "var(--bf-font-size-s)",
-            marginBottom: "var(--bfs2)"
+            marginBottom: 2
         })
 };
 export const selectComponents = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intility/bifrost-react-select",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "React select component for Intility's design system, Bifrost.",
   "type": "module",
   "main": "dist/Select.js",
@@ -44,14 +44,14 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@intility/bifrost-react": "^5.2.1"
+    "@intility/bifrost-react": "^5.3.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "classnames": "^2.2.6",
-    "react-select": "^5.7.7"
+    "react-select": "^5.10.1"
   },
   "files": [
     "CHANGELOG.md",