Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@react-spectrum/listbox
Advanced tools
@react-spectrum/listbox - npm Package Compare versions
Comparing version 3.2.2-nightly.2414 to 3.2.2-nightly.2419
@@ -41,6 +41,2 @@ var { | ||
| var { | ||
| useHover | ||
| } = require("@react-aria/interactions"); | ||
| var { | ||
| Text | ||
@@ -54,2 +50,7 @@ } = require("@react-spectrum/text"); | ||
| var { | ||
| isFocusVisible, | ||
| useHover | ||
| } = require("@react-aria/interactions"); | ||
| var { | ||
| Grid | ||
@@ -269,12 +270,16 @@ } = require("@react-spectrum/layout"); | ||
| let contents = typeof rendered === 'string' ? /*#__PURE__*/_react.createElement(Text, null, rendered) : rendered; | ||
| let isKeyboardModality = isFocusVisible(); | ||
| return /*#__PURE__*/_react.createElement(FocusRing, { | ||
| focusRingClass: classNames($bfbcd6bc836614813c70085787fd$$interop$default, 'focus-ring') | ||
| }, /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, mergeProps(optionProps, shouldFocusOnHover ? {} : hoverProps), { | ||
| }, /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, mergeProps(optionProps, shouldFocusOnHover ? hoverProps : {}), { | ||
| ref: ref, | ||
| className: classNames($bfbcd6bc836614813c70085787fd$$interop$default, 'spectrum-Menu-item', { | ||
| 'is-focused': shouldUseVirtualFocus && isFocused, | ||
| // If using virtual focus, apply focused styles to the item when the user is interacting with keyboard modality | ||
| 'is-focused': shouldUseVirtualFocus && isFocused && isKeyboardModality, | ||
| 'is-disabled': isDisabled, | ||
| 'is-selected': isSelected, | ||
| 'is-selectable': state.selectionManager.selectionMode !== 'none', | ||
| 'is-hovered': isHovered | ||
| // When shouldFocusOnHover is false, apply hover styles both when hovered with the mouse. | ||
| // Otherwise, apply hover styles when focused using non-keyboard modality. | ||
| 'is-hovered': isHovered && !shouldFocusOnHover || isFocused && !isKeyboardModality | ||
| }) | ||
@@ -459,3 +464,4 @@ }), /*#__PURE__*/_react.createElement(Grid, { | ||
| isLoading: props.isLoading, | ||
| onLoadMore: props.onLoadMore | ||
| onLoadMore: props.onLoadMore, | ||
| shouldUseVirtualFocus: shouldUseVirtualFocus | ||
| }), (type, item) => { | ||
@@ -489,2 +495,14 @@ if (type === 'item') { | ||
| ); | ||
| } else if (type === 'placeholder') { | ||
| let emptyState = props.renderEmptyState ? props.renderEmptyState() : null; | ||
| if (emptyState == null) { | ||
| return null; | ||
| } | ||
| return /*#__PURE__*/_react.createElement("div", { | ||
| // aria-selected isn't needed here since this option is not selectable. | ||
| // eslint-disable-next-line jsx-a11y/role-has-required-aria-props | ||
| role: "option" | ||
| }, emptyState); | ||
| } | ||
@@ -491,0 +509,0 @@ })); |
@@ -9,5 +9,5 @@ import { useListState } from "@react-stately/list"; | ||
| import { useOption, useListBoxSection, useListBox } from "@react-aria/listbox"; | ||
| import { useHover } from "@react-aria/interactions"; | ||
| import { Text } from "@react-spectrum/text"; | ||
| import { mergeProps } from "@react-aria/utils"; | ||
| import { isFocusVisible, useHover } from "@react-aria/interactions"; | ||
| import { Grid } from "@react-spectrum/layout"; | ||
@@ -197,12 +197,16 @@ import { FocusRing } from "@react-aria/focus"; | ||
| let contents = typeof rendered === 'string' ? /*#__PURE__*/_react.createElement(Text, null, rendered) : rendered; | ||
| let isKeyboardModality = isFocusVisible(); | ||
| return /*#__PURE__*/_react.createElement(FocusRing, { | ||
| focusRingClass: classNames($a0405c35323f8fc23474b1d62cf3a$$interop$default, 'focus-ring') | ||
| }, /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, mergeProps(optionProps, shouldFocusOnHover ? {} : hoverProps), { | ||
| }, /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, mergeProps(optionProps, shouldFocusOnHover ? hoverProps : {}), { | ||
| ref: ref, | ||
| className: classNames($a0405c35323f8fc23474b1d62cf3a$$interop$default, 'spectrum-Menu-item', { | ||
| 'is-focused': shouldUseVirtualFocus && isFocused, | ||
| // If using virtual focus, apply focused styles to the item when the user is interacting with keyboard modality | ||
| 'is-focused': shouldUseVirtualFocus && isFocused && isKeyboardModality, | ||
| 'is-disabled': isDisabled, | ||
| 'is-selected': isSelected, | ||
| 'is-selectable': state.selectionManager.selectionMode !== 'none', | ||
| 'is-hovered': isHovered | ||
| // When shouldFocusOnHover is false, apply hover styles both when hovered with the mouse. | ||
| // Otherwise, apply hover styles when focused using non-keyboard modality. | ||
| 'is-hovered': isHovered && !shouldFocusOnHover || isFocused && !isKeyboardModality | ||
| }) | ||
@@ -384,3 +388,4 @@ }), /*#__PURE__*/_react.createElement(Grid, { | ||
| isLoading: props.isLoading, | ||
| onLoadMore: props.onLoadMore | ||
| onLoadMore: props.onLoadMore, | ||
| shouldUseVirtualFocus: shouldUseVirtualFocus | ||
| }), (type, item) => { | ||
@@ -414,2 +419,14 @@ if (type === 'item') { | ||
| ); | ||
| } else if (type === 'placeholder') { | ||
| let emptyState = props.renderEmptyState ? props.renderEmptyState() : null; | ||
| if (emptyState == null) { | ||
| return null; | ||
| } | ||
| return /*#__PURE__*/_react.createElement("div", { | ||
| // aria-selected isn't needed here since this option is not selectable. | ||
| // eslint-disable-next-line jsx-a11y/role-has-required-aria-props | ||
| role: "option" | ||
| }, emptyState); | ||
| } | ||
@@ -416,0 +433,0 @@ })); |
| import { AriaLabelingProps, DOMProps, FocusStrategy, StyleProps } from "@react-types/shared"; | ||
| import { ListLayout } from "@react-stately/layout"; | ||
| import { ListState } from "@react-stately/list"; | ||
| import React, { HTMLAttributes } from "react"; | ||
| import React, { HTMLAttributes, ReactNode } from "react"; | ||
| import { SpectrumListBoxProps } from "@react-types/listbox"; | ||
@@ -19,2 +19,3 @@ interface ListBoxBaseProps<T> extends DOMProps, AriaLabelingProps, StyleProps { | ||
| onLoadMore?: () => void; | ||
| renderEmptyState?: () => ReactNode; | ||
| } | ||
@@ -21,0 +22,0 @@ /** @private */ |
| { | ||
| "name": "@react-spectrum/listbox", | ||
| "version": "3.2.2-nightly.2414+0ac271ac", | ||
| "version": "3.2.2-nightly.2419+975957a3", | ||
| "description": "Spectrum UI components in React", | ||
@@ -35,24 +35,24 @@ "license": "Apache-2.0", | ||
| "@babel/runtime": "^7.6.2", | ||
| "@react-aria/focus": "3.0.0-nightly.736+0ac271ac", | ||
| "@react-aria/i18n": "3.0.0-nightly.736+0ac271ac", | ||
| "@react-aria/interactions": "3.0.0-nightly.736+0ac271ac", | ||
| "@react-aria/listbox": "3.2.2-nightly.2414+0ac271ac", | ||
| "@react-aria/separator": "3.0.0-nightly.736+0ac271ac", | ||
| "@react-aria/utils": "3.0.0-nightly.736+0ac271ac", | ||
| "@react-aria/virtualizer": "3.2.1-nightly.2414+0ac271ac", | ||
| "@react-spectrum/layout": "3.1.4-nightly.2414+0ac271ac", | ||
| "@react-spectrum/progress": "3.0.0-nightly.736+0ac271ac", | ||
| "@react-spectrum/provider": "3.0.0-nightly.736+0ac271ac", | ||
| "@react-spectrum/text": "3.1.2-nightly.2414+0ac271ac", | ||
| "@react-spectrum/utils": "3.0.0-nightly.736+0ac271ac", | ||
| "@react-stately/collections": "3.0.0-nightly.736+0ac271ac", | ||
| "@react-stately/layout": "3.1.3-nightly.2414+0ac271ac", | ||
| "@react-stately/list": "3.2.2-nightly.2414+0ac271ac", | ||
| "@react-stately/virtualizer": "3.1.3-nightly.2414+0ac271ac", | ||
| "@react-types/listbox": "3.1.2-nightly.2414+0ac271ac", | ||
| "@react-types/shared": "3.0.0-nightly.736+0ac271ac", | ||
| "@spectrum-icons/ui": "3.0.0-nightly.736+0ac271ac" | ||
| "@react-aria/focus": "3.0.0-nightly.741+975957a3", | ||
| "@react-aria/i18n": "3.0.0-nightly.741+975957a3", | ||
| "@react-aria/interactions": "3.0.0-nightly.741+975957a3", | ||
| "@react-aria/listbox": "3.2.2-nightly.2419+975957a3", | ||
| "@react-aria/separator": "3.0.0-nightly.741+975957a3", | ||
| "@react-aria/utils": "3.0.0-nightly.741+975957a3", | ||
| "@react-aria/virtualizer": "3.2.1-nightly.2419+975957a3", | ||
| "@react-spectrum/layout": "3.1.4-nightly.2419+975957a3", | ||
| "@react-spectrum/progress": "3.0.0-nightly.741+975957a3", | ||
| "@react-spectrum/provider": "3.0.0-nightly.741+975957a3", | ||
| "@react-spectrum/text": "3.1.2-nightly.2419+975957a3", | ||
| "@react-spectrum/utils": "3.0.0-nightly.741+975957a3", | ||
| "@react-stately/collections": "3.0.0-nightly.741+975957a3", | ||
| "@react-stately/layout": "3.1.3-nightly.2419+975957a3", | ||
| "@react-stately/list": "3.2.2-nightly.2419+975957a3", | ||
| "@react-stately/virtualizer": "3.1.3-nightly.2419+975957a3", | ||
| "@react-types/listbox": "3.1.2-nightly.2419+975957a3", | ||
| "@react-types/shared": "3.0.0-nightly.741+975957a3", | ||
| "@spectrum-icons/ui": "3.0.0-nightly.741+975957a3" | ||
| }, | ||
| "devDependencies": { | ||
| "@adobe/spectrum-css-temp": "3.0.0-nightly.736+0ac271ac" | ||
| "@adobe/spectrum-css-temp": "3.0.0-nightly.741+975957a3" | ||
| }, | ||
@@ -66,3 +66,3 @@ "peerDependencies": { | ||
| }, | ||
| "gitHead": "0ac271ac5508fc6b03e0bd416142aba02546164a" | ||
| "gitHead": "975957a3c3fb4a9f3be358428e0980a4d4e51c1a" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.69%
173305
- Lines of code
- increased by3.75%
1411