@react-stately/select - npm Package Compare versions

Comparing version 3.0.2 to 3.1.0

dist/main.js

 var {
-  useControlledState
-} = require("@react-stately/utils");
+  useState
+} = require("react");
 
 var {
-  useMenuTriggerState
-} = require("@react-stately/menu");
-
-var {
-  useListState
+  useSingleSelectListState
 } = require("@react-stately/list");
 
 var {
-  useMemo,
-  useState
-} = require("react");
+  useMenuTriggerState
+} = require("@react-stately/menu");
 
@@ -30,24 +25,17 @@ var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
 function useSelectState(props) {
-  let [selectedKey, setSelectedKey] = useControlledState(props.selectedKey, props.defaultSelectedKey, props.onSelectionChange);
-  let selectedKeys = useMemo(() => selectedKey != null ? [selectedKey] : [], [selectedKey]);
   let triggerState = useMenuTriggerState(props);
-  let {
-    collection,
-    disabledKeys,
-    selectionManager
-  } = useListState(_babelRuntimeHelpersExtends({}, props, {
-    selectionMode: 'single',
-    disallowEmptySelection: true,
-    selectedKeys,
-    onSelectionChange: keys => {
-      setSelectedKey(keys.values().next().value);
+  let listState = useSingleSelectListState(_babelRuntimeHelpersExtends({}, props, {
+    onSelectionChange: key => {
+      if (props.onSelectionChange != null) {
+        props.onSelectionChange(key);
+      }
+
       triggerState.close();
     }
   }));
-  let selectedItem = selectedKey ? collection.getItem(selectedKey) : null;
   let [isFocused, setFocused] = useState(false);
-  return _babelRuntimeHelpersExtends({}, triggerState, {
+  return _babelRuntimeHelpersExtends({}, listState, triggerState, {
     open() {
       // Don't open if the collection is empty.
-      if (collection.size !== 0) {
+      if (listState.collection.size !== 0) {
         triggerState.open();
@@ -58,3 +46,3 @@ }
     toggle(focusStrategy) {
-      if (collection.size !== 0) {
+      if (listState.collection.size !== 0) {
         triggerState.toggle(focusStrategy);
@@ -64,8 +52,2 @@ }
 
-    collection,
-    disabledKeys,
-    selectionManager,
-    selectedKey,
-    setSelectedKey,
-    selectedItem,
     isFocused,
@@ -72,0 +54,0 @@ setFocused

dist/module.js

@@ -1,5 +0,4 @@
-import { useControlledState } from "@react-stately/utils";
+import { useState } from "react";
+import { useSingleSelectListState } from "@react-stately/list";
 import { useMenuTriggerState } from "@react-stately/menu";
-import { useListState } from "@react-stately/list";
-import { useMemo, useState } from "react";
 import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
@@ -13,24 +12,17 @@
 export function useSelectState(props) {
-  let [selectedKey, setSelectedKey] = useControlledState(props.selectedKey, props.defaultSelectedKey, props.onSelectionChange);
-  let selectedKeys = useMemo(() => selectedKey != null ? [selectedKey] : [], [selectedKey]);
   let triggerState = useMenuTriggerState(props);
-  let {
-    collection,
-    disabledKeys,
-    selectionManager
-  } = useListState(_babelRuntimeHelpersEsmExtends({}, props, {
-    selectionMode: 'single',
-    disallowEmptySelection: true,
-    selectedKeys,
-    onSelectionChange: keys => {
-      setSelectedKey(keys.values().next().value);
+  let listState = useSingleSelectListState(_babelRuntimeHelpersEsmExtends({}, props, {
+    onSelectionChange: key => {
+      if (props.onSelectionChange != null) {
+        props.onSelectionChange(key);
+      }
+
       triggerState.close();
     }
   }));
-  let selectedItem = selectedKey ? collection.getItem(selectedKey) : null;
   let [isFocused, setFocused] = useState(false);
-  return _babelRuntimeHelpersEsmExtends({}, triggerState, {
+  return _babelRuntimeHelpersEsmExtends({}, listState, triggerState, {
     open() {
       // Don't open if the collection is empty.
-      if (collection.size !== 0) {
+      if (listState.collection.size !== 0) {
         triggerState.open();
@@ -41,3 +33,3 @@ }
     toggle(focusStrategy) {
-      if (collection.size !== 0) {
+      if (listState.collection.size !== 0) {
         triggerState.toggle(focusStrategy);
@@ -47,8 +39,2 @@ }
 
-    collection,
-    disabledKeys,
-    selectionManager,
-    selectedKey,
-    setSelectedKey,
-    selectedItem,
     isFocused,
@@ -55,0 +41,0 @@ setFocused

dist/types.d.ts

@@ -1,13 +0,5 @@
-import { Key } from "react";
-import { ListState } from "@react-stately/list";
 import { MenuTriggerState } from "@react-stately/menu";
-import { Node } from "@react-types/shared";
 import { SelectProps } from "@react-types/select";
-export interface SelectState<T> extends ListState<T>, MenuTriggerState {
-    /** The key for the currently selected item. */
-    readonly selectedKey: Key;
-    /** Sets the selected key. */
-    setSelectedKey(key: Key): void;
-    /** The value of the currently selected item. */
-    readonly selectedItem: Node<T>;
+import { SingleSelectListState } from "@react-stately/list";
+export interface SelectState<T> extends SingleSelectListState<T>, MenuTriggerState {
     /** Whether the select is currently focused. */
@@ -14,0 +6,0 @@ readonly isFocused: boolean;

package.json

 {
   "name": "@react-stately/select",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "Spectrum UI components in React",
@@ -21,9 +21,9 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-stately/collections": "^3.0.2",
-    "@react-stately/list": "^3.0.2",
-    "@react-stately/menu": "^3.0.2",
-    "@react-stately/selection": "^3.0.2",
-    "@react-stately/utils": "^3.0.2",
-    "@react-types/select": "^3.0.2",
-    "@react-types/shared": "^3.0.2"
+    "@react-stately/collections": "^3.1.0",
+    "@react-stately/list": "^3.1.0",
+    "@react-stately/menu": "^3.1.0",
+    "@react-stately/selection": "^3.1.0",
+    "@react-stately/utils": "^3.1.0",
+    "@react-types/select": "^3.1.0",
+    "@react-types/shared": "^3.1.0"
   },
@@ -36,3 +36,3 @@ "peerDependencies": {
   },
-  "gitHead": "05003506f02a0ec173f3448f1801cbdf12b47bc7"
+  "gitHead": "211099972fe75ee581892efd01a7f89dfb9cdf69"
 }

src/useSelectState.ts

@@ -13,19 +13,8 @@ /*
 
-import {Key, useMemo, useState} from 'react';
-import {ListState, useListState} from '@react-stately/list';
 import {MenuTriggerState, useMenuTriggerState} from '@react-stately/menu';
-import {Node} from '@react-types/shared';
 import {SelectProps} from '@react-types/select';
-import {useControlledState} from '@react-stately/utils';
+import {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';
+import {useState} from 'react';
 
-export interface SelectState<T> extends ListState<T>, MenuTriggerState {
-  /** The key for the currently selected item. */
-  readonly selectedKey: Key,
-
-  /** Sets the selected key. */
-  setSelectedKey(key: Key): void,
-
-  /** The value of the currently selected item. */
-  readonly selectedItem: Node<T>,
-
+export interface SelectState<T> extends SingleSelectListState<T>, MenuTriggerState {
   /** Whether the select is currently focused. */
@@ -44,12 +33,10 @@ readonly isFocused: boolean,
 export function useSelectState<T extends object>(props: SelectProps<T>): SelectState<T>  {
-  let [selectedKey, setSelectedKey] = useControlledState(props.selectedKey, props.defaultSelectedKey, props.onSelectionChange);
-  let selectedKeys = useMemo(() => selectedKey != null ? [selectedKey] : [], [selectedKey]);
   let triggerState = useMenuTriggerState(props);
-  let {collection, disabledKeys, selectionManager} = useListState({
+  let listState = useSingleSelectListState({
     ...props,
-    selectionMode: 'single',
-    disallowEmptySelection: true,
-    selectedKeys,
-    onSelectionChange: (keys: Set<Key>) => {
-      setSelectedKey(keys.values().next().value);
+    onSelectionChange: (key) => {
+      if (props.onSelectionChange != null) {
+        props.onSelectionChange(key);
+      }
+
       triggerState.close();
@@ -59,13 +46,10 @@ }
 
-  let selectedItem = selectedKey
-    ? collection.getItem(selectedKey)
-    : null;
-
   let [isFocused, setFocused] = useState(false);
 
   return {
+    ...listState,
     ...triggerState,
     open() {
       // Don't open if the collection is empty.
-      if (collection.size !== 0) {
+      if (listState.collection.size !== 0) {
         triggerState.open();
@@ -75,12 +59,6 @@ }
     toggle(focusStrategy) {
-      if (collection.size !== 0) {
+      if (listState.collection.size !== 0) {
         triggerState.toggle(focusStrategy);
       }
     },
-    collection,
-    disabledKeys,
-    selectionManager,
-    selectedKey,
-    setSelectedKey,
-    selectedItem,
     isFocused,
@@ -87,0 +65,0 @@ setFocused

No alert changes

Worsened metrics

Total package byte prevSize

26799

-16.36%

Lines of code

168

-26.32%

Dependency changes

• Updated

  @react-stately/collections@^3.1.0

• Updated

  @react-stately/list@^3.1.0

• Updated

  @react-stately/menu@^3.1.0

• Updated

  @react-stately/selection@^3.1.0

• Updated

  @react-stately/utils@^3.1.0

• Updated

  @react-types/select@^3.1.0

• Updated

  @react-types/shared@^3.1.0