From b4d1e5d2dfd7ecf0fd5c8e1c802e233dbb4186db Mon Sep 17 00:00:00 2001 From: Sean Collings Date: Mon, 2 Dec 2024 17:21:07 -0700 Subject: [PATCH 1/2] Remove old useContextProps in favor of V2 --- .../components/Dropdowns/Menu/MenuTrigger.tsx | 2 +- .../ComboBoxField/ComboBoxField.component.tsx | 4 ++-- .../MultiSelectField.component.tsx | 2 +- .../SelectField/SelectField.component.tsx | 2 +- .../OverlayTrigger.component.tsx | 2 +- .../Overlays/Popover/Popover.component.tsx | 12 ++++++----- .../Overlays/Popover/Popover.context.ts | 4 ++++ .../components/Overlays/Popover/context.ts | 4 ---- .../Overlays/ToolTip/ToolTip.component.tsx | 21 ++++++------------- .../Overlays/ToolTip/ToolTip.context.ts | 3 ++- 10 files changed, 25 insertions(+), 31 deletions(-) create mode 100644 packages/atomic-elements/src/components/Overlays/Popover/Popover.context.ts delete mode 100644 packages/atomic-elements/src/components/Overlays/Popover/context.ts diff --git a/packages/atomic-elements/src/components/Dropdowns/Menu/MenuTrigger.tsx b/packages/atomic-elements/src/components/Dropdowns/Menu/MenuTrigger.tsx index d80df8c0..294fa6f1 100644 --- a/packages/atomic-elements/src/components/Dropdowns/Menu/MenuTrigger.tsx +++ b/packages/atomic-elements/src/components/Dropdowns/Menu/MenuTrigger.tsx @@ -7,7 +7,7 @@ import { } from "react-stately"; import { HasChildren } from "../../../types"; import { Provider } from "../../Internal/Provider"; -import { PopoverContext } from "../../Overlays/Popover/context"; +import { PopoverContext } from "../../Overlays/Popover/Popover.context"; import { MenuContext } from "./Menu.context"; import { OverlayTriggerStateContext } from "../../Overlays/OverlayTrigger/context"; diff --git a/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx b/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx index 1970362f..d7dbed87 100644 --- a/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx +++ b/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx @@ -9,7 +9,7 @@ import { Provider } from "@components/Internal/Provider"; import { useFilter } from "@react-aria/i18n"; import { OverlayTriggerStateContext } from "@components/Overlays/OverlayTrigger/context"; -import { PopoverContext } from "@components/Overlays/Popover/context"; +import { PopoverContext } from "@components/Overlays/Popover/Popover.context"; import { ListBoxContext, ListStateContext, @@ -34,7 +34,7 @@ import { ComboInputContext } from "../ComboInput"; import { ComboBoxFieldWrapper } from "./ComboBoxField.styles"; export const ComboBoxField = forwardRef(function ComboBoxField< - T extends object, + T extends object >(props: ComboBoxFieldProps, ref: React.Ref) { [props, ref] = useContextPropsV2(ComboBoxFieldContext, props, ref); diff --git a/packages/atomic-elements/src/components/Fields/MultiSelectField/MultiSelectField.component.tsx b/packages/atomic-elements/src/components/Fields/MultiSelectField/MultiSelectField.component.tsx index 91f90bbd..24c796c9 100644 --- a/packages/atomic-elements/src/components/Fields/MultiSelectField/MultiSelectField.component.tsx +++ b/packages/atomic-elements/src/components/Fields/MultiSelectField/MultiSelectField.component.tsx @@ -7,7 +7,7 @@ import { useRenderProps } from "@hooks/useRenderProps"; import { useContextPropsV2 } from "@hooks/useContextProps"; import { BaseCollection, CollectionBuilder } from "@react-aria/collections"; import { Provider } from "@components/Internal/Provider"; -import { PopoverContext } from "@components/Overlays/Popover/context"; +import { PopoverContext } from "@components/Overlays/Popover/Popover.context"; import { ButtonContext } from "@components/Buttons/Button/Button.context"; import { DropdownButton } from "@components/Internal/DropdownButton"; import { diff --git a/packages/atomic-elements/src/components/Fields/SelectField/SelectField.component.tsx b/packages/atomic-elements/src/components/Fields/SelectField/SelectField.component.tsx index 53c6505f..213a09cd 100644 --- a/packages/atomic-elements/src/components/Fields/SelectField/SelectField.component.tsx +++ b/packages/atomic-elements/src/components/Fields/SelectField/SelectField.component.tsx @@ -18,7 +18,7 @@ import { FieldLabelContext, FieldMessageContext, } from "@components/Fields"; -import { PopoverContext } from "@components/Overlays/Popover/context"; +import { PopoverContext } from "@components/Overlays/Popover/Popover.context"; import { ButtonContext } from "@components/Buttons/Button/Button.context"; import { ButtonText, SelectFieldWrapper } from "./SelectField.styles"; diff --git a/packages/atomic-elements/src/components/Overlays/OverlayTrigger/OverlayTrigger.component.tsx b/packages/atomic-elements/src/components/Overlays/OverlayTrigger/OverlayTrigger.component.tsx index ed6f59b3..fa64bfd5 100644 --- a/packages/atomic-elements/src/components/Overlays/OverlayTrigger/OverlayTrigger.component.tsx +++ b/packages/atomic-elements/src/components/Overlays/OverlayTrigger/OverlayTrigger.component.tsx @@ -6,7 +6,7 @@ import { useOverlayTriggerState, } from "react-stately"; -import { PopoverContext } from "../Popover/context"; +import { PopoverContext } from "../Popover/Popover.context"; import { Provider } from "../../Internal/Provider"; import { HasChildren } from "../../../types"; import { OverlayTriggerStateContext } from "./context"; diff --git a/packages/atomic-elements/src/components/Overlays/Popover/Popover.component.tsx b/packages/atomic-elements/src/components/Overlays/Popover/Popover.component.tsx index ce957606..24982298 100644 --- a/packages/atomic-elements/src/components/Overlays/Popover/Popover.component.tsx +++ b/packages/atomic-elements/src/components/Overlays/Popover/Popover.component.tsx @@ -10,18 +10,19 @@ import { OverlayTriggerState, useOverlayTriggerState, } from "react-stately"; +import { useIsHidden } from "@react-aria/collections"; + import { mergeProps } from "@react-aria/utils"; import { RenderBaseProps, HasVariant } from "../../../types"; import { useRenderProps } from "@hooks"; -import { useContextProps } from "@hooks/useContextProps"; +import { useContextPropsV2 } from "@hooks/useContextProps"; import { useResizeObserver } from "@hooks/useResizeObserver"; import { useForwardedRef } from "@hooks/useForwardedRef"; import { PopoverUnderlay, PopoverContent } from "./Popover.styles"; -import { PopoverContext } from "./context"; +import { PopoverContext } from "./Popover.context"; import { OverlayTriggerStateContext } from "../OverlayTrigger/context"; import { invertPlacementAxis } from "@utils/placement"; -import { useIsHidden } from "@react-aria/collections"; export interface PopoverRenderProps { /** Width in pixels of the triggering element that opened this popover */ @@ -41,8 +42,9 @@ export interface PopoverProps /** A popover is an overlay element positioned relative to a target. */ export const Popover = React.forwardRef( (props: PopoverProps, ref) => { - const contextProps = useContextProps(PopoverContext, props); - const { triggerRef, ...rest } = contextProps; + [props, ref] = useContextPropsV2(PopoverContext, props, ref); + + const { triggerRef, ...rest } = props; const contextState = useContext(OverlayTriggerStateContext); const localState = useOverlayTriggerState(props); diff --git a/packages/atomic-elements/src/components/Overlays/Popover/Popover.context.ts b/packages/atomic-elements/src/components/Overlays/Popover/Popover.context.ts new file mode 100644 index 00000000..b14802f7 --- /dev/null +++ b/packages/atomic-elements/src/components/Overlays/Popover/Popover.context.ts @@ -0,0 +1,4 @@ +import { PopoverProps } from "."; +import { createComponentContext } from "@utils/index"; + +export const PopoverContext = createComponentContext(); diff --git a/packages/atomic-elements/src/components/Overlays/Popover/context.ts b/packages/atomic-elements/src/components/Overlays/Popover/context.ts deleted file mode 100644 index 4f790ec6..00000000 --- a/packages/atomic-elements/src/components/Overlays/Popover/context.ts +++ /dev/null @@ -1,4 +0,0 @@ -import React from "react"; -import { PopoverProps } from "."; - -export const PopoverContext = React.createContext(null as any); diff --git a/packages/atomic-elements/src/components/Overlays/ToolTip/ToolTip.component.tsx b/packages/atomic-elements/src/components/Overlays/ToolTip/ToolTip.component.tsx index 1f569dee..1bca56f1 100644 --- a/packages/atomic-elements/src/components/Overlays/ToolTip/ToolTip.component.tsx +++ b/packages/atomic-elements/src/components/Overlays/ToolTip/ToolTip.component.tsx @@ -1,5 +1,4 @@ import { useContext, useRef } from "react"; -import classNames from "classnames"; import { Overlay, useOverlayPosition, @@ -9,16 +8,10 @@ import { import { useTooltip } from "@react-aria/tooltip"; import { OverlayTriggerProps } from "react-stately"; import { Transition } from "react-transition-group"; - import { ToolTipArrow, ToolTipOverlay } from "./ToolTip.styles"; -import { - HasChildren, - HasClassName, - PresentationProps, - RenderBaseProps, -} from "../../../types"; +import { RenderBaseProps } from "../../../types"; import { TooltipContext, TooltipStateContext } from "./ToolTip.context"; -import { useContextProps } from "../../../hooks/useContextProps"; +import { useContextPropsV2 } from "../../../hooks/useContextProps"; import { mergeProps } from "@react-aria/utils"; import { useRenderProps } from "@hooks"; @@ -43,13 +36,11 @@ export interface ToolTipProps /** A ToolTip component displays a popup with additional information when a user hovers over or focuses on an element. */ export function ToolTip(props: ToolTipProps) { - const { - triggerRef, - transitionDuration = 300, - ...rest - } = useContextProps(TooltipContext, props); + let ref = useRef(null); + [props, ref] = useContextPropsV2(TooltipContext, props, ref); + const { triggerRef, transitionDuration = 300, ...rest } = props; + const state = useContext(TooltipStateContext); - const ref = useRef(null); const { tooltipProps } = useTooltip({ ...rest }, state); diff --git a/packages/atomic-elements/src/components/Overlays/ToolTip/ToolTip.context.ts b/packages/atomic-elements/src/components/Overlays/ToolTip/ToolTip.context.ts index 4f5bc8f5..04f4fb24 100644 --- a/packages/atomic-elements/src/components/Overlays/ToolTip/ToolTip.context.ts +++ b/packages/atomic-elements/src/components/Overlays/ToolTip/ToolTip.context.ts @@ -1,8 +1,9 @@ import React from "react"; import { TooltipTriggerState } from "react-stately"; import { ToolTipProps } from "./ToolTip.component"; +import { createComponentContext } from "@utils/index"; -export const TooltipContext = React.createContext(null as any); +export const TooltipContext = createComponentContext(); export const TooltipStateContext = React.createContext( null as any From 26586492027ed19ddce0bd674906ddc7699c6ac1 Mon Sep 17 00:00:00 2001 From: Sean Collings Date: Mon, 2 Dec 2024 17:22:44 -0700 Subject: [PATCH 2/2] Renamed useContextPropsV2 => useContextProps --- .../LiveMessage/LiveMessage.component.tsx | 4 ++-- .../Buttons/Button/Button.component.tsx | 8 ++----- .../IconButton/IconButton.component.tsx | 4 ++-- .../Dropdowns/ListBox/ListBox.component.tsx | 4 ++-- .../Dropdowns/Menu/Menu.component.tsx | 4 ++-- .../ErrorMessage/ErrorMessage.component.tsx | 4 ++-- .../Fields/Atoms/Input/Input.component.tsx | 4 ++-- .../Fields/Atoms/Label/Label.component.tsx | 4 ++-- .../Atoms/Message/Message.component.tsx | 4 ++-- .../Atoms/TextArea/TextArea.component.tsx | 4 ++-- .../ComboBoxField/ComboBoxField.component.tsx | 4 ++-- .../ComboInput/ComboInput.component.tsx | 4 ++-- .../MultiSelectField.component.tsx | 4 ++-- .../SelectField/SelectField.component.tsx | 4 ++-- .../Inputs/Checkbox/Checkbox.component.tsx | 4 ++-- .../components/Layout/Tabs/Tabs.component.tsx | 6 +++--- .../Overlays/Modal/Modal.component.tsx | 4 ++-- .../Overlays/Popover/Popover.component.tsx | 4 ++-- .../Overlays/ToolTip/ToolTip.component.tsx | 4 ++-- .../src/hooks/useContextProps.ts | 21 +++++++------------ 20 files changed, 46 insertions(+), 57 deletions(-) diff --git a/packages/atomic-elements/src/components/Accessibility/LiveMessage/LiveMessage.component.tsx b/packages/atomic-elements/src/components/Accessibility/LiveMessage/LiveMessage.component.tsx index 16ba7405..f56577da 100644 --- a/packages/atomic-elements/src/components/Accessibility/LiveMessage/LiveMessage.component.tsx +++ b/packages/atomic-elements/src/components/Accessibility/LiveMessage/LiveMessage.component.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef } from "react"; import { useAnnouncer } from "../LiveAnnouncer"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { LiveMessageContext } from "./LiveMessage.context"; export interface LiveMessageProps { @@ -19,7 +19,7 @@ export interface LiveMessageProps { */ export function LiveMessage(props: LiveMessageProps) { let ref = useRef(null); - [props, ref] = useContextPropsV2(LiveMessageContext, props, ref); + [props, ref] = useContextProps(LiveMessageContext, props, ref); const { message, polite = true, assertive = false, timeout } = props; const { announceAssertive, announcePolite } = useAnnouncer(); diff --git a/packages/atomic-elements/src/components/Buttons/Button/Button.component.tsx b/packages/atomic-elements/src/components/Buttons/Button/Button.component.tsx index 74f6867c..9c97bd78 100644 --- a/packages/atomic-elements/src/components/Buttons/Button/Button.component.tsx +++ b/packages/atomic-elements/src/components/Buttons/Button/Button.component.tsx @@ -13,7 +13,7 @@ import { import { useFocusRing } from "@hooks/useFocusRing"; import { useRenderProps } from "@hooks/useRenderProps"; import { useButtonLink } from "@hooks/useButtonLink"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { StyledButton } from "./Button.styles"; import { ButtonContext } from "./Button.context"; import { SlotProps } from "@hooks/useSlottedContext"; @@ -53,11 +53,7 @@ export interface ButtonProps */ export const Button = forwardRef( function Button(props, forwardedRef) { - [props, forwardedRef] = useContextPropsV2( - ButtonContext, - props, - forwardedRef - ); + [props, forwardedRef] = useContextProps(ButtonContext, props, forwardedRef); const ref = useObjectRef(forwardedRef); diff --git a/packages/atomic-elements/src/components/Buttons/IconButton/IconButton.component.tsx b/packages/atomic-elements/src/components/Buttons/IconButton/IconButton.component.tsx index 51e94414..591befd0 100644 --- a/packages/atomic-elements/src/components/Buttons/IconButton/IconButton.component.tsx +++ b/packages/atomic-elements/src/components/Buttons/IconButton/IconButton.component.tsx @@ -3,7 +3,7 @@ import { HasIcon } from "../../../types"; import { MaterialIcon } from "../../Icons/MaterialIcon"; import { StyledIconButton } from "./IconButton.styles"; import { ButtonProps } from "../Button"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { ButtonContext } from "../Button/Button.context"; export interface IconButtonProps @@ -17,7 +17,7 @@ export interface IconButtonProps * */ export const IconButton = forwardRef( function IconButton(props, forwardedRef) { - [props, forwardedRef] = useContextPropsV2( + [props, forwardedRef] = useContextProps( ButtonContext as any, props, forwardedRef diff --git a/packages/atomic-elements/src/components/Dropdowns/ListBox/ListBox.component.tsx b/packages/atomic-elements/src/components/Dropdowns/ListBox/ListBox.component.tsx index 2c373304..bc527929 100644 --- a/packages/atomic-elements/src/components/Dropdowns/ListBox/ListBox.component.tsx +++ b/packages/atomic-elements/src/components/Dropdowns/ListBox/ListBox.component.tsx @@ -17,7 +17,7 @@ import { Label } from "@components/Fields"; import { Divider } from "@components/Layout/Divider"; import { Provider } from "@components/Internal/Provider"; import { ItemContext, ItemProps, SectionContext } from "@components/Collection"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { List, ListItem, SectionTitle, SubList } from "./ListBox.styles"; import { ListBoxProps } from "./ListBox.types"; @@ -35,7 +35,7 @@ export const ListBox = forwardRef(function ListBox( ref: React.Ref ) { const state = useContext(ListStateContext); - [props, ref] = useContextPropsV2(ListBoxContext, props, ref); + [props, ref] = useContextProps(ListBoxContext, props, ref); // When used within a SelectField or similar component, // the state will be provided by the parent component diff --git a/packages/atomic-elements/src/components/Dropdowns/Menu/Menu.component.tsx b/packages/atomic-elements/src/components/Dropdowns/Menu/Menu.component.tsx index 054992b4..8362a5b1 100644 --- a/packages/atomic-elements/src/components/Dropdowns/Menu/Menu.component.tsx +++ b/packages/atomic-elements/src/components/Dropdowns/Menu/Menu.component.tsx @@ -24,7 +24,7 @@ import { Provider } from "@components/Internal/Provider"; import { useCollectionRenderer } from "@hooks/useCollectionRenderer"; import { useRenderProps } from "@hooks"; import { useFocusRing } from "@hooks/useFocusRing"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { ItemContext, ItemProps, SectionContext } from "@components/Collection"; import { MenuContext, MenuStateContext } from "./Menu.context"; @@ -58,7 +58,7 @@ export const Menu = forwardRef(function Menu( props: MenuProps, ref: React.Ref ) { - [props, ref] = useContextPropsV2(MenuContext, props, ref); + [props, ref] = useContextProps(MenuContext, props, ref); return ( }> diff --git a/packages/atomic-elements/src/components/Fields/Atoms/ErrorMessage/ErrorMessage.component.tsx b/packages/atomic-elements/src/components/Fields/Atoms/ErrorMessage/ErrorMessage.component.tsx index 45f92454..2084d12a 100644 --- a/packages/atomic-elements/src/components/Fields/Atoms/ErrorMessage/ErrorMessage.component.tsx +++ b/packages/atomic-elements/src/components/Fields/Atoms/ErrorMessage/ErrorMessage.component.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "styled-components"; import mixins from "../../../../styles/mixins"; import { ElementWrapperProps } from "../../../../types"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { useRenderProps } from "@hooks"; import { ErrorMessageContext } from "./ErrorMessage.context"; @@ -25,7 +25,7 @@ export const ErrorMessage = React.forwardRef(function ErrorMessage( props: ErrorMessageProps, ref: React.Ref ) { - [props, ref] = useContextPropsV2(ErrorMessageContext, props, ref); + [props, ref] = useContextProps(ErrorMessageContext, props, ref); const { className, size = "medium", as = "p", isInvalid, ...rest } = props; const renderProps = useRenderProps({ diff --git a/packages/atomic-elements/src/components/Fields/Atoms/Input/Input.component.tsx b/packages/atomic-elements/src/components/Fields/Atoms/Input/Input.component.tsx index ec0bd7eb..192a7cf4 100644 --- a/packages/atomic-elements/src/components/Fields/Atoms/Input/Input.component.tsx +++ b/packages/atomic-elements/src/components/Fields/Atoms/Input/Input.component.tsx @@ -2,7 +2,7 @@ import React, { forwardRef } from "react"; import styled from "styled-components"; import mixins from "../../../../styles/mixins"; import { ElementWrapperProps } from "../../../../types"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { useRenderProps } from "@hooks"; import { InputContext } from "./Input.context"; import { SlotProps } from "@hooks/useSlottedContext"; @@ -25,7 +25,7 @@ export const Input = forwardRef(function Input( props: InputProps, ref: React.Ref ) { - [props, ref] = useContextPropsV2(InputContext, props, ref); + [props, ref] = useContextProps(InputContext, props, ref); const { className, size, style, ...rest } = props; diff --git a/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx b/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx index 6975e3ce..3503d557 100644 --- a/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx +++ b/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "styled-components"; import mixins from "../../../../styles/mixins"; import { ElementWrapperProps } from "../../../../types"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { LabelContext } from "./Label.context"; import { useRenderProps } from "@hooks"; @@ -28,7 +28,7 @@ export const Label = React.forwardRef(function Label( props: LabelProps, ref: React.Ref ) { - [props, ref] = useContextPropsV2(LabelContext, props, ref); + [props, ref] = useContextProps(LabelContext, props, ref); const { className, size, as = "label", ...rest } = props; diff --git a/packages/atomic-elements/src/components/Fields/Atoms/Message/Message.component.tsx b/packages/atomic-elements/src/components/Fields/Atoms/Message/Message.component.tsx index 20da9f37..3f324e00 100644 --- a/packages/atomic-elements/src/components/Fields/Atoms/Message/Message.component.tsx +++ b/packages/atomic-elements/src/components/Fields/Atoms/Message/Message.component.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "styled-components"; import mixins from "../../../../styles/mixins"; import { ElementWrapperProps } from "../../../../types"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { useRenderProps } from "@hooks"; import { MessageContext } from "./Message.context"; @@ -24,7 +24,7 @@ export const Message = React.forwardRef(function Message( props: MessageProps, ref: React.Ref ) { - [props, ref] = useContextPropsV2(MessageContext, props, ref); + [props, ref] = useContextProps(MessageContext, props, ref); const { as, className, size = "auto", ...rest } = props; const renderProps = useRenderProps({ diff --git a/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.component.tsx b/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.component.tsx index 54c06010..343710a8 100644 --- a/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.component.tsx +++ b/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.component.tsx @@ -1,7 +1,7 @@ import React, { forwardRef } from "react"; import { ElementWrapperProps } from "../../../../types"; import { StyledTextArea } from "./TextArea.styles"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { useRenderProps } from "@hooks"; import { filterDOMProps } from "@react-aria/utils"; import { TextAreaContext } from "./TextArea.context"; @@ -16,7 +16,7 @@ export const TextArea = forwardRef(function TextArea( props: TextAreaProps, ref: React.Ref ) { - [props, ref] = useContextPropsV2(TextAreaContext, props, ref); + [props, ref] = useContextProps(TextAreaContext, props, ref); const { className, size, style, ...rest } = props; diff --git a/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx b/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx index d7dbed87..23fb4820 100644 --- a/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx +++ b/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx @@ -1,5 +1,5 @@ import React, { forwardRef, useRef } from "react"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { PressResponder } from "@react-aria/interactions"; import { CollectionBuilder } from "@react-aria/collections"; import { useComboBoxState } from "react-stately"; @@ -36,7 +36,7 @@ import { ComboBoxFieldWrapper } from "./ComboBoxField.styles"; export const ComboBoxField = forwardRef(function ComboBoxField< T extends object >(props: ComboBoxFieldProps, ref: React.Ref) { - [props, ref] = useContextPropsV2(ComboBoxFieldContext, props, ref); + [props, ref] = useContextProps(ComboBoxFieldContext, props, ref); return ( diff --git a/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.component.tsx b/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.component.tsx index 5404f483..33ccf2f1 100644 --- a/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.component.tsx +++ b/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.component.tsx @@ -2,7 +2,7 @@ import React from "react"; import classNames from "classnames"; import { ComboInputProps } from "./ComboInput.types"; import { StyledComboInput } from "./ComboInput.styles"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { ComboInputContext } from "./ComboInput.context"; /** @@ -15,7 +15,7 @@ export const ComboInput = React.forwardRef(function ComboInput( props: ComboInputProps, ref: React.Ref ) { - [props, ref] = useContextPropsV2(ComboInputContext, props, ref); + [props, ref] = useContextProps(ComboInputContext, props, ref); const { className, padding = [], children, inputRef, ...rest } = props; diff --git a/packages/atomic-elements/src/components/Fields/MultiSelectField/MultiSelectField.component.tsx b/packages/atomic-elements/src/components/Fields/MultiSelectField/MultiSelectField.component.tsx index 24c796c9..972120a1 100644 --- a/packages/atomic-elements/src/components/Fields/MultiSelectField/MultiSelectField.component.tsx +++ b/packages/atomic-elements/src/components/Fields/MultiSelectField/MultiSelectField.component.tsx @@ -4,7 +4,7 @@ import { PressResponder } from "@react-aria/interactions"; import { ListBoxContext, ListStateContext } from "../../Dropdowns/ListBox"; import { OverlayTriggerStateContext } from "@components/Overlays/OverlayTrigger/context"; import { useRenderProps } from "@hooks/useRenderProps"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { BaseCollection, CollectionBuilder } from "@react-aria/collections"; import { Provider } from "@components/Internal/Provider"; import { PopoverContext } from "@components/Overlays/Popover/Popover.context"; @@ -38,7 +38,7 @@ export interface MultiSelectFieldComponent export const MultiSelectField = forwardRef(function MultiSelectField< T extends object >(props: MultiSelectFieldProps, ref: React.Ref) { - [props, ref] = useContextPropsV2(MultiSelectFieldContext, props, ref); + [props, ref] = useContextProps(MultiSelectFieldContext, props, ref); return ( diff --git a/packages/atomic-elements/src/components/Fields/SelectField/SelectField.component.tsx b/packages/atomic-elements/src/components/Fields/SelectField/SelectField.component.tsx index 213a09cd..3d5779a8 100644 --- a/packages/atomic-elements/src/components/Fields/SelectField/SelectField.component.tsx +++ b/packages/atomic-elements/src/components/Fields/SelectField/SelectField.component.tsx @@ -11,7 +11,7 @@ import { } from "@components/Dropdowns/ListBox"; import { OverlayTriggerStateContext } from "../../Overlays/OverlayTrigger/context"; import { useRenderProps } from "@hooks/useRenderProps"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { Provider } from "@components/Internal/Provider"; import { FieldErrorContext, @@ -51,7 +51,7 @@ export const SelectField = forwardRef(function SelectField( props: SelectFieldProps, ref: React.Ref ) { - [props, ref] = useContextPropsV2(SelectFieldContext, props, ref); + [props, ref] = useContextProps(SelectFieldContext, props, ref); return ( diff --git a/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.component.tsx b/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.component.tsx index e38b9ba9..bac5dc24 100644 --- a/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.component.tsx +++ b/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.component.tsx @@ -7,7 +7,7 @@ import { AriaProps, FieldInputProps } from "../../../types"; import { ChooseInput, ChooseLabel } from "../Inputs.styles"; import { CheckboxWrapper } from "./Checkbox.styles"; import { ErrorMessage, Message } from "../../Fields"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { CheckBoxContext } from "./Checkbox.context"; import { SlotProps } from "@hooks/useSlottedContext"; @@ -19,7 +19,7 @@ export interface CheckBoxProps /** Checkbox Component. Accepts a `ref` */ export const CheckBox = React.forwardRef( (props, ref) => { - [props, ref] = useContextPropsV2(CheckBoxContext, props, ref); + [props, ref] = useContextProps(CheckBoxContext, props, ref); const { children, diff --git a/packages/atomic-elements/src/components/Layout/Tabs/Tabs.component.tsx b/packages/atomic-elements/src/components/Layout/Tabs/Tabs.component.tsx index 522b5646..8983cb09 100644 --- a/packages/atomic-elements/src/components/Layout/Tabs/Tabs.component.tsx +++ b/packages/atomic-elements/src/components/Layout/Tabs/Tabs.component.tsx @@ -15,7 +15,7 @@ import { } from "@react-aria/collections"; import { useObjectRef } from "@react-aria/utils"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { useRenderProps } from "@hooks"; import { useCollectionRenderer } from "@hooks/useCollectionRenderer"; import { Provider } from "@components/Internal/Provider"; @@ -48,7 +48,7 @@ export const Tabs = forwardRef(function Tabs( props: TabsProps, ref: React.ForwardedRef ) { - [props, ref] = useContextPropsV2(TabsContext, props, ref); + [props, ref] = useContextProps(TabsContext, props, ref); return ( @@ -129,7 +129,7 @@ function Tab( ref: React.ForwardedRef, item: Node ) { - [props, ref] = useContextPropsV2(TabContext, props, ref); + [props, ref] = useContextProps(TabContext, props, ref); const state = useContext(TabsStateContext)!; const { key } = item; diff --git a/packages/atomic-elements/src/components/Overlays/Modal/Modal.component.tsx b/packages/atomic-elements/src/components/Overlays/Modal/Modal.component.tsx index c275ef28..a46824bf 100644 --- a/packages/atomic-elements/src/components/Overlays/Modal/Modal.component.tsx +++ b/packages/atomic-elements/src/components/Overlays/Modal/Modal.component.tsx @@ -19,7 +19,7 @@ import { ModalTitle, } from "./Modal.styles"; import classNames from "classnames"; -import { useContextPropsV2 } from "../../../hooks/useContextProps"; +import { useContextProps } from "../../../hooks/useContextProps"; import { ModalContext } from "./Modal.context"; import { OverlayTriggerStateContext } from "../OverlayTrigger/context"; import { useRenderProps } from "@hooks"; @@ -45,7 +45,7 @@ export interface ModalProps extends BaseModalProps { */ export function Modal(props: ModalProps) { let ref = useRef(null); - [props, ref] = useContextPropsV2(ModalContext, props, ref); + [props, ref] = useContextProps(ModalContext, props, ref); const { children, centered = false, variant = "default", ...rest } = props; diff --git a/packages/atomic-elements/src/components/Overlays/Popover/Popover.component.tsx b/packages/atomic-elements/src/components/Overlays/Popover/Popover.component.tsx index 24982298..7b686620 100644 --- a/packages/atomic-elements/src/components/Overlays/Popover/Popover.component.tsx +++ b/packages/atomic-elements/src/components/Overlays/Popover/Popover.component.tsx @@ -16,7 +16,7 @@ import { mergeProps } from "@react-aria/utils"; import { RenderBaseProps, HasVariant } from "../../../types"; import { useRenderProps } from "@hooks"; -import { useContextPropsV2 } from "@hooks/useContextProps"; +import { useContextProps } from "@hooks/useContextProps"; import { useResizeObserver } from "@hooks/useResizeObserver"; import { useForwardedRef } from "@hooks/useForwardedRef"; import { PopoverUnderlay, PopoverContent } from "./Popover.styles"; @@ -42,7 +42,7 @@ export interface PopoverProps /** A popover is an overlay element positioned relative to a target. */ export const Popover = React.forwardRef( (props: PopoverProps, ref) => { - [props, ref] = useContextPropsV2(PopoverContext, props, ref); + [props, ref] = useContextProps(PopoverContext, props, ref); const { triggerRef, ...rest } = props; diff --git a/packages/atomic-elements/src/components/Overlays/ToolTip/ToolTip.component.tsx b/packages/atomic-elements/src/components/Overlays/ToolTip/ToolTip.component.tsx index 1bca56f1..eacdfc29 100644 --- a/packages/atomic-elements/src/components/Overlays/ToolTip/ToolTip.component.tsx +++ b/packages/atomic-elements/src/components/Overlays/ToolTip/ToolTip.component.tsx @@ -11,7 +11,7 @@ import { Transition } from "react-transition-group"; import { ToolTipArrow, ToolTipOverlay } from "./ToolTip.styles"; import { RenderBaseProps } from "../../../types"; import { TooltipContext, TooltipStateContext } from "./ToolTip.context"; -import { useContextPropsV2 } from "../../../hooks/useContextProps"; +import { useContextProps } from "../../../hooks/useContextProps"; import { mergeProps } from "@react-aria/utils"; import { useRenderProps } from "@hooks"; @@ -37,7 +37,7 @@ export interface ToolTipProps /** A ToolTip component displays a popup with additional information when a user hovers over or focuses on an element. */ export function ToolTip(props: ToolTipProps) { let ref = useRef(null); - [props, ref] = useContextPropsV2(TooltipContext, props, ref); + [props, ref] = useContextProps(TooltipContext, props, ref); const { triggerRef, transitionDuration = 300, ...rest } = props; const state = useContext(TooltipStateContext); diff --git a/packages/atomic-elements/src/hooks/useContextProps.ts b/packages/atomic-elements/src/hooks/useContextProps.ts index ac556120..6a658a0b 100644 --- a/packages/atomic-elements/src/hooks/useContextProps.ts +++ b/packages/atomic-elements/src/hooks/useContextProps.ts @@ -1,28 +1,21 @@ -import { useContext } from "react"; import { mergeProps, mergeRefs, useObjectRef } from "@react-aria/utils"; -import { SlotProps, SlottedContextValue, useSlottedContext } from './useSlottedContext'; +import { + SlotProps, + SlottedContextValue, + useSlottedContext, +} from "./useSlottedContext"; type WithRef = T & { ref?: React.Ref }; export type ContextValue = SlottedContextValue>; -export function useContextProps( - context: React.Context, - props: T -) { - const contextProps = useContext(context); - - return mergeProps(contextProps, props); -} - - // from: https://github.com/adobe/react-spectrum/blob/c6bd2cb0808838a9f1f850b6c1ffe88465254222/packages/react-aria-components/src/utils.tsx#L180 /** Consume a value from a context & merge it with the provided props */ -export function useContextPropsV2( +export function useContextProps( context: React.Context>, props: T, ref: React.Ref ): [T, React.RefObject] { - const ctx = useSlottedContext(context, (props as SlotProps).slot) || {} + const ctx = useSlottedContext(context, (props as SlotProps).slot) || {}; const { ref: contextRef, ...contextProps } = ctx as WithRef; const mergedRef = useObjectRef(mergeRefs(ref, contextRef!));