refactor: rename use___ hooks to useA11y___

Unfortunately the last release was a big mistake because the hook names did not match the new convention I adopted in button/toggle-button. This fixes that. BREAKING CHANGE: rename useTarget() to useA11yTarget(), useTrigger() to useA11yTrigger(), useCloseButton() to useA11yCloseButton()
accessible-ui · Jul 12, 2020 · 0a0eb67 · 0a0eb67
1 parent 5d9c940
commit 0a0eb67
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -80,12 +80,12 @@ const Component = () => (
 
 ### Hooks
 
-| Hook                                                | Description                                                                                                                                                                      |
-| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`useDisclosure()`](#usedisclosure)                 | This hook provides the value of the disclosure's [DisclosureContextValue object](#disclosurecontextvalue).                                                                       |
-| [`useTarget()`](#usetargettarget-options)           | A React hook for creating a headless disclosure target to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).  |
-| [`useTrigger()`](#usetriggertarget-options)         | A React hook for creating a headless disclosure trigger to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html). |
-| [`useCloseButton()`](#useclosebuttontarget-options) | A React hook for creating a headless close button to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).       |
+| Hook                                                        | Description                                                                                                                                                                      |
+| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`useDisclosure()`](#usedisclosure)                         | This hook provides the value of the disclosure's [DisclosureContextValue object](#disclosurecontextvalue).                                                                       |
+| [`useA11yTarget()`](#usea11ytargettarget-options)           | A React hook for creating a headless disclosure target to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).  |
+| [`useA11yTrigger()`](#usea11ytriggertarget-options)         | A React hook for creating a headless disclosure trigger to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html). |
+| [`useA11yCloseButton()`](#usea11yclosebuttontarget-options) | A React hook for creating a headless close button to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).       |
 
 ### &lt;Disclosure&gt;
 
@@ -102,7 +102,7 @@ configuration options.
 | id          | `string`                  | `undefined` | No        | By default this component creates a unique id for you, as it is required for certain aria attributes. Supplying an id here overrides the auto id feature. |
 | children    | `React.ReactNode`         | `undefined` | No        | Your disclosure contents and any other children.                                                                                                          |
 
-### useTarget(target, options?)
+### useA11yTarget(target, options?)
 
 A React hook for creating a headless disclosure target to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).
 
@@ -111,12 +111,12 @@ A React hook for creating a headless disclosure target to [WAI-ARIA authoring pr
 | Argument | Type                                               | Required? | Description                 |
 | -------- | -------------------------------------------------- | --------- | --------------------------- |
 | target   | <code>React.RefObject&lt;T&gt; \| T \| null</code> | Yes       | A React ref or HTML element |
-| options  | [`UseTargetOptions`](#usetargetoptions)            | No        | Configuration options       |
+| options  | [`UseA11yTargetOptions`](#usea11ytargetoptions)    | No        | Configuration options       |
 
-#### UseTargetOptions
+#### UseA11yTargetOptions
 
 ```ts
-export interface UseTargetOptions {
+export interface UseA11yTargetOptions {
   /**
    * Adds this class name to props when the disclosure is open
    */
@@ -164,11 +164,11 @@ interface A11yProps {
 
 ```jsx harmony
 import * as React from 'react'
-import {useTarget} from '@accessible/disclosure'
+import {useA11yTarget} from '@accessible/disclosure'
 
 const MyTarget = () => {
   const ref = React.useRef(null)
-  const a11yProps = useTarget(ref, {preventScroll: true})
+  const a11yProps = useA11yTarget(ref, {preventScroll: true})
 
   return (
     <div ref={ref} {...a11yProps}>
@@ -212,7 +212,7 @@ This component wraps any React element and turns it into a disclosure target.
 // </div>
 ```
 
-### useTrigger(target, options?)
+### useA11yTrigger(target, options?)
 
 A React hook for creating a headless disclosure trigger to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).
 In addition to providing accessibility props to your component, this hook will add events
@@ -224,12 +224,12 @@ target element
 | Argument | Type                                               | Required? | Description                 |
 | -------- | -------------------------------------------------- | --------- | --------------------------- |
 | target   | <code>React.RefObject&lt;T&gt; \| T \| null</code> | Yes       | A React ref or HTML element |
-| options  | [`UseTriggerOptions`](#usetriggeroptions)          | No        | Configuration options       |
+| options  | [`UseA11yTriggerOptions`](#usea11ytriggeroptions)  | No        | Configuration options       |
 
-#### UseTriggerOptions
+#### UseA11yTriggerOptions
 
 ```ts
-export interface UseTriggerOptions<E = React.MouseEvent<any, MouseEvent>> {
+export interface UseA11yTriggerOptions<E = React.MouseEvent<any, MouseEvent>> {
   /**
    * Adds this class name to props when the disclosure is open
    */
@@ -272,11 +272,14 @@ interface A11yProps<E extends React.MouseEvent<any, MouseEvent>> {
 
 ```jsx harmony
 import * as React from 'react'
-import {useTrigger} from '@accessible/disclosure'
+import {useA11yTrigger} from '@accessible/disclosure'
 
 const MyTrigger = () => {
   const ref = React.useRef(null)
-  const a11yProps = useTrigger(ref, {openClass: 'open', closedClass: 'closed'})
+  const a11yProps = useA11yTrigger(ref, {
+    openClass: 'open',
+    closedClass: 'closed',
+  })
 
   return (
     <button ref={ref} {...a11yProps}>
@@ -315,7 +318,7 @@ of the disclosure target.
 // </button>
 ```
 
-### useCloseButton(target, options?)
+### useA11yCloseButton(target, options?)
 
 A React hook for creating a headless close button to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).
 In addition to providing accessibility props to your component, this hook will add events
@@ -324,15 +327,17 @@ target element
 
 #### Arguments
 
-| Argument | Type                                               | Required? | Description                 |
-| -------- | -------------------------------------------------- | --------- | --------------------------- |
-| target   | <code>React.RefObject&lt;T&gt; \| T \| null</code> | Yes       | A React ref or HTML element |
-| options  | [`UseCloseButtonOptions`](#useclosebuttonoptions)  | No        | Configuration options       |
+| Argument | Type                                                      | Required? | Description                 |
+| -------- | --------------------------------------------------------- | --------- | --------------------------- |
+| target   | <code>React.RefObject&lt;T&gt; \| T \| null</code>        | Yes       | A React ref or HTML element |
+| options  | [`UseA11yCloseButtonOptions`](#usea11yclosebuttonoptions) | No        | Configuration options       |
 
-#### UseCloseButtonOptions
+#### UseA11yCloseButtonOptions
 
 ```ts
-export interface UseCloseButtonOptions<E = React.MouseEvent<any, MouseEvent>> {
+export interface UseA11yCloseButtonOptions<
+  E = React.MouseEvent<any, MouseEvent>
+> {
   /**
    * Adds an onClick handler in addition to the default one that
    * closes the disclosure.
@@ -358,11 +363,11 @@ interface A11yProps<E extends React.MouseEvent<any, MouseEvent>> {
 
 ```jsx harmony
 import * as React from 'react'
-import {useCloseButton} from '@accessible/disclosure'
+import {useA11yCloseButton} from '@accessible/disclosure'
 
 const MyTrigger = () => {
   const ref = React.useRef(null)
-  const a11yProps = useCloseButton(ref, {
+  const a11yProps = useA11yCloseButton(ref, {
     onClick: () => console.log('Closing!'),
   })
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -73,9 +73,9 @@ function portalize(
  * @param target A React ref or HTML element
  * @param options Configuration options
  */
-export function useTarget<T extends HTMLElement>(
+export function useA11yTarget<T extends HTMLElement>(
   target: React.RefObject<T> | T | null,
-  options: UseTargetOptions = {}
+  options: UseA11yTargetOptions = {}
 ) {
   const {
     preventScroll,
@@ -122,7 +122,7 @@ export function Target({
 }: TargetProps) {
   const ref = React.useRef<HTMLElement>(null)
   const childProps = children.props
-  const a11yProps = useTarget(ref, {
+  const a11yProps = useA11yTarget(ref, {
     openClass: clsx(childProps.className, openClass) || void 0,
     closedClass: clsx(childProps.className, closedClass) || void 0,
     openStyle: childProps.style
@@ -159,12 +159,12 @@ export function Target({
  * @param target A React ref or HTML element
  * @param options Configuration options
  */
-export function useCloseButton<
+export function useA11yCloseButton<
   T extends HTMLElement,
   E extends React.MouseEvent<T, MouseEvent>
 >(
   target: React.RefObject<T> | T | null,
-  {onClick}: UseCloseButtonOptions<E> = {}
+  {onClick}: UseA11yCloseButtonOptions<E> = {}
 ) {
   const {close, isOpen, id} = useDisclosure()
   return Object.assign(
@@ -187,7 +187,7 @@ export function useCloseButton<
 export function CloseButton({children}: CloseButtonProps) {
   const ref = React.useRef<HTMLElement>(null)
   const childProps = children.props
-  const a11yProps = useCloseButton(ref, {
+  const a11yProps = useA11yCloseButton(ref, {
     onClick: childProps.onClick,
   })
 
@@ -215,10 +215,13 @@ export function CloseButton({children}: CloseButtonProps) {
  * @param target A React ref or HTML element
  * @param options Configuration options
  */
-export function useTrigger<
+export function useA11yTrigger<
   T extends HTMLElement,
   E extends React.MouseEvent<T, MouseEvent>
->(target: React.RefObject<T> | T | null, options: UseTriggerOptions<E> = {}) {
+>(
+  target: React.RefObject<T> | T | null,
+  options: UseA11yTriggerOptions<E> = {}
+) {
   const {openClass, closedClass, openStyle, closedStyle, onClick} = options
   const {isOpen, id, toggle} = useDisclosure()
   const prevOpen = usePrevious(isOpen)
@@ -251,7 +254,7 @@ export function Trigger({
 }: TriggerProps) {
   const ref = React.useRef<HTMLElement>(null)
   const childProps = children.props
-  const a11yProps = useTrigger(ref, {
+  const a11yProps = useA11yTrigger(ref, {
     openClass: clsx(childProps.className, openClass) || void 0,
     closedClass: clsx(childProps.className, closedClass) || void 0,
     openStyle: childProps.style
@@ -332,7 +335,7 @@ export interface DisclosureProps {
   children: React.ReactNode
 }
 
-export interface UseTriggerOptions<E = React.MouseEvent<any, MouseEvent>> {
+export interface UseA11yTriggerOptions<E = React.MouseEvent<any, MouseEvent>> {
   /**
    * Adds this class name to props when the disclosure is open
    */
@@ -356,15 +359,16 @@ export interface UseTriggerOptions<E = React.MouseEvent<any, MouseEvent>> {
   onClick?: (e: E) => any
 }
 
-export interface TriggerProps extends Omit<UseTriggerOptions<any>, 'onClick'> {
+export interface TriggerProps
+  extends Omit<UseA11yTriggerOptions<any>, 'onClick'> {
   /**
    * The child is cloned by this component and has aria attributes injected
    * into its props as well as the events defined above.
    */
   children: JSX.Element | React.ReactElement
 }
 
-export interface UseTargetOptions {
+export interface UseA11yTargetOptions {
   /**
    * Adds this class name to props when the disclosure is open
    */
@@ -394,7 +398,7 @@ export interface UseTargetOptions {
   closeOnEscape?: boolean
 }
 
-export interface TargetProps extends UseTargetOptions {
+export interface TargetProps extends UseA11yTargetOptions {
   /**
    * When `true` this will render the disclosure into a React portal with the
    * id `#portals`. You can render it into any portal by providing its query
@@ -414,7 +418,9 @@ export interface TargetProps extends UseTargetOptions {
   children: JSX.Element | React.ReactElement
 }
 
-export interface UseCloseButtonOptions<E = React.MouseEvent<any, MouseEvent>> {
+export interface UseA11yCloseButtonOptions<
+  E = React.MouseEvent<any, MouseEvent>
+> {
   /**
    * Adds an onClick handler in addition to the default one that
    * closes the disclosure.