Merge pull request #55 from atomicjolt/sc/remove-use-context-props

Remove old useContextProps
atomicjolt · Dec 3, 2024 · a4e5a93 · a4e5a93
2 parents 368f8f0 + 2658649
commit a4e5a93
Show file tree

Hide file tree

Showing 25 changed files with 65 additions and 82 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
@@ -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<HTMLDivElement>(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
@@ -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<HTMLButtonElement, ButtonProps>(
   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
@@ -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<HTMLButtonElement, IconButtonProps>(
   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
@@ -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<T extends object>(
   ref: React.Ref<HTMLUListElement>
 ) {
   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
@@ -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<T extends object>(
   props: MenuProps<T>,
   ref: React.Ref<HTMLUListElement>
 ) {
-  [props, ref] = useContextPropsV2(MenuContext, props, ref);
+  [props, ref] = useContextProps(MenuContext, props, ref);
 
   return (
     <CollectionBuilder content={<Collection {...props} />}>

diff --git 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/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<HTMLParagraphElement>
 ) {
-  [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
@@ -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<HTMLInputElement>
 ) {
-  [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
@@ -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<HTMLLabelElement>
 ) {
-  [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
@@ -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<HTMLParagraphElement>
 ) {
-  [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
@@ -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<HTMLTextAreaElement>
 ) {
-  [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
@@ -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";
@@ -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,9 +34,9 @@ import { ComboInputContext } from "../ComboInput";
 import { ComboBoxFieldWrapper } from "./ComboBoxField.styles";
 
 export const ComboBoxField = forwardRef(function ComboBoxField<
-  T extends object,
+  T extends object
 >(props: ComboBoxFieldProps<T>, ref: React.Ref<HTMLInputElement>) {
-  [props, ref] = useContextPropsV2(ComboBoxFieldContext, props, ref);
+  [props, ref] = useContextProps(ComboBoxFieldContext, props, ref);
 
   return (
     <CollectionBuilder content={props.children}>

diff --git 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<HTMLDivElement>
 ) {
-  [props, ref] = useContextPropsV2(ComboInputContext, props, ref);
+  [props, ref] = useContextProps(ComboInputContext, props, ref);
 
   const { className, padding = [], children, inputRef, ...rest } = props;
 

diff --git a/...ges/atomic-elements/src/components/Fields/MultiSelectField/MultiSelectField.component.tsx b/...ges/atomic-elements/src/components/Fields/MultiSelectField/MultiSelectField.component.tsx
@@ -4,10 +4,10 @@ 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/context";
+import { PopoverContext } from "@components/Overlays/Popover/Popover.context";
 import { ButtonContext } from "@components/Buttons/Button/Button.context";
 import { DropdownButton } from "@components/Internal/DropdownButton";
 import {
@@ -38,7 +38,7 @@ export interface MultiSelectFieldComponent
 export const MultiSelectField = forwardRef(function MultiSelectField<
   T extends object
 >(props: MultiSelectFieldProps<T>, ref: React.Ref<HTMLButtonElement>) {
-  [props, ref] = useContextPropsV2(MultiSelectFieldContext, props, ref);
+  [props, ref] = useContextProps(MultiSelectFieldContext, props, ref);
 
   return (
     <CollectionBuilder content={props.children}>

diff --git a/packages/atomic-elements/src/components/Fields/SelectField/SelectField.component.tsx b/packages/atomic-elements/src/components/Fields/SelectField/SelectField.component.tsx
@@ -11,14 +11,14 @@ 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,
   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";
@@ -51,7 +51,7 @@ export const SelectField = forwardRef(function SelectField<T extends object>(
   props: SelectFieldProps<T>,
   ref: React.Ref<HTMLButtonElement>
 ) {
-  [props, ref] = useContextPropsV2(SelectFieldContext, props, ref);
+  [props, ref] = useContextProps(SelectFieldContext, props, ref);
 
   return (
     <CollectionBuilder content={props.children}>

diff --git 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<HTMLInputElement, CheckBoxProps>(
   (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
@@ -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<T extends object>(
   props: TabsProps<T>,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
-  [props, ref] = useContextPropsV2(TabsContext, props, ref);
+  [props, ref] = useContextProps(TabsContext, props, ref);
 
   return (
     <CollectionBuilder content={props.children}>
@@ -129,7 +129,7 @@ function Tab<T extends object>(
   ref: React.ForwardedRef<HTMLDivElement>,
   item: Node<T>
 ) {
-  [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
@@ -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/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
@@ -10,6 +10,8 @@ import {
   OverlayTriggerState,
   useOverlayTriggerState,
 } from "react-stately";
+import { useIsHidden } from "@react-aria/collections";
+
 import { mergeProps } from "@react-aria/utils";
 
 import { RenderBaseProps, HasVariant } from "../../../types";
@@ -18,10 +20,9 @@ import { useContextProps } 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<HTMLDivElement, PopoverProps>(
   (props: PopoverProps, ref) => {
-    const contextProps = useContextProps(PopoverContext, props);
-    const { triggerRef, ...rest } = contextProps;
+    [props, ref] = useContextProps(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
@@ -0,0 +1,4 @@
+import { PopoverProps } from ".";
+import { createComponentContext } from "@utils/index";
+
+export const PopoverContext = createComponentContext<PopoverProps>();