@react-aria/button - npm Package Compare versions

Comparing version 3.0.0-nightly.786 to 3.0.0-nightly.790

dist/main.js

@@ -28,2 +28,3 @@ var {
 function useButton(props, ref) {
+  /* eslint-enable no-redeclare */
   let {
@@ -104,2 +105,3 @@ elementType = 'button',
 function useToggleButton(props, state, ref) {
+  /* eslint-enable no-redeclare */
   const {
@@ -106,0 +108,0 @@ isSelected

dist/module.js

@@ -13,2 +13,3 @@ import { usePress } from "@react-aria/interactions";
 export function useButton(props, ref) {
+  /* eslint-enable no-redeclare */
   let {
@@ -87,2 +88,3 @@ elementType = 'button',
 export function useToggleButton(props, state, ref) {
+  /* eslint-enable no-redeclare */
   const {
@@ -89,0 +91,0 @@ isSelected

dist/types.d.ts

@@ -0,23 +1,23 @@
+import { ElementType, HTMLAttributes, RefObject } from "react";
 import { AriaButtonProps, AriaToggleButtonProps } from "@react-types/button";
-import { ButtonHTMLAttributes, RefObject } from "react";
 import { ToggleState } from "@react-stately/toggle";
-export interface ButtonAria {
+export interface ButtonAria<T> {
     /** Props for the button element. */
-    buttonProps: ButtonHTMLAttributes<HTMLButtonElement>;
+    buttonProps: T;
     /** Whether the button is currently pressed. */
     isPressed: boolean;
 }
-/**
- * Provides the behavior and accessibility implementation for a button component. Handles mouse, keyboard, and touch interactions,
- * focus behavior, and ARIA props for both native button elements and custom element types.
- * @param props - Props to be applied to the button.
- * @param ref - A ref to a DOM element for the button.
- */
-export function useButton(props: AriaButtonProps, ref: RefObject<HTMLElement>): ButtonAria;
-/**
- * Provides the behavior and accessibility implementation for a toggle button component.
- * ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes.
- */
-export function useToggleButton(props: AriaToggleButtonProps, state: ToggleState, ref: RefObject<HTMLElement>): ButtonAria;
+export function useButton(props: AriaButtonProps<'a'>, ref: RefObject<HTMLAnchorElement>): ButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export function useButton(props: AriaButtonProps<'button'>, ref: RefObject<HTMLButtonElement>): ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
+export function useButton(props: AriaButtonProps<'div'>, ref: RefObject<HTMLDivElement>): ButtonAria<HTMLAttributes<HTMLDivElement>>;
+export function useButton(props: AriaButtonProps<'input'>, ref: RefObject<HTMLInputElement>): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
+export function useButton(props: AriaButtonProps<'span'>, ref: RefObject<HTMLSpanElement>): ButtonAria<HTMLAttributes<HTMLSpanElement>>;
+export function useButton(props: AriaButtonProps<ElementType>, ref: RefObject<HTMLElement>): ButtonAria<HTMLAttributes<HTMLElement>>;
+export function useToggleButton(props: AriaToggleButtonProps<'a'>, state: ToggleState, ref: RefObject<HTMLAnchorElement>): ButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export function useToggleButton(props: AriaToggleButtonProps<'button'>, state: ToggleState, ref: RefObject<HTMLButtonElement>): ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
+export function useToggleButton(props: AriaToggleButtonProps<'div'>, state: ToggleState, ref: RefObject<HTMLDivElement>): ButtonAria<HTMLAttributes<HTMLDivElement>>;
+export function useToggleButton(props: AriaToggleButtonProps<'input'>, state: ToggleState, ref: RefObject<HTMLInputElement>): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
+export function useToggleButton(props: AriaToggleButtonProps<'span'>, state: ToggleState, ref: RefObject<HTMLSpanElement>): ButtonAria<HTMLAttributes<HTMLSpanElement>>;
+export function useToggleButton(props: AriaToggleButtonProps<ElementType>, state: ToggleState, ref: RefObject<HTMLElement>): ButtonAria<HTMLAttributes<HTMLElement>>;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@react-aria/button",
-  "version": "3.0.0-nightly.786+d80334eb",
+  "version": "3.0.0-nightly.790+b44f2f11",
   "description": "Spectrum UI components in React",
@@ -21,8 +21,8 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "3.0.0-nightly.786+d80334eb",
-    "@react-aria/i18n": "3.0.0-nightly.786+d80334eb",
-    "@react-aria/interactions": "3.0.0-nightly.786+d80334eb",
-    "@react-aria/utils": "3.0.0-nightly.786+d80334eb",
-    "@react-stately/toggle": "3.0.0-nightly.786+d80334eb",
-    "@react-types/button": "3.2.2-nightly.2464+d80334eb"
+    "@react-aria/focus": "3.0.0-nightly.790+b44f2f11",
+    "@react-aria/i18n": "3.0.0-nightly.790+b44f2f11",
+    "@react-aria/interactions": "3.0.0-nightly.790+b44f2f11",
+    "@react-aria/utils": "3.0.0-nightly.790+b44f2f11",
+    "@react-stately/toggle": "3.0.0-nightly.790+b44f2f11",
+    "@react-types/button": "3.2.2-nightly.2468+b44f2f11"
   },
@@ -35,3 +35,3 @@ "peerDependencies": {
   },
-  "gitHead": "d80334eba4d7a44d282ccbd3736a80708112d0a2"
+  "gitHead": "b44f2f11b8e091afa2f0166bb75cedc0e5f56e1e"
 }

src/useButton.ts

@@ -13,4 +13,11 @@ /*
 
+import {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  ElementType,
+  HTMLAttributes,
+  InputHTMLAttributes,
+  RefObject
+} from 'react';
 import {AriaButtonProps} from '@react-types/button';
-import {ButtonHTMLAttributes, RefObject} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
@@ -22,5 +29,5 @@ import {mergeProps} from '@react-aria/utils';
 
-export interface ButtonAria {
+export interface ButtonAria<T> {
   /** Props for the button element. */
-  buttonProps: ButtonHTMLAttributes<HTMLButtonElement>,
+  buttonProps: T,
   /** Whether the button is currently pressed. */
@@ -30,2 +37,9 @@ isPressed: boolean
 
+/* eslint-disable no-redeclare */
+export function useButton(props: AriaButtonProps<'a'>, ref: RefObject<HTMLAnchorElement>): ButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export function useButton(props: AriaButtonProps<'button'>, ref: RefObject<HTMLButtonElement>): ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
+export function useButton(props: AriaButtonProps<'div'>, ref: RefObject<HTMLDivElement>): ButtonAria<HTMLAttributes<HTMLDivElement>>;
+export function useButton(props: AriaButtonProps<'input'>, ref: RefObject<HTMLInputElement>): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
+export function useButton(props: AriaButtonProps<'span'>, ref: RefObject<HTMLSpanElement>): ButtonAria<HTMLAttributes<HTMLSpanElement>>;
+export function useButton(props: AriaButtonProps<ElementType>, ref: RefObject<HTMLElement>): ButtonAria<HTMLAttributes<HTMLElement>>;
 /**
@@ -37,3 +51,4 @@ * Provides the behavior and accessibility implementation for a button component. Handles mouse, keyboard, and touch interactions,
  */
-export function useButton(props: AriaButtonProps, ref: RefObject<HTMLElement>): ButtonAria {
+export function useButton(props: AriaButtonProps<ElementType>, ref: RefObject<any>): ButtonAria<HTMLAttributes<any>> {
+/* eslint-enable no-redeclare */
   let {
@@ -40,0 +55,0 @@ elementType = 'button',

src/useToggleButton.ts

@@ -13,2 +13,10 @@ /*
 
+import {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  ElementType,
+  HTMLAttributes,
+  InputHTMLAttributes,
+  RefObject
+} from 'react';
 import {AriaToggleButtonProps} from '@react-types/button';
@@ -18,5 +26,11 @@ import {ButtonAria, useButton} from './useButton';
 import {mergeProps} from '@react-aria/utils';
-import {RefObject} from 'react';
 import {ToggleState} from '@react-stately/toggle';
 
+/* eslint-disable no-redeclare */
+export function useToggleButton(props: AriaToggleButtonProps<'a'>, state: ToggleState, ref: RefObject<HTMLAnchorElement>): ButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export function useToggleButton(props: AriaToggleButtonProps<'button'>, state: ToggleState, ref: RefObject<HTMLButtonElement>): ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
+export function useToggleButton(props: AriaToggleButtonProps<'div'>, state: ToggleState, ref: RefObject<HTMLDivElement>): ButtonAria<HTMLAttributes<HTMLDivElement>>;
+export function useToggleButton(props: AriaToggleButtonProps<'input'>, state: ToggleState, ref: RefObject<HTMLInputElement>): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
+export function useToggleButton(props: AriaToggleButtonProps<'span'>, state: ToggleState, ref: RefObject<HTMLSpanElement>): ButtonAria<HTMLAttributes<HTMLSpanElement>>;
+export function useToggleButton(props: AriaToggleButtonProps<ElementType>, state: ToggleState, ref: RefObject<HTMLElement>): ButtonAria<HTMLAttributes<HTMLElement>>;
 /**
@@ -26,3 +40,4 @@ * Provides the behavior and accessibility implementation for a toggle button component.
  */
-export function useToggleButton(props: AriaToggleButtonProps, state: ToggleState, ref: RefObject<HTMLElement>): ButtonAria {
+export function useToggleButton(props: AriaToggleButtonProps<ElementType>, state: ToggleState, ref: RefObject<any>): ButtonAria<HTMLAttributes<any>> {
+/* eslint-enable no-redeclare */
   const {isSelected} = state;
@@ -29,0 +44,0 @@ const {isPressed, buttonProps} = useButton({

New alerts

Manifest confusion

Supply chain risk

This 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

Manifest confusion

Supply chain risk

This 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

51547

21.68%

Lines of code

399

9.32%

Dependency changes

• Updated

  @react-aria/focus@3.0.0-nightly.790+b44f2f11

• Updated

  @react-aria/i18n@3.0.0-nightly.790+b44f2f11

• Updated

  @react-aria/interactions@3.0.0-nightly.790+b44f2f11

• Updated

  @react-aria/utils@3.0.0-nightly.790+b44f2f11

• Updated

  @react-stately/toggle@3.0.0-nightly.790+b44f2f11

• Updated

  @react-types/button@3.2.2-nightly.2468+b44f2f11