fix: upgrade downshift and remove breaking changes (#858)

* fix: update downshift and remove breaking changes

* added changeset

* fix: update MenuKeyDown calls

* Update package.json

Co-authored-by: Jessica <[email protected]>

* Update packages/components/package.json

Co-authored-by: Jessica <[email protected]>

* fix: remove yalc from package files

* updated yarn lock file

* fix: adjusted padding and text size for combobox

* Update packages/components/src/Combobox/styles.ts

Co-authored-by: Jessica <[email protected]>

* fix: update changeset

* Delete healthy-books-own.md

Co-authored-by: Beatrice Parfait <[email protected]>
Co-authored-by: Jessica <[email protected]>

Author: 3 people

.changeset/fuzzy-rice-switch.md

@@ -0,0 +1,5 @@
+---
+'@sajari/react-components': minor
+---
+
+Upgrade Downshift to v7.0.1 and changes to default Combobox styling

packages/components/package.json

@@ -41,7 +41,7 @@
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.2.6",
     "color": "^3.1.3",
-    "downshift": "^6.1.0",
+    "downshift": "7.0.1",
     "react-focus-lock": "^2.5.0",
     "react-ranger": "^2.1.0",
     "smoothscroll-polyfill": "^0.4.4",

packages/components/src/Combobox/index.tsx

@@ -79,7 +79,6 @@ const Combobox = React.forwardRef(function ComboboxInner<T>(
     getMenuProps,
     getItemProps,
     getInputProps,
-    getComboboxProps,
     selectedItem,
     highlightedIndex,
     inputValue,
@@ -383,7 +382,7 @@ const Combobox = React.forwardRef(function ComboboxInner<T>(
         renderInAttachMode()
       ) : (
         <Box css={[styles.container, stylesProp]} className={className}>
-          <Box css={styles.inputContainer} {...getComboboxProps()}>
+          <Box css={styles.inputContainer}>
             <Box as="label" css={tw`sr-only`} {...getLabelProps({ htmlFor: id })}>
               {label ?? placeholder}
             </Box>

packages/components/src/Combobox/styles.ts

@@ -27,7 +27,7 @@ export function getInputSpacingStyles(size?: ComboboxSize) {
 
     case 'md':
     default:
-      return tw`pl-9`;
+      return tw`pl-9 text-base`;
   }
 }
 

packages/components/src/Select/index.tsx

@@ -43,8 +43,8 @@ const Select = React.forwardRef((props: SelectProps, ref?: React.Ref<HTMLDivElem
     const { changes, type } = actionAndChanges;
 
     switch (type) {
-      case useSelect.stateChangeTypes.MenuKeyDownEnter:
-      case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
+      case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+      case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
       case useSelect.stateChangeTypes.ItemClick:
         return {
           ...changes,

yarn.lock

@@ -5241,7 +5241,7 @@ __metadata:
     body-scroll-lock: ^3.1.5
     classnames: ^2.2.6
     color: ^3.1.3
-    downshift: ^6.1.0
+    downshift: 7.0.1
     jest: ^26.6.3
     react-focus-lock: ^2.5.0
     react-ranger: ^2.1.0
@@ -8441,13 +8441,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compute-scroll-into-view@npm:^1.0.16":
-  version: 1.0.16
-  resolution: "compute-scroll-into-view@npm:1.0.16"
-  checksum: 4334db6397e52911397922d3778c56513eca97c26f669a7d35e38739aadb3340d04133f26cb5830df25dab0687c9ce934953f3e9b27556042b1af99fb15b7c7a
-  languageName: node
-  linkType: hard
-
 "compute-scroll-into-view@npm:^1.0.17":
   version: 1.0.17
   resolution: "compute-scroll-into-view@npm:1.0.17"
@@ -9289,17 +9282,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"downshift@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "downshift@npm:6.1.0"
+"downshift@npm:7.0.1":
+  version: 7.0.1
+  resolution: "downshift@npm:7.0.1"
   dependencies:
-    "@babel/runtime": ^7.12.5
-    compute-scroll-into-view: ^1.0.16
+    "@babel/runtime": ^7.14.8
+    compute-scroll-into-view: ^1.0.17
     prop-types: ^15.7.2
-    react-is: ^17.0.1
+    react-is: ^17.0.2
+    tslib: ^2.3.0
   peerDependencies:
     react: ">=16.12.0"
-  checksum: c07fc6d9d9115eb92d1cabae51b3c6abff28054ab9e434af4f062e6c9ffb8d942d5770094e05f3eea3f122b4444e7a9e0f5cb4e621f747f706a4fc3548b70282
+  checksum: f2dc82171ee64777e82ad86ab8e08f1015bef289ab26799337f43a8465bd55f6b484cad4ab40030b57891e99ed3a7d41b27dd560a0929635133c41cee802bc32
   languageName: node
   linkType: hard