@khanacademy/wonder-blocks-dropdown 2.10.0 → 2.10.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.10.2
+
+### Patch Changes
+
+-   Updated dependencies [4c682709]
+    -   @khanacademy/wonder-blocks-clickable@2.4.1
+    -   @khanacademy/wonder-blocks-modal@3.0.2
+    -   @khanacademy/wonder-blocks-search-field@1.0.14
+
+## 2.10.1
+
+### Patch Changes
+
+-   29d57cdc: Fixes bug where going from empty to filled shifts the dropdown box’s position when inline with text
+
 ## 2.10.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -1694,7 +1694,7 @@ class SelectOpener extends React.Component {
         type: "button"
       }, childrenProps), React.createElement(LabelMedium, {
         style: styles.text
-      }, children), React.createElement(Icon, {
+      }, children || "\u00A0"), React.createElement(Icon, {
         icon: icons.caretDown,
         color: iconColor,
         size: "small",

package/dist/index.js

@@ -177,19 +177,16 @@ function _extends() {
   module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   }, module.exports.__esModule = true, module.exports["default"] = module.exports;
   return _extends.apply(this, arguments);
 }
-
 module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
 /***/ }),
@@ -1690,7 +1687,7 @@ class SelectOpener extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
         type: "button"
       }, childrenProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_9__["LabelMedium"], {
         style: styles.text
-      }, children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_7___default.a, {
+      }, children || "\u00A0"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_7___default.a, {
         icon: _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_7__["icons"].caretDown,
         color: iconColor,
         size: "small",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.10.0",
+  "version": "2.10.2",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.0",
+    "@khanacademy/wonder-blocks-clickable": "^2.4.1",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
     "@khanacademy/wonder-blocks-core": "^4.5.0",
     "@khanacademy/wonder-blocks-icon": "^1.2.32",
     "@khanacademy/wonder-blocks-layout": "^1.4.12",
-    "@khanacademy/wonder-blocks-modal": "^3.0.1",
-    "@khanacademy/wonder-blocks-search-field": "^1.0.13",
+    "@khanacademy/wonder-blocks-modal": "^3.0.2",
+    "@khanacademy/wonder-blocks-search-field": "^1.0.14",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-timing": "^2.1.0",
     "@khanacademy/wonder-blocks-typography": "^1.1.34"
@@ -38,7 +38,7 @@
     "react-window": "^1.8.5"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^3.0.7",
+    "@khanacademy/wonder-blocks-button": "^3.0.9",
     "wb-dev-build-settings": "^0.4.0"
   }
 }

package/src/components/__docs__/single-select.stories.js

@@ -245,6 +245,60 @@ Disabled.parameters = {
     },
 };
 
+/**
+ * TwoWithText
+ */
+export const TwoWithText: StoryComponentType = (args) => {
+    const [selectedValue, setSelectedValue] = React.useState(
+        args.selectedValue,
+    );
+    const [secondSelectedValue, setSecondSelectedValue] = React.useState(
+        args.selectedValue,
+    );
+    const [opened, setOpened] = React.useState(args.opened);
+    const [secondOpened, setSecondOpened] = React.useState(args.opened);
+    React.useEffect(() => {
+        // Only update opened if the args.opened prop changes (using the
+        // controls panel).
+        setOpened(args.opened);
+    }, [args.opened]);
+
+    return (
+        <div>
+            Here is some text to nest the dropdown
+            <SingleSelect
+                {...args}
+                onChange={setSelectedValue}
+                selectedValue={selectedValue}
+                opened={opened}
+                onToggle={setOpened}
+                style={{display: "inline-block"}}
+            >
+                {[...items, <OptionItem label="" value="" key={9} />]}
+            </SingleSelect>
+            . And here is more text to compare!
+            <SingleSelect
+                {...args}
+                onChange={setSecondSelectedValue}
+                selectedValue={secondSelectedValue}
+                opened={secondOpened}
+                onToggle={setSecondOpened}
+                style={{display: "inline-block"}}
+            >
+                {[...items, <OptionItem label="" value="" key={9} />]}
+            </SingleSelect>
+        </div>
+    );
+};
+
+TwoWithText.parameters = {
+    docs: {
+        description: {
+            story: "This story has two selects nested inline within text.",
+        },
+    },
+};
+
 /**
  * On dark background, right-aligned
  */

package/src/components/select-opener.js

@@ -146,7 +146,9 @@ export default class SelectOpener extends React.Component<SelectOpenerProps> {
                             {...childrenProps}
                         >
                             <LabelMedium style={styles.text}>
-                                {children}
+                                {/* Note(tamarab): Prevents unwanted vertical
+                                shift for empty selection */}
+                                {children || "\u00A0"}
                             </LabelMedium>
                             <Icon
                                 icon={icons.caretDown}