@khanacademy/wonder-blocks-dropdown 9.2.3 → 10.0.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 10.0.1
+
+### Patch Changes
+
+- e8ccf60: Update `borderRadius` styles to use new `border.radius` tokens
+- Updated dependencies [e8ccf60]
+- Updated dependencies [e8ccf60]
+- Updated dependencies [e8ccf60]
+- Updated dependencies [e8ccf60]
+    - @khanacademy/wonder-blocks-search-field@5.1.9
+    - @khanacademy/wonder-blocks-modal@7.1.9
+    - @khanacademy/wonder-blocks-cell@4.1.8
+    - @khanacademy/wonder-blocks-pill@3.1.8
+    - @khanacademy/wonder-blocks-tokens@7.0.0
+    - @khanacademy/wonder-blocks-announcer@1.0.1
+    - @khanacademy/wonder-blocks-clickable@7.0.1
+    - @khanacademy/wonder-blocks-layout@3.1.7
+
+## 10.0.0
+
+### Major Changes
+
+- 38c926c: Upgrade WB to using react-router-dom-v5-compat.
+
+### Patch Changes
+
+- Updated dependencies [38c926c]
+    - @khanacademy/wonder-blocks-clickable@7.0.0
+    - @khanacademy/wonder-blocks-core@12.2.1
+    - @khanacademy/wonder-blocks-timing@7.0.2
+    - @khanacademy/wonder-blocks-modal@7.1.8
+    - @khanacademy/wonder-blocks-search-field@5.1.8
+    - @khanacademy/wonder-blocks-cell@4.1.7
+    - @khanacademy/wonder-blocks-pill@3.1.7
+
 ## 9.2.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useId } from 'react';
 import { StyleSheet } from 'aphrodite';
 import { CompactCell, DetailCell } from '@khanacademy/wonder-blocks-cell';
-import { spacing, semanticColor, sizing, border, color, font } from '@khanacademy/wonder-blocks-tokens';
+import { spacing, semanticColor, border, sizing, color, font } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import { View, addStyle, keys, Id, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
@@ -139,7 +139,7 @@ const styles$b = StyleSheet.create({
     minHeight: DROPDOWN_ITEM_HEIGHT,
     touchAction: "manipulation",
     ":focus": {
-      borderRadius: spacing.xxxSmall_4,
+      borderRadius: border.radius.radius_040,
       outline: `${spacing.xxxxSmall_2}px solid ${semanticColor.focus.outer}`,
       outlineOffset: -spacing.xxxxSmall_2
     },
@@ -225,7 +225,7 @@ const styles$9 = StyleSheet.create({
     minHeight: spacing.medium_16,
     minWidth: spacing.medium_16,
     height: spacing.medium_16,
-    borderRadius: border.radius.small_3,
+    borderRadius: 3,
     borderWidth: border.width.hairline,
     borderStyle: "solid",
     borderColor: theme$6.checkbox.color.default.border
@@ -360,7 +360,7 @@ OptionItem.defaultProps = {
 };
 OptionItem.__IS_OPTION_ITEM__ = true;
 const focusedStyle = {
-  borderRadius: spacing.xxxSmall_4,
+  borderRadius: border.radius.radius_040,
   outline: `${spacing.xxxxSmall_2}px solid ${semanticColor.focus.outer}`,
   outlineOffset: -spacing.xxxxSmall_2
 };
@@ -1406,7 +1406,7 @@ const styles$6 = StyleSheet.create({
   },
   dropdown: {
     backgroundColor: theme$3.dropdown.color.default.background,
-    borderRadius: border.radius.medium_4,
+    borderRadius: border.radius.radius_040,
     paddingTop: spacing.xxxSmall_4,
     paddingBottom: spacing.xxxSmall_4,
     border: `solid 1px ${theme$3.dropdown.color.default.border}`,
@@ -1510,7 +1510,7 @@ const sharedStyles = StyleSheet.create({
     justifyContent: "center",
     height: DROPDOWN_ITEM_HEIGHT,
     border: "none",
-    borderRadius: spacing.xxxSmall_4,
+    borderRadius: border.radius.radius_040,
     cursor: "pointer",
     outline: "none",
     textDecoration: "none",
@@ -1550,8 +1550,7 @@ const sharedStyles = StyleSheet.create({
       left: 0,
       right: 0,
       bottom: -1,
-      background: "currentColor",
-      borderRadius: border.radius.xSmall_2
+      background: "currentColor"
     }
   },
   press: {
@@ -1827,7 +1826,7 @@ const styles$4 = StyleSheet.create({
     paddingLeft: spacing.medium_16,
     paddingRight: spacing.small_12,
     borderWidth: 0,
-    borderRadius: border.radius.medium_4,
+    borderRadius: border.radius.radius_040,
     borderStyle: "solid",
     outline: "none",
     textDecoration: "none",
@@ -3307,7 +3306,7 @@ const styles = StyleSheet.create({
     maxWidth: "100%",
     flexWrap: "wrap",
     background: theme.combobox.color.default.background,
-    borderRadius: border.radius.medium_4,
+    borderRadius: border.radius.radius_040,
     border: `solid 1px ${theme.combobox.color.default.border}`,
     paddingInline: spacing.xSmall_8
   },
@@ -3342,7 +3341,7 @@ const styles = StyleSheet.create({
   },
   listbox: {
     backgroundColor: theme.listbox.color.default.background,
-    borderRadius: border.radius.medium_4,
+    borderRadius: border.radius.radius_040,
     border: `solid ${border.width.hairline}px ${theme.listbox.color.default.border}`,
     boxShadow: `0px ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0px ${color.offBlack8}`,
     maxHeight: "var(--popper-max-height)",

package/dist/index.js

@@ -174,7 +174,7 @@ const styles$b = aphrodite.StyleSheet.create({
     minHeight: DROPDOWN_ITEM_HEIGHT,
     touchAction: "manipulation",
     ":focus": {
-      borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
+      borderRadius: wonderBlocksTokens.border.radius.radius_040,
       outline: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
       outlineOffset: -wonderBlocksTokens.spacing.xxxxSmall_2
     },
@@ -260,7 +260,7 @@ const styles$9 = aphrodite.StyleSheet.create({
     minHeight: wonderBlocksTokens.spacing.medium_16,
     minWidth: wonderBlocksTokens.spacing.medium_16,
     height: wonderBlocksTokens.spacing.medium_16,
-    borderRadius: wonderBlocksTokens.border.radius.small_3,
+    borderRadius: 3,
     borderWidth: wonderBlocksTokens.border.width.hairline,
     borderStyle: "solid",
     borderColor: theme$6.checkbox.color.default.border
@@ -395,7 +395,7 @@ OptionItem.defaultProps = {
 };
 OptionItem.__IS_OPTION_ITEM__ = true;
 const focusedStyle = {
-  borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
+  borderRadius: wonderBlocksTokens.border.radius.radius_040,
   outline: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
   outlineOffset: -wonderBlocksTokens.spacing.xxxxSmall_2
 };
@@ -1441,7 +1441,7 @@ const styles$6 = aphrodite.StyleSheet.create({
   },
   dropdown: {
     backgroundColor: theme$3.dropdown.color.default.background,
-    borderRadius: wonderBlocksTokens.border.radius.medium_4,
+    borderRadius: wonderBlocksTokens.border.radius.radius_040,
     paddingTop: wonderBlocksTokens.spacing.xxxSmall_4,
     paddingBottom: wonderBlocksTokens.spacing.xxxSmall_4,
     border: `solid 1px ${theme$3.dropdown.color.default.border}`,
@@ -1545,7 +1545,7 @@ const sharedStyles = aphrodite.StyleSheet.create({
     justifyContent: "center",
     height: DROPDOWN_ITEM_HEIGHT,
     border: "none",
-    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
+    borderRadius: wonderBlocksTokens.border.radius.radius_040,
     cursor: "pointer",
     outline: "none",
     textDecoration: "none",
@@ -1585,8 +1585,7 @@ const sharedStyles = aphrodite.StyleSheet.create({
       left: 0,
       right: 0,
       bottom: -1,
-      background: "currentColor",
-      borderRadius: wonderBlocksTokens.border.radius.xSmall_2
+      background: "currentColor"
     }
   },
   press: {
@@ -1862,7 +1861,7 @@ const styles$4 = aphrodite.StyleSheet.create({
     paddingLeft: wonderBlocksTokens.spacing.medium_16,
     paddingRight: wonderBlocksTokens.spacing.small_12,
     borderWidth: 0,
-    borderRadius: wonderBlocksTokens.border.radius.medium_4,
+    borderRadius: wonderBlocksTokens.border.radius.radius_040,
     borderStyle: "solid",
     outline: "none",
     textDecoration: "none",
@@ -3342,7 +3341,7 @@ const styles = aphrodite.StyleSheet.create({
     maxWidth: "100%",
     flexWrap: "wrap",
     background: theme.combobox.color.default.background,
-    borderRadius: wonderBlocksTokens.border.radius.medium_4,
+    borderRadius: wonderBlocksTokens.border.radius.radius_040,
     border: `solid 1px ${theme.combobox.color.default.border}`,
     paddingInline: wonderBlocksTokens.spacing.xSmall_8
   },
@@ -3377,7 +3376,7 @@ const styles = aphrodite.StyleSheet.create({
   },
   listbox: {
     backgroundColor: theme.listbox.color.default.background,
-    borderRadius: wonderBlocksTokens.border.radius.medium_4,
+    borderRadius: wonderBlocksTokens.border.radius.radius_040,
     border: `solid ${wonderBlocksTokens.border.width.hairline}px ${theme.listbox.color.default.border}`,
     boxShadow: `0px ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0px ${wonderBlocksTokens.color.offBlack8}`,
     maxHeight: "var(--popper-max-height)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "9.2.3",
+  "version": "10.0.1",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -13,17 +13,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-announcer": "1.0.0",
-    "@khanacademy/wonder-blocks-cell": "4.1.6",
-    "@khanacademy/wonder-blocks-clickable": "6.1.6",
+    "@khanacademy/wonder-blocks-announcer": "1.0.1",
+    "@khanacademy/wonder-blocks-cell": "4.1.8",
+    "@khanacademy/wonder-blocks-clickable": "7.0.1",
     "@khanacademy/wonder-blocks-core": "12.2.1",
     "@khanacademy/wonder-blocks-icon": "5.1.3",
-    "@khanacademy/wonder-blocks-layout": "3.1.6",
-    "@khanacademy/wonder-blocks-modal": "7.1.7",
-    "@khanacademy/wonder-blocks-pill": "3.1.6",
-    "@khanacademy/wonder-blocks-search-field": "5.1.7",
+    "@khanacademy/wonder-blocks-layout": "3.1.7",
+    "@khanacademy/wonder-blocks-modal": "7.1.9",
+    "@khanacademy/wonder-blocks-pill": "3.1.8",
+    "@khanacademy/wonder-blocks-search-field": "5.1.9",
     "@khanacademy/wonder-blocks-timing": "7.0.2",
-    "@khanacademy/wonder-blocks-tokens": "6.0.0",
+    "@khanacademy/wonder-blocks-tokens": "7.0.0",
     "@khanacademy/wonder-blocks-typography": "3.1.3"
   },
   "peerDependencies": {
@@ -35,6 +35,7 @@
     "react-popper": "^2.3.0",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
+    "react-router-dom-v5-compat": "^6.30.0",
     "react-window": "^1.8.11"
   },
   "devDependencies": {