@react-aria/button - npm Package Compare versions

Comparing version 3.0.0-nightly-a626c2596-240926 to 3.0.0-nightly-a98da553e-241116

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

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

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

dist/useButton.main.js

@@ -36,3 +36,3 @@ var $lIlxZ$reactariautils = require("@react-aria/utils");
         tabIndex: isDisabled ? undefined : 0,
-        href: elementType === 'a' && isDisabled ? undefined : href,
+        href: elementType === 'a' && !isDisabled ? href : undefined,
         target: elementType === 'a' ? target : undefined,
@@ -39,0 +39,0 @@ type: elementType === 'input' ? type : undefined,

dist/useButton.module.js

@@ -30,3 +30,3 @@ import {mergeProps as $bwqiF$mergeProps, filterDOMProps as $bwqiF$filterDOMProps} from "@react-aria/utils";
         tabIndex: isDisabled ? undefined : 0,
-        href: elementType === 'a' && isDisabled ? undefined : href,
+        href: elementType === 'a' && !isDisabled ? href : undefined,
         target: elementType === 'a' ? target : undefined,
@@ -33,0 +33,0 @@ type: elementType === 'input' ? type : undefined,

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

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

package.json

 {
   "name": "@react-aria/button",
-  "version": "3.0.0-nightly-a626c2596-240926",
+  "version": "3.0.0-nightly-a98da553e-241116",
   "description": "Spectrum UI components in React",
@@ -25,8 +25,9 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/focus": "^3.0.0-nightly-a626c2596-240926",
-    "@react-aria/interactions": "^3.0.0-nightly-a626c2596-240926",
-    "@react-aria/utils": "^3.0.0-nightly-a626c2596-240926",
-    "@react-stately/toggle": "^3.0.0-nightly-a626c2596-240926",
-    "@react-types/button": "^3.0.0-nightly-a626c2596-240926",
-    "@react-types/shared": "^3.0.0-nightly-a626c2596-240926",
+    "@react-aria/focus": "^3.0.0-nightly-a98da553e-241116",
+    "@react-aria/interactions": "^3.0.0-nightly-a98da553e-241116",
+    "@react-aria/toolbar": "3.0.0-nightly-a98da553e-241116",
+    "@react-aria/utils": "^3.0.0-nightly-a98da553e-241116",
+    "@react-stately/toggle": "^3.0.0-nightly-a98da553e-241116",
+    "@react-types/button": "^3.0.0-nightly-a98da553e-241116",
+    "@react-types/shared": "^3.0.0-nightly-a98da553e-241116",
     "@swc/helpers": "^0.5.0"
@@ -40,3 +41,3 @@ },
   },
-  "stableVersion": "3.9.8"
+  "stableVersion": "3.10.1"
 }

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';

src/useButton.ts

@@ -78,3 +78,3 @@ /*
       tabIndex: isDisabled ? undefined : 0,
-      href: elementType === 'a' && isDisabled ? undefined : href,
+      href: elementType === 'a' && !isDisabled ? href : undefined,
       target: elementType === 'a' ? target : undefined,
@@ -81,0 +81,0 @@ type: elementType === 'input' ? type : undefined,

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

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

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances 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

83810

increased by54.37%

Number of package files

28

increased by27.27%

Lines of code

844

increased by55.15%

Worsened metrics

Dependency count

9

increased by12.5%

Number of low license alerts

6

increased by50%

License quality

60

decreased by-25%

Dependency changes

• + Added@react-aria/toolbar@3.0.0-nightly-a98da553e-241116

• + Added@formatjs/ecma402-abstract@2.2.3(transitive)

• + Added@formatjs/fast-memoize@2.2.3(transitive)

• + Added@formatjs/icu-messageformat-parser@2.9.3(transitive)

• + Added@formatjs/icu-skeleton-parser@1.8.7(transitive)

• + Added@formatjs/intl-localematcher@0.5.7(transitive)

• + Added@internationalized/date@3.5.6(transitive)

• + Added@internationalized/message@3.1.5(transitive)

• + Added@internationalized/number@3.5.4(transitive)

• + Added@internationalized/string@3.2.4(transitive)

• + Added@react-aria/i18n@3.12.3(transitive)

• + Added@react-aria/toolbar@3.0.0-nightly-a98da553e-241116(transitive)

• + Addedintl-messageformat@10.7.6(transitive)

• Updated@react-aria/focus@^3.0.0-nightly-a98da553e-241116

• Updated@react-aria/interactions@^3.0.0-nightly-a98da553e-241116

• Updated@react-aria/utils@^3.0.0-nightly-a98da553e-241116

• Updated@react-stately/toggle@^3.0.0-nightly-a98da553e-241116

• Updated@react-types/button@^3.0.0-nightly-a98da553e-241116

• Updated@react-types/shared@^3.0.0-nightly-a98da553e-241116