@khanacademy/wonder-blocks-dropdown 5.8.0 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 6.0.0
+
+### Major Changes
+
+-   e6abdd17: Upgrade to React 18
+
+### Patch Changes
+
+-   Updated dependencies [e6abdd17]
+    -   @khanacademy/wonder-blocks-timing@6.0.0
+    -   @khanacademy/wonder-blocks-core@8.0.0
+    -   @khanacademy/wonder-blocks-cell@4.0.0
+    -   @khanacademy/wonder-blocks-clickable@5.0.0
+    -   @khanacademy/wonder-blocks-icon@5.0.0
+    -   @khanacademy/wonder-blocks-layout@3.0.0
+    -   @khanacademy/wonder-blocks-modal@6.0.0
+    -   @khanacademy/wonder-blocks-pill@3.0.0
+    -   @khanacademy/wonder-blocks-search-field@3.0.0
+    -   @khanacademy/wonder-blocks-tokens@3.0.0
+    -   @khanacademy/wonder-blocks-typography@3.0.0
+
+## 5.8.1
+
+### Patch Changes
+
+-   c8b5b2e2: [MultiSelect and SingleSelect] Remove `showOpenerLabelAsText` from sharedProps that are passed to SelectOpener
+
 ## 5.8.0
 
 ### Minor Changes

package/dist/components/combobox-live-region.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { ComboboxLabels, MaybeValueOrValues, OptionItemComponent } from "../util/types";
 type Props = {
     /**
@@ -48,5 +48,5 @@ type Props = {
  *
  * @see https://bugs.webkit.org/show_bug.cgi?id=167671
  */
-export declare function ComboboxLiveRegion({ focusedIndex, focusedMultiSelectIndex, labels, selectedLabels, opened, options, selected, selectionType, testId, }: Props): JSX.Element;
+export declare function ComboboxLiveRegion({ focusedIndex, focusedMultiSelectIndex, labels, selectedLabels, opened, options, selected, selectionType, testId, }: Props): React.JSX.Element;
 export {};

package/dist/components/combobox.d.ts

@@ -107,5 +107,5 @@ type Props = {
  *   Open button (🔽) is pressed.
  * - It is displayed when the combobox receives focus.
  */
-export default function Combobox({ autoComplete, children, disabled, error, id, labels, onChange, onToggle, opened, placeholder, selectionType, startIcon, testId, value, }: Props): JSX.Element;
+export default function Combobox({ autoComplete, children, disabled, error, id, labels, onChange, onToggle, opened, placeholder, selectionType, startIcon, testId, value, }: Props): React.JSX.Element;
 export {};

package/dist/components/dropdown-core-virtualized.d.ts

@@ -6,7 +6,7 @@ declare const _default: {
         data: DropdownItem[];
         width?: number | null | undefined;
         listRef?: React.RefObject<List<any>> | undefined;
-    }): JSX.Element;
+    }): React.JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/components/listbox.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
 import { MaybeValueOrValues, OptionItemComponent } from "../util/types";
 type Props = {
@@ -81,5 +81,5 @@ type Props = {
  * </Listbox>
  * ```
  */
-export default function Listbox(props: Props): JSX.Element;
+export default function Listbox(props: Props): React.JSX.Element;
 export {};

package/dist/es/index.js

@@ -825,13 +825,13 @@ class DropdownCore extends React.Component {
   }
   constructor(props) {
     super(props);
-    this.focusedIndex = void 0;
-    this.focusedOriginalIndex = void 0;
-    this.itemsClicked = void 0;
     this.popperElement = void 0;
     this.virtualizedListRef = void 0;
     this.handleKeyDownDebounced = void 0;
     this.textSuggestion = void 0;
+    this.focusedIndex = -1;
+    this.focusedOriginalIndex = -1;
+    this.itemsClicked = false;
     this.searchFieldRef = React.createRef();
     this.handleInteract = event => {
       const {
@@ -1075,18 +1075,37 @@ class DropdownCore extends React.Component {
   }
   focusCurrentItem(onFocus) {
     const focusedItemRef = this.state.itemRefs[this.focusedIndex];
-    if (focusedItemRef) {
-      if (this.virtualizedListRef.current) {
-        this.virtualizedListRef.current.scrollToItem(focusedItemRef.originalIndex);
+    if (!focusedItemRef) {
+      return;
+    }
+    const {
+      current: virtualizedList
+    } = this.virtualizedListRef;
+    if (virtualizedList) {
+      virtualizedList.scrollToItem(focusedItemRef.originalIndex);
+    }
+    const focusNode = () => {
+      if (!this.props.open) {
+        return;
+      }
+      const currentFocusedItemRef = this.state.itemRefs[this.focusedIndex];
+      const node = ReactDOM.findDOMNode(currentFocusedItemRef.ref.current);
+      if (!node && this.shouldVirtualizeList()) {
+        this.props.schedule.animationFrame(focusNode);
+        return;
       }
-      const node = ReactDOM.findDOMNode(focusedItemRef.ref.current);
       if (node) {
         node.focus();
-        this.focusedOriginalIndex = focusedItemRef.originalIndex;
+        this.focusedOriginalIndex = currentFocusedItemRef.originalIndex;
         if (onFocus) {
           onFocus(node);
         }
       }
+    };
+    if (this.shouldVirtualizeList()) {
+      this.props.schedule.animationFrame(focusNode);
+    } else {
+      focusNode();
     }
   }
   focusSearchField() {
@@ -1106,7 +1125,7 @@ class DropdownCore extends React.Component {
         return this.focusSearchField();
       }
       this.focusedIndex = this.state.itemRefs.length - 1;
-    } else {
+    } else if (!this.isSearchFieldFocused()) {
       this.focusedIndex -= 1;
     }
     this.scheduleToFocusCurrentItem();
@@ -1117,7 +1136,7 @@ class DropdownCore extends React.Component {
         return this.focusSearchField();
       }
       this.focusedIndex = 0;
-    } else {
+    } else if (!this.isSearchFieldFocused()) {
       this.focusedIndex += 1;
     }
     this.scheduleToFocusCurrentItem();
@@ -1199,7 +1218,7 @@ class DropdownCore extends React.Component {
       const focusIndex = focusCounter - 1;
       return _extends({}, item, {
         role: populatedProps.role || itemRole,
-        ref: item.focusable ? this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null : null,
+        ref: item.focusable && this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null,
         onClick: () => {
           this.handleItemClick(focusIndex, item);
         }
@@ -1868,7 +1887,7 @@ const _generateStyles = (light, placeholder, error) => {
   return stateStyles[styleKey];
 };
 
-const _excluded$1 = ["children", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required", "showOpenerLabelAsText"];
+const _excluded$1 = ["children", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "showOpenerLabelAsText", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required"];
 class SingleSelect extends React.Component {
   constructor(props) {
     super(props);
@@ -2080,7 +2099,7 @@ SingleSelect.defaultProps = {
   showOpenerLabelAsText: true
 };
 
-const _excluded = ["id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required"];
+const _excluded = ["id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required", "showOpenerLabelAsText"];
 class MultiSelect extends React.Component {
   constructor(props) {
     super(props);

package/dist/hooks/use-listbox.d.ts

@@ -68,7 +68,7 @@ export declare function useListbox({ children: options, disabled, disableSpaceSe
         rightAccessory?: React.ReactNode;
         subtitle1?: import("@khanacademy/wonder-blocks-cell").TypographyText | undefined;
         subtitle2?: import("@khanacademy/wonder-blocks-cell").TypographyText | undefined;
-    }, keyof import("@khanacademy/wonder-blocks-core").AriaAttributes | "label" | "style" | "leftAccessory" | "rightAccessory" | "testId" | "onClick" | "subtitle1" | "id" | "subtitle2" | "value" | "labelAsText" | "variant" | "parentComponent"> & {
+    }, keyof import("@khanacademy/wonder-blocks-core").AriaAttributes | "style" | "label" | "leftAccessory" | "rightAccessory" | "testId" | "onClick" | "subtitle1" | "subtitle2" | "value" | "id" | "labelAsText" | "variant" | "parentComponent"> & {
         selected?: boolean | undefined;
         role?: "menuitem" | "menuitemcheckbox" | "option" | undefined;
         disabled?: boolean | undefined;

package/dist/index.js

@@ -861,13 +861,13 @@ class DropdownCore extends React__namespace.Component {
   }
   constructor(props) {
     super(props);
-    this.focusedIndex = void 0;
-    this.focusedOriginalIndex = void 0;
-    this.itemsClicked = void 0;
     this.popperElement = void 0;
     this.virtualizedListRef = void 0;
     this.handleKeyDownDebounced = void 0;
     this.textSuggestion = void 0;
+    this.focusedIndex = -1;
+    this.focusedOriginalIndex = -1;
+    this.itemsClicked = false;
     this.searchFieldRef = React__namespace.createRef();
     this.handleInteract = event => {
       const {
@@ -1111,18 +1111,37 @@ class DropdownCore extends React__namespace.Component {
   }
   focusCurrentItem(onFocus) {
     const focusedItemRef = this.state.itemRefs[this.focusedIndex];
-    if (focusedItemRef) {
-      if (this.virtualizedListRef.current) {
-        this.virtualizedListRef.current.scrollToItem(focusedItemRef.originalIndex);
+    if (!focusedItemRef) {
+      return;
+    }
+    const {
+      current: virtualizedList
+    } = this.virtualizedListRef;
+    if (virtualizedList) {
+      virtualizedList.scrollToItem(focusedItemRef.originalIndex);
+    }
+    const focusNode = () => {
+      if (!this.props.open) {
+        return;
+      }
+      const currentFocusedItemRef = this.state.itemRefs[this.focusedIndex];
+      const node = ReactDOM__namespace.findDOMNode(currentFocusedItemRef.ref.current);
+      if (!node && this.shouldVirtualizeList()) {
+        this.props.schedule.animationFrame(focusNode);
+        return;
       }
-      const node = ReactDOM__namespace.findDOMNode(focusedItemRef.ref.current);
       if (node) {
         node.focus();
-        this.focusedOriginalIndex = focusedItemRef.originalIndex;
+        this.focusedOriginalIndex = currentFocusedItemRef.originalIndex;
         if (onFocus) {
           onFocus(node);
         }
       }
+    };
+    if (this.shouldVirtualizeList()) {
+      this.props.schedule.animationFrame(focusNode);
+    } else {
+      focusNode();
     }
   }
   focusSearchField() {
@@ -1142,7 +1161,7 @@ class DropdownCore extends React__namespace.Component {
         return this.focusSearchField();
       }
       this.focusedIndex = this.state.itemRefs.length - 1;
-    } else {
+    } else if (!this.isSearchFieldFocused()) {
       this.focusedIndex -= 1;
     }
     this.scheduleToFocusCurrentItem();
@@ -1153,7 +1172,7 @@ class DropdownCore extends React__namespace.Component {
         return this.focusSearchField();
       }
       this.focusedIndex = 0;
-    } else {
+    } else if (!this.isSearchFieldFocused()) {
       this.focusedIndex += 1;
     }
     this.scheduleToFocusCurrentItem();
@@ -1235,7 +1254,7 @@ class DropdownCore extends React__namespace.Component {
       const focusIndex = focusCounter - 1;
       return _extends__default["default"]({}, item, {
         role: populatedProps.role || itemRole,
-        ref: item.focusable ? this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null : null,
+        ref: item.focusable && this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null,
         onClick: () => {
           this.handleItemClick(focusIndex, item);
         }
@@ -1904,7 +1923,7 @@ const _generateStyles = (light, placeholder, error) => {
   return stateStyles[styleKey];
 };
 
-const _excluded$1 = ["children", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required", "showOpenerLabelAsText"];
+const _excluded$1 = ["children", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "showOpenerLabelAsText", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required"];
 class SingleSelect extends React__namespace.Component {
   constructor(props) {
     super(props);
@@ -2116,7 +2135,7 @@ SingleSelect.defaultProps = {
   showOpenerLabelAsText: true
 };
 
-const _excluded = ["id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required"];
+const _excluded = ["id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required", "showOpenerLabelAsText"];
 class MultiSelect extends React__namespace.Component {
   constructor(props) {
     super(props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "5.8.0",
+  "version": "6.0.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,31 +16,31 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-cell": "^3.4.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.2.9",
-    "@khanacademy/wonder-blocks-core": "^7.0.1",
-    "@khanacademy/wonder-blocks-icon": "^4.2.0",
-    "@khanacademy/wonder-blocks-layout": "^2.2.2",
-    "@khanacademy/wonder-blocks-modal": "^5.1.17",
-    "@khanacademy/wonder-blocks-pill": "^2.5.3",
-    "@khanacademy/wonder-blocks-search-field": "^2.3.6",
-    "@khanacademy/wonder-blocks-timing": "^5.0.2",
-    "@khanacademy/wonder-blocks-tokens": "^2.1.0",
-    "@khanacademy/wonder-blocks-typography": "^2.1.16"
+    "@khanacademy/wonder-blocks-cell": "^4.0.0",
+    "@khanacademy/wonder-blocks-clickable": "^5.0.0",
+    "@khanacademy/wonder-blocks-core": "^8.0.0",
+    "@khanacademy/wonder-blocks-icon": "^5.0.0",
+    "@khanacademy/wonder-blocks-layout": "^3.0.0",
+    "@khanacademy/wonder-blocks-modal": "^6.0.0",
+    "@khanacademy/wonder-blocks-pill": "^3.0.0",
+    "@khanacademy/wonder-blocks-search-field": "^3.0.0",
+    "@khanacademy/wonder-blocks-timing": "^6.0.0",
+    "@khanacademy/wonder-blocks-tokens": "^3.0.0",
+    "@khanacademy/wonder-blocks-typography": "^3.0.0"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
     "@popperjs/core": "^2.10.1",
     "aphrodite": "^1.2.5",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-popper": "^2.0.0",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0",
-    "react-window": "^1.8.5"
+    "react-router": "5.3.4",
+    "react-router-dom": "5.3.4",
+    "react-window": "^1.8.10"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^6.3.12",
-    "@khanacademy/wb-dev-build-settings": "^1.0.1"
+    "@khanacademy/wonder-blocks-button": "^7.0.0",
+    "@khanacademy/wb-dev-build-settings": "^2.0.0"
   }
 }