@react-aria/listbox - npm Package Compare versions

Comparing version 3.0.0-alpha.1 to 3.0.0-nightly-641446f65-240905

dist/main.js

@@ -1,118 +0,32 @@
-var _babelRuntimeHelpersObjectSpread = $parcel$interopDefault(require("@babel/runtime/helpers/objectSpread2"));
+var $a3ce5bb3074610af$exports = require("./useListBox.main.js");
+var $c164f9f79f4cef2d$exports = require("./useOption.main.js");
+var $f32afd5f225c3320$exports = require("./useListBoxSection.main.js");
+var $87beb89ab4a308fd$exports = require("./utils.main.js");
 
-var _temp = require("@react-aria/selection");
 
-var useSelectableList = _temp.useSelectableList;
-var useSelectableItem = _temp.useSelectableItem;
-
-var _temp2 = require("@react-aria/interactions");
-
-var useHover = _temp2.useHover;
-var usePress = _temp2.usePress;
-
-var _temp3 = require("@react-aria/utils");
-
-var useSlotId = _temp3.useSlotId;
-var useId = _temp3.useId;
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
-function useListBox(props, state) {
-  var _useSelectableList = useSelectableList(_babelRuntimeHelpersObjectSpread({}, props, {
-    selectionManager: state.selectionManager,
-    collection: state.collection
-  })),
-      listProps = _useSelectableList.listProps;
+$parcel$export(module.exports, "useListBox", () => $a3ce5bb3074610af$exports.useListBox);
+$parcel$export(module.exports, "useOption", () => $c164f9f79f4cef2d$exports.useOption);
+$parcel$export(module.exports, "useListBoxSection", () => $f32afd5f225c3320$exports.useListBoxSection);
+$parcel$export(module.exports, "listData", () => $87beb89ab4a308fd$exports.listData);
+$parcel$export(module.exports, "getItemId", () => $87beb89ab4a308fd$exports.getItemId);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
-  return {
-    listBoxProps: _babelRuntimeHelpersObjectSpread({
-      role: 'listbox',
-      'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined
-    }, listProps)
-  };
-}
 
-exports.useListBox = useListBox;
 
-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 = {
-    role: 'option',
-    'aria-disabled': isDisabled,
-    'aria-selected': isSelected,
-    'aria-label': props['aria-label'],
-    'aria-labelledby': labelId,
-    'aria-describedby': descriptionId
-  };
 
-  if (isVirtualized) {
-    optionProps['aria-posinset'] = state.collection.getItem(key).index;
-    optionProps['aria-setsize'] = state.collection.size;
-  }
 
-  var _useSelectableItem = useSelectableItem({
-    selectionManager: state.selectionManager,
-    itemKey: key,
-    itemRef: ref,
-    shouldSelectOnPressUp: shouldSelectOnPressUp,
-    isVirtualized: isVirtualized
-  }),
-      itemProps = _useSelectableItem.itemProps;
-
-  var _usePress = usePress(_babelRuntimeHelpersObjectSpread({}, itemProps, {
-    isDisabled: isDisabled
-  })),
-      pressProps = _usePress.pressProps;
-
-  var _useHover = useHover({
-    isDisabled: isDisabled || !shouldFocusOnHover,
-    onHover: function onHover() {
-      state.selectionManager.setFocusedKey(key);
-    }
-  }),
-      hoverProps = _useHover.hoverProps;
-
-  return {
-    optionProps: _babelRuntimeHelpersObjectSpread({}, optionProps, {}, pressProps, {}, hoverProps),
-    labelProps: {
-      id: labelId
-    },
-    descriptionProps: {
-      id: descriptionId
-    }
-  };
-}
-
-exports.useOption = useOption;
-
-function useListBoxSection(props) {
-  var heading = props.heading,
-      ariaLabel = props['aria-label'];
-  var headingId = useId();
-  return {
-    headingProps: heading ? {
-      // Techincally, listbox cannot contain headings according to ARIA.
-      // We hide the heading from assistive technology, and only use it
-      // as a label for the nested group.
-      id: headingId,
-      'aria-hidden': true
-    } : {},
-    groupProps: {
-      role: 'group',
-      'aria-label': ariaLabel,
-      'aria-labelledby': heading ? headingId : undefined
-    }
-  };
-}
-
-exports.useListBoxSection = useListBoxSection;
+//# sourceMappingURL=main.js.map

dist/module.js

@@ -1,99 +0,23 @@
-import _babelRuntimeHelpersEsmObjectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-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) {
-  let {
-    listProps
-  } = useSelectableList(_babelRuntimeHelpersEsmObjectSpread({}, props, {
-    selectionManager: state.selectionManager,
-    collection: state.collection
-  }));
-  return {
-    listBoxProps: _babelRuntimeHelpersEsmObjectSpread({
-      role: 'listbox',
-      'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined
-    }, listProps)
-  };
-}
-export function useOption(props, state) {
-  let {
-    isSelected,
-    isDisabled,
-    key,
-    ref,
-    shouldSelectOnPressUp,
-    shouldFocusOnHover,
-    isVirtualized
-  } = props;
-  let labelId = useSlotId();
-  let descriptionId = useSlotId();
-  let optionProps = {
-    role: 'option',
-    'aria-disabled': isDisabled,
-    'aria-selected': isSelected,
-    'aria-label': props['aria-label'],
-    'aria-labelledby': labelId,
-    'aria-describedby': descriptionId
-  };
+import {useListBox as $c132121280ec012d$export$50eacbbf140a3141} from "./useListBox.module.js";
+import {useOption as $293f70390ea03370$export$497855f14858aa34} from "./useOption.module.js";
+import {useListBoxSection as $af383d3bef1cfdc9$export$c3f9f39876e4bc7} from "./useListBoxSection.module.js";
+import {getItemId as $b1f0cad8af73213b$export$9145995848b05025, listData as $b1f0cad8af73213b$export$3585ede4d035bf14} from "./utils.module.js";
 
-  if (isVirtualized) {
-    optionProps['aria-posinset'] = state.collection.getItem(key).index;
-    optionProps['aria-setsize'] = state.collection.size;
-  }
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
-  let {
-    itemProps
-  } = useSelectableItem({
-    selectionManager: state.selectionManager,
-    itemKey: key,
-    itemRef: ref,
-    shouldSelectOnPressUp,
-    isVirtualized
-  });
-  let {
-    pressProps
-  } = usePress(_babelRuntimeHelpersEsmObjectSpread({}, itemProps, {
-    isDisabled
-  }));
-  let {
-    hoverProps
-  } = useHover({
-    isDisabled: isDisabled || !shouldFocusOnHover,
 
-    onHover() {
-      state.selectionManager.setFocusedKey(key);
-    }
 
-  });
-  return {
-    optionProps: _babelRuntimeHelpersEsmObjectSpread({}, optionProps, {}, pressProps, {}, hoverProps),
-    labelProps: {
-      id: labelId
-    },
-    descriptionProps: {
-      id: descriptionId
-    }
-  };
-}
-export function useListBoxSection(props) {
-  let {
-    heading,
-    'aria-label': ariaLabel
-  } = props;
-  let headingId = useId();
-  return {
-    headingProps: heading ? {
-      // Techincally, listbox cannot contain headings according to ARIA.
-      // We hide the heading from assistive technology, and only use it
-      // as a label for the nested group.
-      id: headingId,
-      'aria-hidden': true
-    } : {},
-    groupProps: {
-      role: 'group',
-      'aria-label': ariaLabel,
-      'aria-labelledby': heading ? headingId : undefined
-    }
-  };
-}
+
+
+export {$c132121280ec012d$export$50eacbbf140a3141 as useListBox, $293f70390ea03370$export$497855f14858aa34 as useOption, $af383d3bef1cfdc9$export$c3f9f39876e4bc7 as useListBoxSection, $b1f0cad8af73213b$export$3585ede4d035bf14 as listData, $b1f0cad8af73213b$export$9145995848b05025 as getItemId};
+//# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -1,42 +0,138 @@
-import { FocusStrategy } from "@react-types/listbox";
-import { HTMLAttributes, RefObject, Key, ReactNode } from "react";
-import { KeyboardDelegate } from "@react-types/shared";
+import { Key, DOMAttributes, KeyboardDelegate, LayoutDelegate, RefObject, FocusableElement } from "@react-types/shared";
 import { ListState } from "@react-stately/list";
-interface ListBoxAria {
-    listBoxProps: HTMLAttributes<HTMLElement>;
+import { AriaListBoxProps } from "@react-types/listbox";
+import { SelectableItemStates } from "@react-aria/selection";
+import { ReactNode } from "react";
+interface ListData {
+    id: string;
+    shouldSelectOnPressUp?: boolean;
+    shouldFocusOnHover?: boolean;
+    shouldUseVirtualFocus?: boolean;
+    isVirtualized?: boolean;
+    onAction?: (key: Key) => void;
+    linkBehavior?: 'action' | 'selection' | 'override';
 }
-interface AriaListBoxProps {
-    ref?: RefObject<HTMLDivElement>;
+export const listData: WeakMap<ListState<unknown>, ListData>;
+export function getItemId<T>(state: ListState<T>, itemKey: Key): string;
+export interface ListBoxAria {
+    /** Props for the listbox element. */
+    listBoxProps: DOMAttributes;
+    /** Props for the listbox's visual label element (if any). */
+    labelProps: DOMAttributes;
+}
+export interface AriaListBoxOptions<T> extends Omit<AriaListBoxProps<T>, 'children'> {
+    /** 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;
+    /**
+     * A delegate object that provides layout information for items in the collection.
+     * By default this uses the DOM, but this can be overridden to implement things like
+     * virtualized scrolling.
+     */
+    layoutDelegate?: LayoutDelegate;
+    /**
+     * Whether the listbox items should use virtual focus instead of being focused directly.
+     */
+    shouldUseVirtualFocus?: boolean;
+    /** Whether selection should occur on press up instead of press down. */
+    shouldSelectOnPressUp?: boolean;
+    /** Whether options should be focused when the user hovers over them. */
+    shouldFocusOnHover?: boolean;
+    /**
+     * The behavior of links in the collection.
+     * - 'action': link behaves like onAction.
+     * - 'selection': link follows selection interactions (e.g. if URL drives selection).
+     * - 'override': links override all other interactions (link items are not selectable).
+     * @default 'override'
+     */
+    linkBehavior?: 'action' | 'selection' | 'override';
 }
-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 | null>): ListBoxAria;
+export interface OptionAria extends SelectableItemStates {
+    /** Props for the option element. */
+    optionProps: DOMAttributes;
+    /** Props for the main text element inside the option. */
+    labelProps: DOMAttributes;
+    /** Props for the description text element inside the option, if any. */
+    descriptionProps: DOMAttributes;
+    /** Whether the option is currently focused. */
+    isFocused: boolean;
+    /** Whether the option is keyboard focused. */
+    isFocusVisible: boolean;
+}
+export interface AriaOptionProps {
+    /**
+     * Whether the option is disabled.
+     * @deprecated
+     */
     isDisabled?: boolean;
+    /**
+     * Whether the option is selected.
+     * @deprecated
+     */
     isSelected?: boolean;
+    /** A screen reader only label for the option. */
     'aria-label'?: string;
-    key?: Key;
-    ref?: RefObject<HTMLElement>;
+    /** The unique key for the option. */
+    key: Key;
+    /**
+     * Whether selection should occur on press up instead of press down.
+     * @deprecated
+     */
     shouldSelectOnPressUp?: boolean;
+    /**
+     * Whether the option should be focused when the user hovers over it.
+     * @deprecated
+     */
     shouldFocusOnHover?: boolean;
+    /**
+     * Whether the option is contained in a virtual scrolling listbox.
+     * @deprecated
+     */
     isVirtualized?: boolean;
+    /**
+     * Whether the option should use virtual focus instead of being focused directly.
+     * @deprecated
+     */
+    shouldUseVirtualFocus?: 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<FocusableElement | null>): OptionAria;
+export 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 {
-    headingProps: HTMLAttributes<HTMLElement>;
-    groupProps: HTMLAttributes<HTMLElement>;
+export interface ListBoxSectionAria {
+    /** Props for the wrapper list item. */
+    itemProps: DOMAttributes;
+    /** Props for the heading element, if any. */
+    headingProps: DOMAttributes;
+    /** Props for the group element. */
+    groupProps: DOMAttributes;
 }
-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;
+export type { AriaListBoxProps } from '@react-types/listbox';
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@react-aria/listbox",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-nightly-641446f65-240905",
   "description": "Spectrum UI components in React",
@@ -8,6 +8,12 @@ "license": "Apache-2.0",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
@@ -17,14 +23,18 @@ "sideEffects": false,
     "type": "git",
-    "url": "https://github.com/adobe-private/react-spectrum-v3"
+    "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@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-nightly-641446f65-240905",
+    "@react-aria/label": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/selection": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-stately/collections": "^3.0.0-nightly-641446f65-240905",
+    "@react-stately/list": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/listbox": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/shared": "^3.0.0-nightly-641446f65-240905",
+    "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
@@ -34,3 +44,3 @@ "publishConfig": {
   },
-  "gitHead": "207e6ee9076905c96638a7f81a367758872e1410"
-}
+  "stableVersion": "3.13.3"
+}

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

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

110678

increased by427.77%

Number of package files

34

increased by466.67%

Lines of code

1279

increased by448.93%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

3

increased byInfinity%

Worsened metrics

Dependency count

11

increased by57.14%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@react-aria/label@^3.0.0-nightly-641446f65-240905

• + Added@react-stately/collections@^3.0.0-nightly-641446f65-240905

• + Added@react-types/shared@^3.0.0-nightly-641446f65-240905

• + Added@swc/helpers@^0.5.0

• + Added@react-aria/label@3.7.11(transitive)

• - Removed@babel/runtime@^7.6.2

• - Removed@babel/runtime@7.25.6(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updated@react-aria/interactions@^3.0.0-nightly-641446f65-240905

• Updated@react-aria/selection@^3.0.0-nightly-641446f65-240905

• Updated@react-aria/utils@^3.0.0-nightly-641446f65-240905

• Updated@react-stately/list@^3.0.0-nightly-641446f65-240905

• Updated@react-types/listbox@^3.0.0-nightly-641446f65-240905