@react-aria/listbox - npm Package Compare versions

Comparing version 3.0.0-alpha.1 to 3.0.0-rc.0

dist/main.js

@@ -1,18 +0,25 @@
-var _babelRuntimeHelpersObjectSpread = $parcel$interopDefault(require("@babel/runtime/helpers/objectSpread2"));
+var {
+  isFocusVisible,
+  useHover,
+  usePress
+} = require("@react-aria/interactions");
 
-var _temp = require("@react-aria/selection");
+var {
+  useSelectableList,
+  useSelectableItem
+} = require("@react-aria/selection");
 
-var useSelectableList = _temp.useSelectableList;
-var useSelectableItem = _temp.useSelectableItem;
+var {
+  useLabel
+} = require("@react-aria/label");
 
-var _temp2 = require("@react-aria/interactions");
+var {
+  filterDOMProps,
+  mergeProps,
+  useSlotId,
+  useId
+} = require("@react-aria/utils");
 
-var useHover = _temp2.useHover;
-var usePress = _temp2.usePress;
+var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
 
-var _temp3 = require("@react-aria/utils");
-
-var useSlotId = _temp3.useSlotId;
-var useId = _temp3.useId;
-
 function $parcel$interopDefault(a) {
@@ -22,14 +29,34 @@ return a && a.__esModule ? a.default : a;
 
-function useListBox(props, state) {
-  var _useSelectableList = useSelectableList(_babelRuntimeHelpersObjectSpread({}, props, {
+/**
+ * Provides the behavior and accessibility implementation for a listbox component.
+ * A listbox displays a list of options and allows a user to select one or more of them.
+ * @param props - props for the listbox
+ * @param state - state for the listbox, as returned by `useListState`
+ */
+function useListBox(props, state, ref) {
+  let domProps = filterDOMProps(props, {
+    labelable: true
+  });
+  let {
+    listProps
+  } = useSelectableList(_babelRuntimeHelpersExtends({}, props, {
+    ref,
     selectionManager: state.selectionManager,
-    collection: state.collection
-  })),
-      listProps = _useSelectableList.listProps;
-
+    collection: state.collection,
+    disabledKeys: state.disabledKeys
+  }));
+  let {
+    labelProps,
+    fieldProps
+  } = useLabel(_babelRuntimeHelpersExtends({}, props, {
+    // listbox is not an HTML input element so it
+    // shouldn't be labeled by a <label> element.
+    labelElementType: 'span'
+  }));
   return {
-    listBoxProps: _babelRuntimeHelpersObjectSpread({
+    labelProps,
+    listBoxProps: mergeProps(domProps, _babelRuntimeHelpersExtends({
       role: 'listbox',
       'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined
-    }, listProps)
+    }, mergeProps(fieldProps, listProps)))
   };
@@ -40,13 +67,20 @@ }
 
-function useOption(props, state) {
-  var isSelected = props.isSelected,
-      isDisabled = props.isDisabled,
-      key = props.key,
-      ref = props.ref,
-      shouldSelectOnPressUp = props.shouldSelectOnPressUp,
-      shouldFocusOnHover = props.shouldFocusOnHover,
-      isVirtualized = props.isVirtualized;
-  var labelId = useSlotId();
-  var descriptionId = useSlotId();
-  var optionProps = {
+/**
+ * Provides the behavior and accessibility implementation for an option in a listbox.
+ * See `useListBox` for more details about listboxes.
+ * @param props - props for the option
+ * @param state - state for the listbox, as returned by `useListState`
+ */
+function useOption(props, state, ref) {
+  let {
+    isSelected,
+    isDisabled,
+    key,
+    shouldSelectOnPressUp,
+    shouldFocusOnHover,
+    isVirtualized
+  } = props;
+  let labelId = useSlotId();
+  let descriptionId = useSlotId();
+  let optionProps = {
     role: 'option',
@@ -61,30 +95,35 @@ 'aria-disabled': isDisabled,
   if (isVirtualized) {
-    optionProps['aria-posinset'] = state.collection.getItem(key).index;
+    optionProps['aria-posinset'] = state.collection.getItem(key).index + 1;
     optionProps['aria-setsize'] = state.collection.size;
   }
 
-  var _useSelectableItem = useSelectableItem({
+  let {
+    itemProps
+  } = useSelectableItem({
     selectionManager: state.selectionManager,
-    itemKey: key,
-    itemRef: ref,
-    shouldSelectOnPressUp: shouldSelectOnPressUp,
-    isVirtualized: isVirtualized
-  }),
-      itemProps = _useSelectableItem.itemProps;
+    key,
+    ref,
+    shouldSelectOnPressUp,
+    isVirtualized
+  });
+  let {
+    pressProps
+  } = usePress(_babelRuntimeHelpersExtends({}, itemProps, {
+    isDisabled
+  }));
+  let {
+    hoverProps
+  } = useHover({
+    isDisabled: isDisabled || !shouldFocusOnHover,
 
-  var _usePress = usePress(_babelRuntimeHelpersObjectSpread({}, itemProps, {
-    isDisabled: isDisabled
-  })),
-      pressProps = _usePress.pressProps;
-
-  var _useHover = useHover({
-    isDisabled: isDisabled || !shouldFocusOnHover,
-    onHover: function onHover() {
-      state.selectionManager.setFocusedKey(key);
+    onHoverStart() {
+      if (!isFocusVisible()) {
+        state.selectionManager.setFocused(true);
+        state.selectionManager.setFocusedKey(key);
+      }
     }
-  }),
-      hoverProps = _useHover.hoverProps;
 
+  });
   return {
-    optionProps: _babelRuntimeHelpersObjectSpread({}, optionProps, {}, pressProps, {}, hoverProps),
+    optionProps: _babelRuntimeHelpersExtends({}, optionProps, {}, mergeProps(pressProps, hoverProps)),
     labelProps: {
@@ -101,7 +140,17 @@ id: labelId
 
+/**
+ * Provides the behavior and accessibility implementation for a section in a listbox.
+ * See `useListBox` for more details about listboxes.
+ * @param props - props for the section
+ */
 function useListBoxSection(props) {
-  var heading = props.heading,
-      ariaLabel = props['aria-label'];
-  var headingId = useId();
+  let {
+    heading,
+    'aria-label': ariaLabel
+  } = props;
+  let headingId = useId();
   return {
+    itemProps: {
+      role: 'presentation'
+    },
     headingProps: heading ? {
@@ -122,2 +171,3 @@ // Techincally, listbox cannot contain headings according to ARIA.
 
-exports.useListBoxSection = useListBoxSection;
+exports.useListBoxSection = useListBoxSection;
+//# sourceMappingURL=main.js.map

dist/module.js

@@ -1,20 +0,49 @@
-import _babelRuntimeHelpersEsmObjectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { isFocusVisible, useHover, usePress } from "@react-aria/interactions";
 import { useSelectableList, useSelectableItem } from "@react-aria/selection";
-import { useHover, usePress } from "@react-aria/interactions";
-import { useSlotId, useId } from "@react-aria/utils";
-export function useListBox(props, state) {
+import { useLabel } from "@react-aria/label";
+import { filterDOMProps, mergeProps, useSlotId, useId } from "@react-aria/utils";
+import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
+
+/**
+ * Provides the behavior and accessibility implementation for a listbox component.
+ * A listbox displays a list of options and allows a user to select one or more of them.
+ * @param props - props for the listbox
+ * @param state - state for the listbox, as returned by `useListState`
+ */
+export function useListBox(props, state, ref) {
+  let domProps = filterDOMProps(props, {
+    labelable: true
+  });
   let {
     listProps
-  } = useSelectableList(_babelRuntimeHelpersEsmObjectSpread({}, props, {
+  } = useSelectableList(_babelRuntimeHelpersEsmExtends({}, props, {
+    ref,
     selectionManager: state.selectionManager,
-    collection: state.collection
+    collection: state.collection,
+    disabledKeys: state.disabledKeys
   }));
+  let {
+    labelProps,
+    fieldProps
+  } = useLabel(_babelRuntimeHelpersEsmExtends({}, props, {
+    // listbox is not an HTML input element so it
+    // shouldn't be labeled by a <label> element.
+    labelElementType: 'span'
+  }));
   return {
-    listBoxProps: _babelRuntimeHelpersEsmObjectSpread({
+    labelProps,
+    listBoxProps: mergeProps(domProps, _babelRuntimeHelpersEsmExtends({
       role: 'listbox',
       'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined
-    }, listProps)
+    }, mergeProps(fieldProps, listProps)))
   };
 }
-export function useOption(props, state) {
+
+/**
+ * Provides the behavior and accessibility implementation for an option in a listbox.
+ * See `useListBox` for more details about listboxes.
+ * @param props - props for the option
+ * @param state - state for the listbox, as returned by `useListState`
+ */
+export function useOption(props, state, ref) {
   let {
@@ -24,3 +53,2 @@ isSelected,
     key,
-    ref,
     shouldSelectOnPressUp,
@@ -42,3 +70,3 @@ shouldFocusOnHover,
   if (isVirtualized) {
-    optionProps['aria-posinset'] = state.collection.getItem(key).index;
+    optionProps['aria-posinset'] = state.collection.getItem(key).index + 1;
     optionProps['aria-setsize'] = state.collection.size;
@@ -51,4 +79,4 @@ }
     selectionManager: state.selectionManager,
-    itemKey: key,
-    itemRef: ref,
+    key,
+    ref,
     shouldSelectOnPressUp,
@@ -59,3 +87,3 @@ isVirtualized
     pressProps
-  } = usePress(_babelRuntimeHelpersEsmObjectSpread({}, itemProps, {
+  } = usePress(_babelRuntimeHelpersEsmExtends({}, itemProps, {
     isDisabled
@@ -68,4 +96,7 @@ }));
 
-    onHover() {
-      state.selectionManager.setFocusedKey(key);
+    onHoverStart() {
+      if (!isFocusVisible()) {
+        state.selectionManager.setFocused(true);
+        state.selectionManager.setFocusedKey(key);
+      }
     }
@@ -75,3 +106,3 @@
   return {
-    optionProps: _babelRuntimeHelpersEsmObjectSpread({}, optionProps, {}, pressProps, {}, hoverProps),
+    optionProps: _babelRuntimeHelpersEsmExtends({}, optionProps, {}, mergeProps(pressProps, hoverProps)),
     labelProps: {
@@ -85,2 +116,8 @@ id: labelId
 }
+
+/**
+ * Provides the behavior and accessibility implementation for a section in a listbox.
+ * See `useListBox` for more details about listboxes.
+ * @param props - props for the section
+ */
 export function useListBoxSection(props) {
@@ -93,2 +130,5 @@ let {
   return {
+    itemProps: {
+      role: 'presentation'
+    },
     headingProps: heading ? {
@@ -107,2 +147,3 @@ // Techincally, listbox cannot contain headings according to ARIA.
   };
-}
+}
+//# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -1,42 +0,83 @@
-import { FocusStrategy } from "@react-types/listbox";
-import { HTMLAttributes, RefObject, Key, ReactNode } from "react";
+import { AriaListBoxProps } from "@react-types/listbox";
+import { HTMLAttributes, ReactNode, RefObject, Key } from "react";
 import { KeyboardDelegate } from "@react-types/shared";
 import { ListState } from "@react-stately/list";
 interface ListBoxAria {
+    /** Props for the listbox element. */
     listBoxProps: HTMLAttributes<HTMLElement>;
+    /** Props for the listbox's visual label element (if any). */
+    labelProps: HTMLAttributes<HTMLElement>;
 }
-interface AriaListBoxProps {
-    ref?: RefObject<HTMLDivElement>;
+interface AriaListBoxOptions<T> extends AriaListBoxProps<T> {
+    /** Whether the listbox uses virtual scrolling. */
     isVirtualized?: boolean;
+    /**
+     * An optional keyboard delegate implementation for type to select,
+     * to override the default.
+     */
     keyboardDelegate?: KeyboardDelegate;
-    autoFocus?: boolean | FocusStrategy;
-    shouldFocusWrap?: boolean;
+    /**
+     * An optional visual label for the listbox.
+     */
+    label?: ReactNode;
 }
-export function useListBox<T>(props: AriaListBoxProps, state: ListState<T>): ListBoxAria;
-interface OptionProps {
+/**
+ * Provides the behavior and accessibility implementation for a listbox component.
+ * A listbox displays a list of options and allows a user to select one or more of them.
+ * @param props - props for the listbox
+ * @param state - state for the listbox, as returned by `useListState`
+ */
+export function useListBox<T>(props: AriaListBoxOptions<T>, state: ListState<T>, ref: RefObject<HTMLElement>): ListBoxAria;
+interface OptionAria {
+    /** Props for the option element. */
+    optionProps: HTMLAttributes<HTMLElement>;
+    /** Props for the main text element inside the option. */
+    labelProps: HTMLAttributes<HTMLElement>;
+    /** Props for the description text element inside the option, if any. */
+    descriptionProps: HTMLAttributes<HTMLElement>;
+}
+interface AriaOptionProps {
+    /** Whether the option is disabled. */
     isDisabled?: boolean;
+    /** Whether the option is selected. */
     isSelected?: boolean;
+    /** A screen reader only label for the option. */
     'aria-label'?: string;
+    /** The unique key for the option. */
     key?: Key;
-    ref?: RefObject<HTMLElement>;
+    /** Whether selection should occur on press up instead of press down. */
     shouldSelectOnPressUp?: boolean;
+    /** Whether the option should be focused when the user hovers over it. */
     shouldFocusOnHover?: boolean;
+    /** Whether the option is contained in a virtual scrolling listbox. */
     isVirtualized?: boolean;
 }
-interface OptionAria {
-    optionProps: HTMLAttributes<HTMLElement>;
-    labelProps: HTMLAttributes<HTMLElement>;
-    descriptionProps: HTMLAttributes<HTMLElement>;
-}
-export function useOption<T>(props: OptionProps, state: ListState<T>): OptionAria;
-interface ListBoxSectionProps {
+/**
+ * Provides the behavior and accessibility implementation for an option in a listbox.
+ * See `useListBox` for more details about listboxes.
+ * @param props - props for the option
+ * @param state - state for the listbox, as returned by `useListState`
+ */
+export function useOption<T>(props: AriaOptionProps, state: ListState<T>, ref: RefObject<HTMLElement>): OptionAria;
+interface AriaListBoxSectionProps {
+    /** The heading for the section. */
     heading?: ReactNode;
+    /** An accessibility label for the section. Required if `heading` is not present. */
     'aria-label'?: string;
 }
 interface ListBoxSectionAria {
+    /** Props for the wrapper list item. */
+    itemProps: HTMLAttributes<HTMLElement>;
+    /** Props for the heading element, if any. */
     headingProps: HTMLAttributes<HTMLElement>;
+    /** Props for the group element. */
     groupProps: HTMLAttributes<HTMLElement>;
 }
-export function useListBoxSection(props: ListBoxSectionProps): ListBoxSectionAria;
+/**
+ * Provides the behavior and accessibility implementation for a section in a listbox.
+ * See `useListBox` for more details about listboxes.
+ * @param props - props for the section
+ */
+export function useListBoxSection(props: AriaListBoxSectionProps): ListBoxSectionAria;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@react-aria/listbox",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-rc.0",
   "description": "Spectrum UI components in React",
@@ -20,7 +20,9 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/interactions": "^3.0.0-rc.2",
-    "@react-aria/selection": "^3.0.0-alpha.1",
-    "@react-aria/utils": "^3.0.0-rc.2",
-    "@react-stately/list": "^3.0.0-alpha.1",
-    "@react-types/listbox": "^3.0.0-alpha.1"
+    "@react-aria/interactions": "3.0.0-rc.3",
+    "@react-aria/label": "3.0.0-rc.3",
+    "@react-aria/selection": "3.0.0-rc.0",
+    "@react-aria/utils": "3.0.0-rc.3",
+    "@react-stately/list": "3.0.0-rc.0",
+    "@react-types/listbox": "3.0.0-rc.0",
+    "@react-types/shared": "3.0.0-rc.3"
   },
@@ -33,3 +35,3 @@ "peerDependencies": {
   },
-  "gitHead": "207e6ee9076905c96638a7f81a367758872e1410"
+  "gitHead": "461d6321126ae9b4f1508aa912f7b36bf8a603f8"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50212

increased by139.44%

Number of package files

8

increased by33.33%

Lines of code

368

increased by57.94%

Worsened metrics

Dependency count

9

increased by28.57%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@react-aria/label@3.0.0-rc.3

• + Added@react-types/shared@3.0.0-rc.3

• + Added@react-aria/focus@3.0.0-rc.3(transitive)

• + Added@react-aria/i18n@3.0.0-rc.3(transitive)

• + Added@react-aria/interactions@3.0.0-rc.3(transitive)

• + Added@react-aria/label@3.0.0-rc.3(transitive)

• + Added@react-aria/selection@3.0.0-rc.0(transitive)

• + Added@react-aria/utils@3.0.0-rc.3(transitive)

• + Added@react-stately/collections@3.0.0-rc.0(transitive)

• + Added@react-stately/list@3.0.0-rc.0(transitive)

• + Added@react-stately/selection@3.0.0-rc.0(transitive)

• + Added@react-stately/utils@3.0.0-rc.3(transitive)

• + Added@react-types/label@3.0.0-rc.3(transitive)

• + Added@react-types/listbox@3.0.0-rc.0(transitive)

• + Added@react-types/menu@3.0.0-rc.0(transitive)

• + Added@react-types/overlays@3.0.0-rc.0(transitive)

• + Added@react-types/shared@3.0.0-rc.3(transitive)

• + Addedclassnames@2.5.1(transitive)

• + Addedintl-messageformat@2.2.0(transitive)

• + Addedintl-messageformat-parser@1.4.0(transitive)

• - Removed@formatjs/ecma402-abstract@2.0.0(transitive)

• - Removed@formatjs/fast-memoize@2.2.0(transitive)

• - Removed@formatjs/icu-messageformat-parser@2.7.8(transitive)

• - Removed@formatjs/icu-skeleton-parser@1.8.2(transitive)

• - Removed@formatjs/intl-localematcher@0.5.4(transitive)

• - Removed@internationalized/date@3.5.5(transitive)

• - Removed@internationalized/message@3.1.4(transitive)

• - Removed@internationalized/number@3.5.3(transitive)

• - Removed@internationalized/string@3.2.3(transitive)

• - Removed@react-aria/focus@3.18.2(transitive)

• - Removed@react-aria/i18n@3.12.2(transitive)

• - Removed@react-aria/interactions@3.22.2(transitive)

• - Removed@react-aria/selection@3.19.3(transitive)

• - Removed@react-aria/ssr@3.9.5(transitive)

• - Removed@react-aria/utils@3.25.2(transitive)

• - Removed@react-stately/collections@3.10.9(transitive)

• - Removed@react-stately/list@3.10.8(transitive)

• - Removed@react-stately/selection@3.16.2(transitive)

• - Removed@react-stately/utils@3.10.3(transitive)

• - Removed@react-types/listbox@3.5.1(transitive)

• - Removed@react-types/shared@3.24.1(transitive)

• - Removed@swc/helpers@0.5.13(transitive)

• - Removedclsx@2.1.1(transitive)

• - Removedintl-messageformat@10.5.14(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-dom@18.3.1(transitive)

• - Removedscheduler@0.23.2(transitive)

• - Removedtslib@2.7.0(transitive)

• Updated@react-aria/interactions@3.0.0-rc.3

• Updated@react-aria/selection@3.0.0-rc.0

• Updated@react-aria/utils@3.0.0-rc.3

• Updated@react-stately/list@3.0.0-rc.0

• Updated@react-types/listbox@3.0.0-rc.0