archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

feat(root): react aria packages upgraded to the latest version

Browse Source
This commit is contained in:
Junior Garcia 2023-04-06 22:14:20 -03:00
parent 279cba96c8
commit f51d19b09b
38 changed files with 875 additions and 959 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -59,7 +59,7 @@
"@docusaurus/utils": "2.0.0-beta.3", "@docusaurus/utils": "2.0.0-beta.3",
"@react-bootstrap/babel-preset": "^2.1.0", "@react-bootstrap/babel-preset": "^2.1.0",
"@react-types/link": "^3.3.3", "@react-types/link": "^3.3.3",
"@react-types/shared": "^3.15.0", "@react-types/shared": "^3.18.0",
"@storybook/react": "^6.5.16", "@storybook/react": "^6.5.16",
"@swc-node/jest": "^1.5.2", "@swc-node/jest": "^1.5.2",
"@swc/core": "^1.3.35", "@swc/core": "^1.3.35",

14
packages/components/accordion/package.json
View File

@ -51,17 +51,17 @@
"@nextui-org/use-aria-accordion-item": "workspace:*", "@nextui-org/use-aria-accordion-item": "workspace:*",
"@nextui-org/system": "workspace:*", "@nextui-org/system": "workspace:*",
"@nextui-org/theme": "workspace:*", "@nextui-org/theme": "workspace:*",
"@react-aria/accordion": "3.0.0-alpha.15", "@react-aria/accordion": "3.0.0-alpha.17",
"@react-aria/focus": "^3.11.0", "@react-aria/focus": "^3.12.0",
"@react-aria/utils": "^3.15.0", "@react-aria/utils": "^3.16.0",
"@react-stately/tree": "^3.5.0", "@react-stately/tree": "^3.6.0",
"framer-motion": "^10.6.0" "framer-motion": "^10.11.2"
}, },
"devDependencies": { "devDependencies": {
"@nextui-org/avatar": "workspace:*", "@nextui-org/avatar": "workspace:*",
"@nextui-org/test-utils": "workspace:*", "@nextui-org/test-utils": "workspace:*",
"@react-types/accordion": "3.0.0-alpha.12", "@react-types/accordion": "3.0.0-alpha.13",
"@react-types/shared": "^3.17.0", "@react-types/shared": "^3.18.0",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"
}, },

4
packages/components/avatar/package.json
View File

@ -42,8 +42,8 @@
"@nextui-org/shared-utils": "workspace:*", "@nextui-org/shared-utils": "workspace:*",
"@nextui-org/dom-utils": "workspace:*", "@nextui-org/dom-utils": "workspace:*",
"@nextui-org/use-image": "workspace:*", "@nextui-org/use-image": "workspace:*",
"@react-aria/focus": "^3.11.0", "@react-aria/focus": "^3.12.0",
"@react-aria/utils": "^3.15.0" "@react-aria/utils": "^3.16.0"
}, },
"devDependencies": { "devDependencies": {
"@nextui-org/shared-icons": "workspace:*", "@nextui-org/shared-icons": "workspace:*",

12
packages/components/button/package.json
View File

@ -43,16 +43,16 @@
"@nextui-org/theme": "workspace:*", "@nextui-org/theme": "workspace:*",
"@nextui-org/drip": "workspace:*", "@nextui-org/drip": "workspace:*",
"@nextui-org/spinner": "workspace:*", "@nextui-org/spinner": "workspace:*",
"@react-aria/button": "^3.7.0", "@react-aria/button": "^3.7.1",
"@react-aria/interactions": "^3.14.0", "@react-aria/interactions": "^3.15.0",
"@react-aria/utils": "^3.15.0", "@react-aria/utils": "^3.16.0",
"@react-aria/focus": "^3.11.0" "@react-aria/focus": "^3.12.0"
}, },
"devDependencies": { "devDependencies": {
"@nextui-org/spinner": "workspace:*", "@nextui-org/spinner": "workspace:*",
"@nextui-org/shared-icons": "workspace:*", "@nextui-org/shared-icons": "workspace:*",
"@react-types/shared": "^3.15.0", "@react-types/shared": "^3.18.0",
"@react-types/button": "^3.6.2", "@react-types/button": "^3.7.2",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"
}, },

6
packages/components/button/src/use-button.ts
View File

@ -3,10 +3,10 @@ import type {AriaButtonProps} from "@react-types/button";
import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system"; import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
import type {ReactNode} from "react"; import type {ReactNode} from "react";
import {callAllHandlers, dataAttr, ReactRef} from "@nextui-org/shared-utils"; import {dataAttr, ReactRef} from "@nextui-org/shared-utils";
import {MouseEventHandler, useCallback} from "react"; import {MouseEventHandler, useCallback} from "react";
import {useFocusRing} from "@react-aria/focus"; import {useFocusRing} from "@react-aria/focus";
import {mergeProps} from "@react-aria/utils"; import {chain, mergeProps} from "@react-aria/utils";
import {useDrip} from "@nextui-org/drip"; import {useDrip} from "@nextui-org/drip";
import {useDOMRef} from "@nextui-org/dom-utils"; import {useDOMRef} from "@nextui-org/dom-utils";
import {button} from "@nextui-org/theme"; import {button} from "@nextui-org/theme";
@ -119,7 +119,7 @@ export function useButton(props: UseButtonProps) {
elementType: as, elementType: as,
isDisabled, isDisabled,
onPress, onPress,
onClick: callAllHandlers(onClick, handleDrip), onClick: chain(onClick, handleDrip),
...otherProps, ...otherProps,
} as AriaButtonProps, } as AriaButtonProps,
domRef, domRef,

10
packages/components/card/package.json
View File

@ -42,13 +42,13 @@
"@nextui-org/shared-utils": "workspace:*", "@nextui-org/shared-utils": "workspace:*",
"@nextui-org/dom-utils": "workspace:*", "@nextui-org/dom-utils": "workspace:*",
"@nextui-org/drip": "workspace:*", "@nextui-org/drip": "workspace:*",
"@react-aria/focus": "^3.11.0", "@react-aria/focus": "^3.12.0",
"@react-aria/utils": "^3.15.0", "@react-aria/utils": "^3.16.0",
"@react-aria/interactions": "^3.14.0", "@react-aria/interactions": "^3.15.0",
"@react-aria/button": "^3.7.0" "@react-aria/button": "^3.7.1"
}, },
"devDependencies": { "devDependencies": {
"@react-types/shared": "^3.17.0", "@react-types/shared": "^3.18.0",
"@nextui-org/code": "workspace:*", "@nextui-org/code": "workspace:*",
"@nextui-org/link": "workspace:*", "@nextui-org/link": "workspace:*",
"@nextui-org/button": "workspace:*", "@nextui-org/button": "workspace:*",

18
packages/components/checkbox/package.json
View File

@ -41,21 +41,21 @@
"@nextui-org/shared-utils": "workspace:*", "@nextui-org/shared-utils": "workspace:*",
"@nextui-org/theme": "workspace:*", "@nextui-org/theme": "workspace:*",
"@nextui-org/dom-utils": "workspace:*", "@nextui-org/dom-utils": "workspace:*",
"@react-aria/checkbox": "^3.8.0", "@react-aria/checkbox": "^3.9.0",
"@react-aria/focus": "^3.11.0", "@react-aria/focus": "^3.12.0",
"@react-aria/interactions": "^3.14.0", "@react-aria/interactions": "^3.15.0",
"@react-aria/visually-hidden": "^3.7.0", "@react-aria/visually-hidden": "^3.8.0",
"@react-stately/checkbox": "^3.4.0", "@react-stately/checkbox": "^3.4.1",
"@react-stately/toggle": "^3.5.0", "@react-stately/toggle": "^3.5.1",
"@react-aria/utils": "^3.15.0" "@react-aria/utils": "^3.16.0"
}, },
"devDependencies": { "devDependencies": {
"@nextui-org/shared-icons": "workspace:*", "@nextui-org/shared-icons": "workspace:*",
"@nextui-org/chip": "workspace:*", "@nextui-org/chip": "workspace:*",
"@nextui-org/user": "workspace:*", "@nextui-org/user": "workspace:*",
"@nextui-org/link": "workspace:*", "@nextui-org/link": "workspace:*",
"@react-types/checkbox": "^3.4.2", "@react-types/checkbox": "^3.4.3",
"@react-types/shared": "^3.17.0", "@react-types/shared": "^3.18.0",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"
}, },

8
packages/components/chip/package.json
View File

@ -42,13 +42,13 @@
"@nextui-org/shared-utils": "workspace:*", "@nextui-org/shared-utils": "workspace:*",
"@nextui-org/system": "workspace:*", "@nextui-org/system": "workspace:*",
"@nextui-org/theme": "workspace:*", "@nextui-org/theme": "workspace:*",
"@react-aria/focus": "^3.11.0", "@react-aria/focus": "^3.12.0",
"@react-aria/interactions": "^3.14.0", "@react-aria/interactions": "^3.15.0",
"@react-aria/utils": "^3.15.0" "@react-aria/utils": "^3.16.0"
}, },
"devDependencies": { "devDependencies": {
"@nextui-org/avatar": "workspace:*", "@nextui-org/avatar": "workspace:*",
"@react-types/checkbox": "^3.4.2", "@react-types/checkbox": "^3.4.3",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"
}, },

9
packages/components/drip/src/use-drip.ts
View File

@ -1,13 +1,13 @@
import {MouseEvent, CSSProperties, useRef, useState} from "react"; import {MouseEvent, CSSProperties, useState} from "react";
import {getUniqueID} from "@nextui-org/shared-utils";
export type DripInstance = { export type DripInstance = {
key: number; key: number | string;
style: CSSProperties; style: CSSProperties;
}; };
export function useDrip() { export function useDrip() {
const [drips, setDrips] = useState<DripInstance[]>([]); const [drips, setDrips] = useState<DripInstance[]>([]);
const nextKey = useRef(0);
const onClick = (event: MouseEvent<HTMLElement>) => { const onClick = (event: MouseEvent<HTMLElement>) => {
const trigger = event.currentTarget; const trigger = event.currentTarget;
@ -27,11 +27,10 @@ export function useDrip() {
setDrips((prev) => [ setDrips((prev) => [
...prev, ...prev,
{ {
key: nextKey.current, key: getUniqueID("drip"),
style: dripStyle, style: dripStyle,
}, },
]); ]);
nextKey.current++;
setTimeout(() => { setTimeout(() => {
setDrips((prev) => prev.slice(1)); setDrips((prev) => prev.slice(1));

10
packages/components/input/package.json
View File

@ -43,15 +43,15 @@
"@nextui-org/system": "workspace:*", "@nextui-org/system": "workspace:*",
"@nextui-org/theme": "workspace:*", "@nextui-org/theme": "workspace:*",
"@nextui-org/use-aria-field": "workspace:*", "@nextui-org/use-aria-field": "workspace:*",
"@react-aria/focus": "^3.11.0", "@react-aria/focus": "^3.12.0",
"@react-aria/interactions": "^3.14.0", "@react-aria/interactions": "^3.15.0",
"@react-aria/utils": "^3.15.0", "@react-aria/utils": "^3.16.0",
"@react-stately/utils": "^3.6.0", "@react-stately/utils": "^3.6.0",
"react-textarea-autosize": "^8.4.1" "react-textarea-autosize": "^8.4.1"
}, },
"devDependencies": { "devDependencies": {
"@react-types/shared": "^3.15.0", "@react-types/shared": "^3.18.0",
"@react-types/textfield": "^3.7.0", "@react-types/textfield": "^3.7.1",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"
}, },

8
packages/components/link/package.json
View File

@ -41,12 +41,12 @@
"@nextui-org/shared-utils": "workspace:*", "@nextui-org/shared-utils": "workspace:*",
"@nextui-org/system": "workspace:*", "@nextui-org/system": "workspace:*",
"@nextui-org/theme": "workspace:*", "@nextui-org/theme": "workspace:*",
"@react-aria/link": "^3.4.0", "@react-aria/link": "^3.5.0",
"@react-aria/utils": "^3.15.0", "@react-aria/utils": "^3.16.0",
"@react-aria/focus": "^3.11.0" "@react-aria/focus": "^3.12.0"
}, },
"devDependencies": { "devDependencies": {
"@react-types/link": "^3.4.0", "@react-types/link": "^3.4.1",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"
}, },

6
packages/components/pagination/package.json
View File

@ -43,9 +43,9 @@
"@nextui-org/dom-utils": "workspace:*", "@nextui-org/dom-utils": "workspace:*",
"@nextui-org/shared-icons": "workspace:*", "@nextui-org/shared-icons": "workspace:*",
"@nextui-org/use-pagination": "workspace:*", "@nextui-org/use-pagination": "workspace:*",
"@react-aria/focus": "^3.11.0", "@react-aria/focus": "^3.12.0",
"@react-aria/interactions": "^3.14.0", "@react-aria/interactions": "^3.15.0",
"@react-aria/utils": "^3.15.0" "@react-aria/utils": "^3.16.0"
}, },
"devDependencies": { "devDependencies": {
"clean-package": "2.2.0", "clean-package": "2.2.0",

18
packages/components/popover/package.json
View File

@ -40,20 +40,22 @@
"@nextui-org/aria-utils": "workspace:*", "@nextui-org/aria-utils": "workspace:*",
"@nextui-org/dom-utils": "workspace:*", "@nextui-org/dom-utils": "workspace:*",
"@nextui-org/framer-transitions": "workspace:*", "@nextui-org/framer-transitions": "workspace:*",
"@nextui-org/button": "workspace:*",
"@nextui-org/shared-utils": "workspace:*", "@nextui-org/shared-utils": "workspace:*",
"@nextui-org/system": "workspace:*", "@nextui-org/system": "workspace:*",
"@nextui-org/theme": "workspace:*", "@nextui-org/theme": "workspace:*",
"@react-aria/button": "^3.7.1",
"@react-aria/dialog": "^3.5.1", "@react-aria/dialog": "^3.5.1",
"@react-aria/interactions": "^3.14.0", "@react-aria/interactions": "^3.15.0",
"@react-aria/overlays": "^3.13.0", "@react-aria/overlays": "^3.14.0",
"@react-aria/utils": "^3.15.0", "@react-aria/utils": "^3.16.0",
"@react-stately/overlays": "^3.5.0", "@react-stately/overlays": "^3.5.1",
"@react-aria/focus": "^3.11.0", "@react-aria/focus": "^3.12.0",
"framer-motion": "^10.6.0" "framer-motion": "^10.11.2"
}, },
"devDependencies": { "devDependencies": {
"@nextui-org/button": "workspace:*", "@react-types/overlays": "^3.7.1",
"@react-types/overlays": "^3.7.0", "@react-types/button": "^3.7.2",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"
}, },

41
packages/components/popover/src/popover-content.tsx
View File

@ -3,7 +3,7 @@ import {forwardRef} from "@nextui-org/system";
import {DismissButton} from "@react-aria/overlays"; import {DismissButton} from "@react-aria/overlays";
import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions"; import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
import {FocusScope} from "@react-aria/focus"; import {FocusScope} from "@react-aria/focus";
import {AnimatePresence, motion} from "framer-motion"; import {motion} from "framer-motion";
import {getTransformOrigins} from "@nextui-org/aria-utils"; import {getTransformOrigins} from "@nextui-org/aria-utils";
import {usePopoverContext} from "./popover-context"; import {usePopoverContext} from "./popover-context";
@ -13,7 +13,7 @@ export interface PopoverContentProps {
} }
const PopoverContent = forwardRef<PopoverContentProps, "section">((props, _) => { const PopoverContent = forwardRef<PopoverContentProps, "section">((props, _) => {
const {as, children} = props; const {as, children, ...otherProps} = props;
const { const {
Component: OverlayComponent, Component: OverlayComponent,
@ -29,7 +29,7 @@ const PopoverContent = forwardRef<PopoverContentProps, "section">((props, _) =>
const Component = as || OverlayComponent || "div"; const Component = as || OverlayComponent || "div";
const {className, ...otherPopoverProps} = getPopoverProps(); const {style, className, ...otherPopoverProps} = getPopoverProps(otherProps);
const arrowContent = useMemo(() => { const arrowContent = useMemo(() => {
if (!showArrow) return null; if (!showArrow) return null;
@ -50,14 +50,29 @@ const PopoverContent = forwardRef<PopoverContentProps, "section">((props, _) =>
</FocusScope> </FocusScope>
); );
}, },
[Component, disableAnimation, className, arrowContent, onClose], [Component, className, onClose, arrowContent],
); );
const animatedContent = useMemo(() => { const visibility = useMemo(() => {
if (disableAnimation) return isOpen ? "visible" : "hidden";
return "visible";
}, [disableAnimation, isOpen]);
return ( return (
<div {...otherPopoverProps}> <div
{...otherPopoverProps}
style={{
...style,
visibility,
outline: "none",
}}
>
{disableAnimation ? (
<ContentWrapper>{children}</ContentWrapper>
) : (
<motion.div <motion.div
animate="enter" animate={isOpen ? "enter" : "exit"}
exit="exit" exit="exit"
initial="exit" initial="exit"
style={{ style={{
@ -68,18 +83,8 @@ const PopoverContent = forwardRef<PopoverContentProps, "section">((props, _) =>
> >
<ContentWrapper>{children}</ContentWrapper> <ContentWrapper>{children}</ContentWrapper>
</motion.div> </motion.div>
</div>
);
}, [otherPopoverProps, placement, motionProps, ContentWrapper, children]);
return (
<>
{disableAnimation && isOpen ? (
<ContentWrapper>{children}</ContentWrapper>
) : (
<AnimatePresence initial={false}>{isOpen ? animatedContent : null}</AnimatePresence>
)} )}
</> </div>
); );
}); });

38
packages/components/popover/src/popover-trigger.tsx
View File

@ -1,6 +1,8 @@
import {forwardRef} from "@nextui-org/system"; import {forwardRef} from "@nextui-org/system";
import React, {Children, cloneElement} from "react"; import React, {Children, cloneElement, useMemo} from "react";
import {warn} from "@nextui-org/shared-utils"; import {pickChildren} from "@nextui-org/shared-utils";
import {useButton} from "@react-aria/button";
import {Button} from "@nextui-org/button";
import {mergeProps} from "@react-aria/utils"; import {mergeProps} from "@react-aria/utils";
import {usePopoverContext} from "./popover-context"; import {usePopoverContext} from "./popover-context";
@ -14,27 +16,33 @@ export interface PopoverTriggerProps {
* such as `button` or `a`. * such as `button` or `a`.
*/ */
const PopoverTrigger = forwardRef<PopoverTriggerProps, "button">((props, _) => { const PopoverTrigger = forwardRef<PopoverTriggerProps, "button">((props, _) => {
const {getTriggerProps} = usePopoverContext(); const {triggerRef, getTriggerProps} = usePopoverContext();
const {children, ...otherProps} = props; const {children, ...otherProps} = props;
let trigger: React.ReactElement; // force a single child
const child = useMemo<any>(() => {
if (typeof children === "string") return <p>{children}</p>;
try { return Children.only(children) as React.ReactElement & {
/**
* Ensure tooltip has only one child node
*/
const child = Children.only(children) as React.ReactElement & {
ref?: React.Ref<any>; ref?: React.Ref<any>;
}; };
}, [children]);
trigger = cloneElement(child, getTriggerProps(mergeProps(child.props, otherProps), child.ref)); const {onPress, ...rest} = useMemo(() => {
} catch (error) { return getTriggerProps(mergeProps(child.props, otherProps), child.ref);
trigger = <span />; }, [getTriggerProps, child.props, otherProps, child.ref]);
warn("PopoverTrigger must have only one child node. Please, check your code.");
}
return trigger; // validates if contains a NextUI Button as a child
const [, triggerChildren] = pickChildren(children, Button);
const {buttonProps} = useButton({onPress}, triggerRef);
const hasNextUIButton = useMemo<boolean>(() => {
return triggerChildren?.[0] !== undefined;
}, [triggerChildren]);
return cloneElement(child, mergeProps(rest, hasNextUIButton ? {onPress} : buttonProps));
}); });
PopoverTrigger.displayName = "NextUI.PopoverTrigger"; PopoverTrigger.displayName = "NextUI.PopoverTrigger";

4
packages/components/popover/src/popover.tsx
View File

@ -19,10 +19,12 @@ const Popover = forwardRef<PopoverProps, "div">((props, ref) => {
const [trigger, content] = Children.toArray(children); const [trigger, content] = Children.toArray(children);
const mountOverlay = context.isOpen;
return ( return (
<PopoverProvider value={context}> <PopoverProvider value={context}>
{trigger} {trigger}
<OverlayContainer>{content}</OverlayContainer> {mountOverlay && <OverlayContainer>{content}</OverlayContainer>}
</PopoverProvider> </PopoverProvider>
); );
}); });

46
packages/components/popover/src/use-popover.ts
View File

@ -4,6 +4,7 @@ import type {OverlayPlacement, OverlayOptions} from "@nextui-org/aria-utils";
import type {RefObject, Ref} from "react"; import type {RefObject, Ref} from "react";
import {useOverlayTriggerState} from "@react-stately/overlays"; import {useOverlayTriggerState} from "@react-stately/overlays";
import {useFocusRing} from "@react-aria/focus";
import { import {
AriaOverlayProps, AriaOverlayProps,
useOverlayTrigger, useOverlayTrigger,
@ -15,7 +16,6 @@ import {useDialog} from "@react-aria/dialog";
import {OverlayTriggerProps} from "@react-types/overlays"; import {OverlayTriggerProps} from "@react-types/overlays";
import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system"; import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
import {toReactAriaPlacement, getArrowPlacement} from "@nextui-org/aria-utils"; import {toReactAriaPlacement, getArrowPlacement} from "@nextui-org/aria-utils";
import {useFocusRing} from "@react-aria/focus";
import {popover} from "@nextui-org/theme"; import {popover} from "@nextui-org/theme";
import {chain, mergeProps, mergeRefs} from "@react-aria/utils"; import {chain, mergeProps, mergeRefs} from "@react-aria/utils";
import {createDOMRef} from "@nextui-org/dom-utils"; import {createDOMRef} from "@nextui-org/dom-utils";
@ -27,6 +27,11 @@ export interface Props extends HTMLNextUIProps<"div", PopoverVariantProps> {
* Ref to the DOM node. * Ref to the DOM node.
*/ */
ref?: ReactRef<HTMLElement | null>; ref?: ReactRef<HTMLElement | null>;
/**
* A ref for the scrollable region within the overlay.
* @default overlayRef
*/
scrollRef?: RefObject<HTMLElement>;
/** /**
* The ref for the element which the overlay positions itself with respect to. * The ref for the element which the overlay positions itself with respect to.
*/ */
@ -40,8 +45,6 @@ export interface Props extends HTMLNextUIProps<"div", PopoverVariantProps> {
* Type of overlay that is opened by the trigger. * Type of overlay that is opened by the trigger.
*/ */
triggerType?: "dialog" | "menu" | "listbox" | "tree" | "grid"; triggerType?: "dialog" | "menu" | "listbox" | "tree" | "grid";
/** Whether the element will be auto focused. */
autoFocus?: boolean;
/** /**
* The properties passed to the underlying `Collapse` component. * The properties passed to the underlying `Collapse` component.
*/ */
@ -73,6 +76,7 @@ export function usePopover(originalProps: UsePopoverProps) {
as, as,
children, children,
triggerRef: triggerRefProp, triggerRef: triggerRefProp,
scrollRef,
isOpen, isOpen,
defaultOpen, defaultOpen,
onOpenChange, onOpenChange,
@ -85,9 +89,8 @@ export function usePopover(originalProps: UsePopoverProps) {
crossOffset = 0, crossOffset = 0,
isDismissable = true, isDismissable = true,
shouldCloseOnBlur = true, shouldCloseOnBlur = true,
isKeyboardDismissDisabled = false, isKeyboardDismissDisabled = true,
shouldCloseOnInteractOutside, shouldCloseOnInteractOutside,
autoFocus = false,
motionProps, motionProps,
className, className,
styles, styles,
@ -109,8 +112,6 @@ export function usePopover(originalProps: UsePopoverProps) {
createDOMRef(overlayRef), createDOMRef(overlayRef),
); );
const {isFocusVisible, focusProps} = useFocusRing({autoFocus});
const state = useOverlayTriggerState({ const state = useOverlayTriggerState({
isOpen, isOpen,
defaultOpen, defaultOpen,
@ -124,10 +125,11 @@ export function usePopover(originalProps: UsePopoverProps) {
); );
const {overlayProps: positionProps, arrowProps, placement} = useOverlayPosition({ const {overlayProps: positionProps, arrowProps, placement} = useOverlayPosition({
overlayRef,
scrollRef,
isOpen: isOpen, isOpen: isOpen,
targetRef: triggerRef, targetRef: triggerRef,
placement: toReactAriaPlacement(placementProp), placement: toReactAriaPlacement(placementProp),
overlayRef,
offset: showArrow ? offset + 3 : offset, offset: showArrow ? offset + 3 : offset,
crossOffset, crossOffset,
shouldFlip, shouldFlip,
@ -136,9 +138,9 @@ export function usePopover(originalProps: UsePopoverProps) {
const {overlayProps} = useOverlay( const {overlayProps} = useOverlay(
{ {
onClose,
isOpen: state.isOpen, isOpen: state.isOpen,
isDismissable: isDismissable && state.isOpen, onClose: chain(state.close, onClose),
isDismissable,
shouldCloseOnBlur, shouldCloseOnBlur,
isKeyboardDismissDisabled, isKeyboardDismissDisabled,
shouldCloseOnInteractOutside, shouldCloseOnInteractOutside,
@ -146,6 +148,8 @@ export function usePopover(originalProps: UsePopoverProps) {
overlayRef, overlayRef,
); );
const {isFocusVisible, focusProps} = useFocusRing();
const {modalProps} = useModal({isDisabled: true}); const {modalProps} = useModal({isDisabled: true});
const {dialogProps} = useDialog( const {dialogProps} = useDialog(
@ -155,11 +159,6 @@ export function usePopover(originalProps: UsePopoverProps) {
overlayRef, overlayRef,
); );
const handleClose = useCallback(() => {
onClose?.();
state.close();
}, [state, onClose]);
const slots = useMemo( const slots = useMemo(
() => () =>
popover({ popover({
@ -173,7 +172,6 @@ export function usePopover(originalProps: UsePopoverProps) {
const getPopoverProps: PropGetter = (props = {}) => ({ const getPopoverProps: PropGetter = (props = {}) => ({
ref: overlayRef, ref: overlayRef,
className: slots.base({class: baseStyles}),
...mergeProps( ...mergeProps(
overlayTriggerProps, overlayTriggerProps,
overlayProps, overlayProps,
@ -184,17 +182,20 @@ export function usePopover(originalProps: UsePopoverProps) {
otherProps, otherProps,
props, props,
), ),
className: slots.base({class: clsx(baseStyles, props.className)}),
id: popoverId, id: popoverId,
}); });
const getTriggerProps = useCallback<PropGetter>( const getTriggerProps = useCallback<PropGetter>(
(props = {}, _ref: Ref<any> | null | undefined = null) => ({ (props = {}, _ref: Ref<any> | null | undefined = null) => {
return {
...mergeProps(triggerProps, props), ...mergeProps(triggerProps, props),
ref: mergeRefs(_ref, triggerRef), ref: mergeRefs(_ref, triggerRef),
"aria-describedby": isOpen ? popoverId : undefined, "aria-controls": popoverId,
onClick: chain(props.onClick, triggerProps.onPress), "aria-haspopup": "dialog",
}), };
[isOpen, popoverId, triggerProps, triggerRef], },
[isOpen, popoverId, state, triggerProps, triggerRef],
); );
const getArrowProps = useCallback<PropGetter>( const getArrowProps = useCallback<PropGetter>(
@ -211,9 +212,10 @@ export function usePopover(originalProps: UsePopoverProps) {
children, children,
styles, styles,
showArrow, showArrow,
triggerRef,
placement: placementProp, placement: placementProp,
isOpen: state.isOpen, isOpen: state.isOpen,
onClose: handleClose, onClose: state.close,
disableAnimation: originalProps.disableAnimation ?? false, disableAnimation: originalProps.disableAnimation ?? false,
motionProps, motionProps,
getPopoverProps, getPopoverProps,

12
packages/components/popover/stories/popover.stories.tsx
View File

@ -88,6 +88,11 @@ export default {
const defaultProps = { const defaultProps = {
...popover.defaultVariants, ...popover.defaultVariants,
placement: "top",
offset: 7,
defaultOpen: false,
isDisabled: false,
disableAnimation: false,
}; };
const Template: ComponentStory<typeof Popover> = (args: PopoverProps) => { const Template: ComponentStory<typeof Popover> = (args: PopoverProps) => {
@ -111,3 +116,10 @@ Default.args = {
...defaultProps, ...defaultProps,
showArrow: true, showArrow: true,
}; };
export const DisableAnimation = Template.bind({});
DisableAnimation.args = {
...defaultProps,
showArrow: true,
disableAnimation: true,
};

8
packages/components/progress/package.json
View File

@ -43,12 +43,12 @@
"@nextui-org/use-aria-label": "workspace:*", "@nextui-org/use-aria-label": "workspace:*",
"@nextui-org/system": "workspace:*", "@nextui-org/system": "workspace:*",
"@nextui-org/theme": "workspace:*", "@nextui-org/theme": "workspace:*",
"@react-aria/i18n": "^3.7.0", "@react-aria/i18n": "^3.7.1",
"@react-aria/progress": "^3.4.0", "@react-aria/progress": "^3.4.1",
"@react-aria/utils": "^3.15.0" "@react-aria/utils": "^3.16.0"
}, },
"devDependencies": { "devDependencies": {
"@react-types/progress": "^3.3.0", "@react-types/progress": "^3.4.0",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"
}, },

5
packages/components/progress/src/use-circular-progress.ts
View File

@ -21,6 +21,11 @@ export interface Props extends HTMLNextUIProps<"div"> {
* Ref to the DOM node. * Ref to the DOM node.
*/ */
ref?: ReactRef<HTMLElement | null>; ref?: ReactRef<HTMLElement | null>;
/**
* Whether to show the value label.
* @default false
*/
showValueLabel?: boolean;
/** /**
* Classname or List of classes to change the styles of the element. * Classname or List of classes to change the styles of the element.
* if `className` is passed, it will be added to the base slot. * if `className` is passed, it will be added to the base slot.

7
packages/components/progress/src/use-progress.ts
View File

@ -12,11 +12,16 @@ import {useIsMounted} from "@nextui-org/use-is-mounted";
import {useProgressBar as useAriaProgress} from "./use-aria-progress"; import {useProgressBar as useAriaProgress} from "./use-aria-progress";
export interface Props extends HTMLNextUIProps<"div"> { interface Props extends HTMLNextUIProps<"div"> {
/** /**
* Ref to the DOM node. * Ref to the DOM node.
*/ */
ref?: ReactRef<HTMLElement | null>; ref?: ReactRef<HTMLElement | null>;
/**
* Whether to show the value label.
* @default false
*/
showValueLabel?: boolean;
/** /**
* Classname or List of classes to change the styles of the element. * Classname or List of classes to change the styles of the element.
* if `className` is passed, it will be added to the base slot. * if `className` is passed, it will be added to the base slot.

14
packages/components/radio/package.json
View File

@ -41,16 +41,16 @@
"@nextui-org/dom-utils": "workspace:*", "@nextui-org/dom-utils": "workspace:*",
"@nextui-org/shared-utils": "workspace:*", "@nextui-org/shared-utils": "workspace:*",
"@nextui-org/system": "workspace:*", "@nextui-org/system": "workspace:*",
"@react-aria/focus": "^3.11.0", "@react-aria/focus": "^3.12.0",
"@react-aria/interactions": "^3.14.0", "@react-aria/interactions": "^3.15.0",
"@react-aria/radio": "^3.5.0", "@react-aria/radio": "^3.6.0",
"@react-aria/utils": "^3.15.0", "@react-aria/utils": "^3.16.0",
"@react-aria/visually-hidden": "^3.7.0", "@react-aria/visually-hidden": "^3.8.0",
"@react-stately/radio": "^3.7.0" "@react-stately/radio": "^3.8.0"
}, },
"devDependencies": { "devDependencies": {
"@react-types/radio": "^3.3.0", "@react-types/radio": "^3.3.0",
"@react-types/shared": "^3.15.0", "@react-types/shared": "^3.18.0",
"@nextui-org/button": "workspace:*", "@nextui-org/button": "workspace:*",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"

2
packages/components/snippet/package.json
View File

@ -43,7 +43,7 @@
"@nextui-org/dom-utils": "workspace:*", "@nextui-org/dom-utils": "workspace:*",
"@nextui-org/use-clipboard": "workspace:*", "@nextui-org/use-clipboard": "workspace:*",
"@nextui-org/tooltip": "workspace:*", "@nextui-org/tooltip": "workspace:*",
"@react-aria/focus": "^3.11.0" "@react-aria/focus": "^3.12.0"
}, },
"devDependencies": { "devDependencies": {
"clean-package": "2.2.0", "clean-package": "2.2.0",

14
packages/components/switch/package.json
View File

@ -41,13 +41,13 @@
"@nextui-org/shared-utils": "workspace:*", "@nextui-org/shared-utils": "workspace:*",
"@nextui-org/system": "workspace:*", "@nextui-org/system": "workspace:*",
"@nextui-org/theme": "workspace:*", "@nextui-org/theme": "workspace:*",
"@react-aria/focus": "^3.11.0", "@react-aria/focus": "^3.12.0",
"@react-aria/interactions": "^3.14.0", "@react-aria/interactions": "^3.15.0",
"@react-aria/switch": "^3.4.0", "@react-aria/switch": "^3.5.0",
"@react-aria/utils": "^3.15.0", "@react-aria/utils": "^3.16.0",
"@react-aria/visually-hidden": "^3.7.0", "@react-aria/visually-hidden": "^3.8.0",
"@react-stately/toggle": "^3.5.0", "@react-stately/toggle": "^3.5.1",
"@react-types/shared": "^3.17.0" "@react-types/shared": "^3.18.0"
}, },
"devDependencies": { "devDependencies": {
"clean-package": "2.2.0", "clean-package": "2.2.0",

16
packages/components/tooltip/package.json
View File

@ -43,17 +43,17 @@
"@nextui-org/system": "workspace:*", "@nextui-org/system": "workspace:*",
"@nextui-org/theme": "workspace:*", "@nextui-org/theme": "workspace:*",
"@nextui-org/framer-transitions": "workspace:*", "@nextui-org/framer-transitions": "workspace:*",
"@react-aria/overlays": "^3.13.0", "@react-aria/overlays": "^3.14.0",
"@react-aria/tooltip": "^3.4.0", "@react-aria/tooltip": "^3.5.0",
"@react-stately/tooltip": "^3.3.0", "@react-stately/tooltip": "^3.4.0",
"@react-aria/interactions": "^3.14.0", "@react-aria/interactions": "^3.15.0",
"@react-aria/utils": "^3.15.0", "@react-aria/utils": "^3.16.0",
"framer-motion": "^10.6.0" "framer-motion": "^10.11.2"
}, },
"devDependencies": { "devDependencies": {
"@nextui-org/button": "workspace:*", "@nextui-org/button": "workspace:*",
"@react-types/overlays": "^3.7.0", "@react-types/overlays": "^3.7.1",
"@react-types/tooltip": "^3.3.0", "@react-types/tooltip": "^3.4.0",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"
}, },

3
packages/components/tooltip/src/use-tooltip.ts
View File

@ -109,6 +109,7 @@ export function useTooltip(originalProps: UseTooltipProps) {
const state = useTooltipTriggerState({ const state = useTooltipTriggerState({
delay, delay,
closeDelay,
isDisabled, isDisabled,
defaultOpen, defaultOpen,
onOpenChange, onOpenChange,
@ -173,7 +174,7 @@ export function useTooltip(originalProps: UseTooltipProps) {
const {overlayProps} = useOverlay( const {overlayProps} = useOverlay(
{ {
isOpen: isOpen, isOpen: isOpen,
isDismissable: isDismissable && isOpen, isDismissable,
onClose: handleClose, onClose: handleClose,
shouldCloseOnBlur, shouldCloseOnBlur,
isKeyboardDismissDisabled, isKeyboardDismissDisabled,

9
packages/components/tooltip/stories/tooltip.stories.tsx
View File

@ -107,14 +107,11 @@ const DelayTemplate: ComponentStory<typeof Tooltip> = (args: TooltipProps) => (
Delay Open (1000ms) Delay Open (1000ms)
</Button> </Button>
</Tooltip> </Tooltip>
{/* <Tooltip {...args} closeDelay={2000} content="Tooltip 2">
// TODO: Uncomment when closeDelay is deployed in react-aria
// https://github.com/adobe/react-spectrum/pull/4128
<Tooltip {...args} closeDelay={3000} content="Tooltip 2">
<Button color="success" variant="faded"> <Button color="success" variant="faded">
Delay Close (3000ms) Delay Close (2000ms)
</Button> </Button>
</Tooltip> */} </Tooltip>
</div> </div>
); );

4
packages/components/user/package.json
View File

@ -42,8 +42,8 @@
"@nextui-org/theme": "workspace:*", "@nextui-org/theme": "workspace:*",
"@nextui-org/shared-utils": "workspace:*", "@nextui-org/shared-utils": "workspace:*",
"@nextui-org/dom-utils": "workspace:*", "@nextui-org/dom-utils": "workspace:*",
"@react-aria/focus": "^3.11.0", "@react-aria/focus": "^3.12.0",
"@react-aria/utils": "^3.15.0" "@react-aria/utils": "^3.16.0"
}, },
"devDependencies": { "devDependencies": {
"clean-package": "2.2.0", "clean-package": "2.2.0",

4
packages/core/system/package.json
View File

@ -50,7 +50,7 @@
] ]
}, },
"dependencies": { "dependencies": {
"@react-aria/ssr": "^3.5.0", "@react-aria/ssr": "^3.6.0",
"@react-aria/overlays": "^3.13.0" "@react-aria/overlays": "^3.14.0"
} }
} }

1
packages/core/theme/src/components/popover.ts
View File

@ -30,6 +30,7 @@ const popover = tv({
"px-4", "px-4",
"py-1", "py-1",
"text-base", "text-base",
"!outline-none",
], ],
arrow: [ arrow: [
"-z-10", "-z-10",

8
packages/hooks/use-aria-accordion-item/package.json
View File

@ -34,15 +34,15 @@
"postpack": "clean-package restore" "postpack": "clean-package restore"
}, },
"dependencies": { "dependencies": {
"@react-aria/focus": "^3.11.0", "@react-aria/focus": "^3.12.0",
"@react-stately/tree": "^3.5.0", "@react-stately/tree": "^3.6.0",
"@react-aria/button": "^3.7.0" "@react-aria/button": "^3.7.1"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=18" "react": ">=18"
}, },
"devDependencies": { "devDependencies": {
"@react-types/shared": "^3.17.0", "@react-types/shared": "^3.18.0",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"
}, },

4
packages/hooks/use-aria-field/package.json
View File

@ -36,13 +36,13 @@
"dependencies": { "dependencies": {
"@nextui-org/use-aria-label": "workspace:*", "@nextui-org/use-aria-label": "workspace:*",
"@nextui-org/use-aria-slot-id": "workspace:*", "@nextui-org/use-aria-slot-id": "workspace:*",
"@react-aria/utils": "^3.15.0" "@react-aria/utils": "^3.16.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=18" "react": ">=18"
}, },
"devDependencies": { "devDependencies": {
"@react-types/shared": "^3.15.0", "@react-types/shared": "^3.18.0",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"
}, },

4
packages/hooks/use-aria-label/package.json
View File

@ -34,13 +34,13 @@
"postpack": "clean-package restore" "postpack": "clean-package restore"
}, },
"dependencies": { "dependencies": {
"@react-aria/utils": "^3.15.0" "@react-aria/utils": "^3.16.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=18" "react": ">=18"
}, },
"devDependencies": { "devDependencies": {
"@react-types/shared": "^3.17.0", "@react-types/shared": "^3.18.0",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"
}, },

2
packages/hooks/use-aria-slot-id/package.json
View File

@ -34,7 +34,7 @@
"postpack": "clean-package restore" "postpack": "clean-package restore"
}, },
"dependencies": { "dependencies": {
"@react-aria/utils": "^3.15.0" "@react-aria/utils": "^3.16.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=18" "react": ">=18"

4
packages/utilities/aria-utils/package.json
View File

@ -38,11 +38,11 @@
}, },
"dependencies": { "dependencies": {
"@nextui-org/system": "workspace:*", "@nextui-org/system": "workspace:*",
"@react-aria/utils": "^3.15.0", "@react-aria/utils": "^3.16.0",
"@react-stately/collections": "^3.6.0" "@react-stately/collections": "^3.6.0"
}, },
"devDependencies": { "devDependencies": {
"@react-types/shared": "^3.17.0", "@react-types/shared": "^3.18.0",
"@react-types/overlays": "^3.7.0", "@react-types/overlays": "^3.7.0",
"clean-package": "2.2.0", "clean-package": "2.2.0",
"react": "^18.0.0" "react": "^18.0.0"

2
packages/utilities/framer-transitions/package.json
View File

@ -43,7 +43,7 @@
}, },
"devDependencies": { "devDependencies": {
"react": "^18.0.0", "react": "^18.0.0",
"framer-motion": "^10.6.0", "framer-motion": "^10.11.2",
"clean-package": "2.2.0" "clean-package": "2.2.0"
}, },
"clean-package": "../../../clean-package.config.json", "clean-package": "../../../clean-package.config.json",

4
packages/utilities/shared-utils/src/functions.ts
View File

@ -50,3 +50,7 @@ export function extractProperty<K extends keyof Extractable, D extends keyof Ext
return result as Extractable[K] | D | string | boolean; return result as Extractable[K] | D | string | boolean;
} }
export function getUniqueID(prefix: string) {
return `${prefix}-${Math.floor(Math.random() * 1000000)}`;
}

1447
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff