Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@react-aria/button

Package Overview
Dependencies
Maintainers
2
Versions
848
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-aria/button - npm Package Compare versions

Comparing version 3.0.0-nightly-4baa1b08e-241029 to 3.0.0-nightly-4dd0993da-241224

dist/useToggleButtonGroup.main.js
dist/useToggleButtonGroup.main.js.map
dist/useToggleButtonGroup.mjs
dist/useToggleButtonGroup.module.js
dist/useToggleButtonGroup.module.js.map
src/useToggleButtonGroup.ts

4

dist/main.js
var $988353faa005faf8$exports = require("./useButton.main.js");
var $c49208f7d2aac50b$exports = require("./useToggleButton.main.js");
var $7d1e6c2af0d638cd$exports = require("./useToggleButtonGroup.main.js");

@@ -11,2 +12,4 @@

$parcel$export(module.exports, "useToggleButton", () => $c49208f7d2aac50b$exports.useToggleButton);
$parcel$export(module.exports, "useToggleButtonGroup", () => $7d1e6c2af0d638cd$exports.useToggleButtonGroup);
$parcel$export(module.exports, "useToggleButtonGroupItem", () => $7d1e6c2af0d638cd$exports.useToggleButtonGroupItem);
/*

@@ -26,2 +29,3 @@ * Copyright 2020 Adobe. All rights reserved.

//# sourceMappingURL=main.js.map

4

dist/module.js
import {useButton as $701a24aa0da5b062$export$ea18c227d4417cc3} from "./useButton.module.js";
import {useToggleButton as $55f54f7887471b58$export$51e84d46ca0bc451} from "./useToggleButton.module.js";
import {useToggleButtonGroup as $4547d1bf40011fdf$export$dd5580ae642f110f, useToggleButtonGroupItem as $4547d1bf40011fdf$export$bc53712daae3d6e6} from "./useToggleButtonGroup.module.js";

@@ -18,3 +19,4 @@ /*

export {$701a24aa0da5b062$export$ea18c227d4417cc3 as useButton, $55f54f7887471b58$export$51e84d46ca0bc451 as useToggleButton};
export {$701a24aa0da5b062$export$ea18c227d4417cc3 as useButton, $55f54f7887471b58$export$51e84d46ca0bc451 as useToggleButton, $4547d1bf40011fdf$export$dd5580ae642f110f as useToggleButtonGroup, $4547d1bf40011fdf$export$bc53712daae3d6e6 as useToggleButtonGroupItem};
//# sourceMappingURL=module.js.map

47

dist/types.d.ts
import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, HTMLAttributes, InputHTMLAttributes, RefObject } from "react";
import { AriaButtonProps, AriaToggleButtonProps } from "@react-types/button";
import { DOMAttributes } from "@react-types/shared";
import { ToggleState } from "@react-stately/toggle";
import { AriaButtonProps, AriaToggleButtonProps, AriaToggleButtonGroupItemProps } from "@react-types/button";
import { DOMAttributes, AriaLabelingProps, Orientation, RefObject as _RefObject1 } from "@react-types/shared";
import { ToggleState, ToggleGroupProps, ToggleGroupState } from "@react-stately/toggle";
export interface AriaButtonOptions<E extends ElementType> extends Omit<AriaButtonProps<E>, 'children'> {

@@ -21,10 +21,39 @@ }

}
export function useToggleButton(props: AriaToggleButtonOptions<'button'>, state: ToggleState, ref: RefObject<HTMLButtonElement | null>): ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'a'>, state: ToggleState, ref: RefObject<HTMLAnchorElement | null>): ButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'div'>, state: ToggleState, ref: RefObject<HTMLDivElement | null>): ButtonAria<HTMLAttributes<HTMLDivElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'input'>, state: ToggleState, ref: RefObject<HTMLInputElement | null>): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'span'>, state: ToggleState, ref: RefObject<HTMLSpanElement | null>): ButtonAria<HTMLAttributes<HTMLSpanElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<ElementType>, state: ToggleState, ref: RefObject<Element | null>): ButtonAria<DOMAttributes>;
interface ToggleButtonAria<T> extends ButtonAria<T> {
/** Whether the button is selected. */
isSelected: boolean;
/** Whether the button is disabled. */
isDisabled: boolean;
}
export function useToggleButton(props: AriaToggleButtonOptions<'button'>, state: ToggleState, ref: RefObject<HTMLButtonElement | null>): ToggleButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'a'>, state: ToggleState, ref: RefObject<HTMLAnchorElement | null>): ToggleButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'div'>, state: ToggleState, ref: RefObject<HTMLDivElement | null>): ToggleButtonAria<HTMLAttributes<HTMLDivElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'input'>, state: ToggleState, ref: RefObject<HTMLInputElement | null>): ToggleButtonAria<InputHTMLAttributes<HTMLInputElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'span'>, state: ToggleState, ref: RefObject<HTMLSpanElement | null>): ToggleButtonAria<HTMLAttributes<HTMLSpanElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<ElementType>, state: ToggleState, ref: RefObject<Element | null>): ToggleButtonAria<DOMAttributes>;
export interface AriaToggleButtonGroupProps extends ToggleGroupProps, AriaLabelingProps {
/**
* The orientation of the the toggle button group.
* @default 'horizontal'
*/
orientation?: Orientation;
}
export interface ToggleButtonGroupAria {
/**
* Props for the toggle button group container.
*/
groupProps: DOMAttributes;
}
export function useToggleButtonGroup(props: AriaToggleButtonGroupProps, state: ToggleGroupState, ref: _RefObject1<HTMLElement | null>): ToggleButtonGroupAria;
export { AriaToggleButtonGroupItemProps };
interface AriaToggleButtonGroupItemOptions<E extends ElementType> extends Omit<AriaToggleButtonGroupItemProps<E>, 'children'> {
}
export function useToggleButtonGroupItem(props: AriaToggleButtonGroupItemOptions<'button'>, state: ToggleGroupState, ref: _RefObject1<HTMLButtonElement | null>): ToggleButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
export function useToggleButtonGroupItem(props: AriaToggleButtonGroupItemOptions<'a'>, state: ToggleGroupState, ref: _RefObject1<HTMLAnchorElement | null>): ToggleButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
export function useToggleButtonGroupItem(props: AriaToggleButtonGroupItemOptions<'div'>, state: ToggleGroupState, ref: _RefObject1<HTMLDivElement | null>): ToggleButtonAria<HTMLAttributes<HTMLDivElement>>;
export function useToggleButtonGroupItem(props: AriaToggleButtonGroupItemOptions<'input'>, state: ToggleGroupState, ref: _RefObject1<HTMLInputElement | null>): ToggleButtonAria<InputHTMLAttributes<HTMLInputElement>>;
export function useToggleButtonGroupItem(props: AriaToggleButtonGroupItemOptions<'span'>, state: ToggleGroupState, ref: _RefObject1<HTMLSpanElement | null>): ToggleButtonAria<HTMLAttributes<HTMLSpanElement>>;
export function useToggleButtonGroupItem(props: AriaToggleButtonGroupItemOptions<ElementType>, state: ToggleGroupState, ref: _RefObject1<Element | null>): ToggleButtonAria<DOMAttributes>;
export type { AriaButtonProps, AriaToggleButtonProps } from '@react-types/button';
//# sourceMappingURL=types.d.ts.map

2

dist/useToggleButton.main.js

@@ -30,2 +30,4 @@ var $988353faa005faf8$exports = require("./useButton.main.js");

isPressed: isPressed,
isSelected: isSelected,
isDisabled: props.isDisabled || false,
buttonProps: (0, $4M9F2$reactariautils.mergeProps)(buttonProps, {

@@ -32,0 +34,0 @@ 'aria-pressed': isSelected

2

dist/useToggleButton.module.js

@@ -24,2 +24,4 @@ import {useButton as $701a24aa0da5b062$export$ea18c227d4417cc3} from "./useButton.module.js";

isPressed: isPressed,
isSelected: isSelected,
isDisabled: props.isDisabled || false,
buttonProps: (0, $h7Tql$mergeProps)(buttonProps, {

@@ -26,0 +28,0 @@ 'aria-pressed': isSelected

20

package.json
{
"name": "@react-aria/button",
"version": "3.0.0-nightly-4baa1b08e-241029",
"version": "3.0.0-nightly-4dd0993da-241224",
"description": "Spectrum UI components in React",

@@ -25,17 +25,17 @@ "license": "Apache-2.0",

"dependencies": {
"@react-aria/focus": "^3.0.0-nightly-4baa1b08e-241029",
"@react-aria/interactions": "^3.0.0-nightly-4baa1b08e-241029",
"@react-aria/utils": "^3.0.0-nightly-4baa1b08e-241029",
"@react-stately/toggle": "^3.0.0-nightly-4baa1b08e-241029",
"@react-types/button": "^3.0.0-nightly-4baa1b08e-241029",
"@react-types/shared": "^3.0.0-nightly-4baa1b08e-241029",
"@react-aria/focus": "3.0.0-nightly-4dd0993da-241224",
"@react-aria/interactions": "3.0.0-nightly-4dd0993da-241224",
"@react-aria/toolbar": "3.0.0-nightly-4dd0993da-241224",
"@react-aria/utils": "3.0.0-nightly-4dd0993da-241224",
"@react-stately/toggle": "3.0.0-nightly-4dd0993da-241224",
"@react-types/button": "3.0.0-nightly-4dd0993da-241224",
"@react-types/shared": "3.0.0-nightly-4dd0993da-241224",
"@swc/helpers": "^0.5.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
},
"publishConfig": {
"access": "public"
},
"stableVersion": "3.10.1"
}
}

2

src/index.ts

@@ -14,3 +14,5 @@ /*

export {useToggleButton} from './useToggleButton';
export {useToggleButtonGroup, useToggleButtonGroupItem} from './useToggleButtonGroup';
export type {AriaButtonOptions, ButtonAria} from './useButton';
export type {AriaButtonProps, AriaToggleButtonProps} from '@react-types/button';
export type {AriaToggleButtonGroupProps, ToggleButtonGroupAria, AriaToggleButtonGroupItemProps} from './useToggleButtonGroup';

23

src/useToggleButton.ts

@@ -29,9 +29,16 @@ /*

export interface ToggleButtonAria<T> extends ButtonAria<T> {
/** Whether the button is selected. */
isSelected: boolean,
/** Whether the button is disabled. */
isDisabled: boolean
}
// Order with overrides is important: 'button' should be default
export function useToggleButton(props: AriaToggleButtonOptions<'button'>, state: ToggleState, ref: RefObject<HTMLButtonElement | null>): ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'a'>, state: ToggleState, ref: RefObject<HTMLAnchorElement | null>): ButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'div'>, state: ToggleState, ref: RefObject<HTMLDivElement | null>): ButtonAria<HTMLAttributes<HTMLDivElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'input'>, state: ToggleState, ref: RefObject<HTMLInputElement | null>): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'span'>, state: ToggleState, ref: RefObject<HTMLSpanElement | null>): ButtonAria<HTMLAttributes<HTMLSpanElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<ElementType>, state: ToggleState, ref: RefObject<Element | null>): ButtonAria<DOMAttributes>;
export function useToggleButton(props: AriaToggleButtonOptions<'button'>, state: ToggleState, ref: RefObject<HTMLButtonElement | null>): ToggleButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'a'>, state: ToggleState, ref: RefObject<HTMLAnchorElement | null>): ToggleButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'div'>, state: ToggleState, ref: RefObject<HTMLDivElement | null>): ToggleButtonAria<HTMLAttributes<HTMLDivElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'input'>, state: ToggleState, ref: RefObject<HTMLInputElement | null>): ToggleButtonAria<InputHTMLAttributes<HTMLInputElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<'span'>, state: ToggleState, ref: RefObject<HTMLSpanElement | null>): ToggleButtonAria<HTMLAttributes<HTMLSpanElement>>;
export function useToggleButton(props: AriaToggleButtonOptions<ElementType>, state: ToggleState, ref: RefObject<Element | null>): ToggleButtonAria<DOMAttributes>;
/**

@@ -41,3 +48,3 @@ * Provides the behavior and accessibility implementation for a toggle button component.

*/
export function useToggleButton(props: AriaToggleButtonOptions<ElementType>, state: ToggleState, ref: RefObject<any>): ButtonAria<HTMLAttributes<any>> {
export function useToggleButton(props: AriaToggleButtonOptions<ElementType>, state: ToggleState, ref: RefObject<any>): ToggleButtonAria<HTMLAttributes<any>> {
const {isSelected} = state;

@@ -51,2 +58,4 @@ const {isPressed, buttonProps} = useButton({

isPressed,
isSelected,
isDisabled: props.isDisabled || false,
buttonProps: mergeProps(buttonProps, {

@@ -53,0 +62,0 @@ 'aria-pressed': isSelected

dist/import.mjs

Sorry, the diff of this file is not supported yet

dist/main.js.map

Sorry, the diff of this file is not supported yet

dist/module.js.map

Sorry, the diff of this file is not supported yet

dist/types.d.ts.map

Sorry, the diff of this file is not supported yet

dist/useToggleButton.main.js.map

Sorry, the diff of this file is not supported yet

dist/useToggleButton.mjs

Sorry, the diff of this file is not supported yet

dist/useToggleButton.module.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc