diff --git a/docs/pages/components/accordion.mdx b/docs/pages/components/accordion.mdx index 4982ef476b..085263ac9f 100644 --- a/docs/pages/components/accordion.mdx +++ b/docs/pages/components/accordion.mdx @@ -23,8 +23,8 @@ Built with [Ariakit](https://ariakit.org/components/disclosure) for a better acc ```jsx function () { - const store = useAccordionStore() - const store2 = useAccordionStore() + const store = useAccordion() + const store2 = useAccordion() return ( <> @@ -53,11 +53,11 @@ function () { ## Open at start -Add `defaultOpen` options on `useAccordionStore` to open at start the accordion +Add `defaultOpen` options on `useAccordion` to open at start the accordion ```jsx function () { - const store = useAccordionStore({ defaultOpen: true }) + const store = useAccordion({ defaultOpen: true }) return ( @@ -77,7 +77,7 @@ Note that the custom icon's size property will be set to small ```jsx function () { - const store = useAccordionStore() + const store = useAccordion() return ( }> diff --git a/docs/pages/components/popover.mdx b/docs/pages/components/popover.mdx index 4a32f25479..9701dea0e9 100644 --- a/docs/pages/components/popover.mdx +++ b/docs/pages/components/popover.mdx @@ -22,11 +22,11 @@ Popover from [Ariakit](https://ariakit.org/components/popover) with a really nic ## Usage -Use `usePopoverStore`, `Popover`, `Popover.Content` and `Popover.Trigger` to create a simple Popover. +Use `usePopover`, `Popover`, `Popover.Content` and `Popover.Trigger` to create a simple Popover. ```jsx function() { - const store = usePopoverStore() + const store = usePopover() return ( <> @@ -50,7 +50,7 @@ Use `Popover.Title` props to create a predefined title block. ```jsx function() { - const store = usePopoverStore({ placement: 'top' }) + const store = usePopover({ placement: 'top' }) return ( <> @@ -75,7 +75,7 @@ function() { ```jsx function() { - const store = usePopoverStore({ withCloseButton: true }) + const store = usePopover({ withCloseButton: true }) return ( <> @@ -97,11 +97,11 @@ function() { ## Hover to open -Use `triggerMethod: 'hover'` on `usePopoverStore` to open and close the popover by hovering it. +Use `triggerMethod: 'hover'` on `usePopover` to open and close the popover by hovering it. ```jsx function() { - const store = usePopoverStore({ triggerMethod: 'hover' }) + const store = usePopover({ triggerMethod: 'hover' }) return ( <> @@ -121,13 +121,13 @@ function() { } ``` -## usePopoverStore +## usePopover -We use `usePopoverStore` from [Ariakit Popover](https://ariakit.org/components/popover) for the state of the popover. +We use `usePopover` from [Ariakit Popover](https://ariakit.org/components/popover) for the state of the popover. -Pass options to `usePopoverStore` : +Pass options to `usePopover` : -- `defaultOpen`: e.g. `const store = usePopoverStore({ defaultOpen: true })` +- `defaultOpen`: e.g. `const store = usePopover({ defaultOpen: true })` - `triggerMethod` : `click` or `hover` - `withCloseButton` : `bool`, show/hide cross to close popover diff --git a/packages/Accordion/src/index.tsx b/packages/Accordion/src/index.tsx index 1ef3942efc..83654e400c 100644 --- a/packages/Accordion/src/index.tsx +++ b/packages/Accordion/src/index.tsx @@ -10,7 +10,7 @@ export interface AccordionOptions { title: string | JSX.Element icon?: JSX.Element /** - * store from useAccordionStore() + * store from useAccordion() */ store: Ariakit.DisclosureStore } @@ -41,8 +41,8 @@ export const Accordion = forwardRef<'div', AccordionProps>( } ) -export function useAccordionStore(options?: Ariakit.DisclosureStoreProps): Ariakit.DisclosureStore { - const disclosureStore = Ariakit.useDisclosureStore({ ...options, animated: true }) +export function useAccordion(options?: Ariakit.DisclosureStoreProps): Ariakit.DisclosureStore { + const accordion = Ariakit.useDisclosureStore({ ...options, animated: true }) - return disclosureStore + return accordion } diff --git a/packages/Accordion/tests/index.test.tsx b/packages/Accordion/tests/index.test.tsx index ed5a4bc673..1277b566fa 100644 --- a/packages/Accordion/tests/index.test.tsx +++ b/packages/Accordion/tests/index.test.tsx @@ -2,7 +2,7 @@ import React from 'react' import { fireEvent, screen } from '@testing-library/react' import { render, renderHook } from '../../../utils/tests' -import { Accordion, useAccordionStore } from '../src' +import { Accordion, useAccordion } from '../src' const content = 'content' const title = 'title' @@ -11,7 +11,7 @@ describe('', () => { it('should have correct attribute on click on element', () => { const { result: { current: store }, - } = renderHook(() => useAccordionStore()) + } = renderHook(() => useAccordion()) render( @@ -36,7 +36,7 @@ describe('', () => { it('should have correct attribute on open at start', () => { const { result: { current: store }, - } = renderHook(() => useAccordionStore({ defaultOpen: true })) + } = renderHook(() => useAccordion({ defaultOpen: true })) render( diff --git a/packages/EmojiPicker/src/index.tsx b/packages/EmojiPicker/src/index.tsx index b06785b87e..24b3308e92 100644 --- a/packages/EmojiPicker/src/index.tsx +++ b/packages/EmojiPicker/src/index.tsx @@ -1,11 +1,6 @@ import React, { Children, cloneElement, useCallback, useMemo } from 'react' import { useTabState } from '@welcome-ui/tabs' -import { - Popover, - usePopoverStore, - UsePopoverStoreOptions, - UsePopoverStoreReturn, -} from '@welcome-ui/popover' +import { Popover, usePopover, UsePopoverOptions, UsePopoverReturn } from '@welcome-ui/popover' import { Tab } from '@welcome-ui/tabs' import { TabInitialState } from 'reakit' import { CreateWuiProps, forwardRef } from '@welcome-ui/system' @@ -24,7 +19,7 @@ export interface EmojiPickerOptions { popoverAriaLabel?: string tabListAriaLabel?: string value: string | null - store: UsePopoverStoreReturn + store: UsePopoverReturn } export type EmojiPickerProps = CreateWuiProps<'div', EmojiPickerOptions> @@ -137,8 +132,8 @@ const EmojiPickerComponent = forwardRef<'div', EmojiPickerProps>( EmojiPickerComponent.displayName = 'EmojiPicker' -export function useEmojiPicker(options?: UsePopoverStoreOptions): UsePopoverStoreReturn { - return usePopoverStore({ +export function useEmojiPicker(options?: UsePopoverOptions): UsePopoverReturn { + return usePopover({ placement: 'bottom-start', ...options, }) diff --git a/packages/Popover/package.json b/packages/Popover/package.json index 25b4bfbc52..afdf854808 100644 --- a/packages/Popover/package.json +++ b/packages/Popover/package.json @@ -59,6 +59,6 @@ }, "gitHead": "974e7bfd71f8cfe846cbffd678c3860a8952f9e9", "sideEffects": false, - "component": "Popover, usePopoverStore", + "component": "Popover, usePopover", "homepage": "https://welcome-ui.com/components/popover" } diff --git a/packages/Popover/src/Trigger.tsx b/packages/Popover/src/Trigger.tsx index 66e09119bc..b7b3afe96d 100644 --- a/packages/Popover/src/Trigger.tsx +++ b/packages/Popover/src/Trigger.tsx @@ -1,10 +1,10 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system' import React, { useLayoutEffect } from 'react' -import { UsePopoverStoreReturn } from './usePopoverStore' +import { UsePopoverReturn } from './usePopover' import * as S from './styles' -export type TriggerProps = CreateWuiProps<'button', { store: UsePopoverStoreReturn }> +export type TriggerProps = CreateWuiProps<'button', { store: UsePopoverReturn }> export const Trigger = forwardRef<'button', TriggerProps>(({ as, store, ...rest }, ref) => { const { triggerMethod } = store diff --git a/packages/Popover/src/index.tsx b/packages/Popover/src/index.tsx index 1bbf0df3a9..9972e51c4c 100644 --- a/packages/Popover/src/index.tsx +++ b/packages/Popover/src/index.tsx @@ -6,12 +6,12 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system' import * as S from './styles' import { Trigger } from './Trigger' -import { UsePopoverStoreReturn } from './usePopoverStore' +import { UsePopoverReturn } from './usePopover' export interface PopoverOptions { /** call a function when popover closed */ onClose?: () => void - store: UsePopoverStoreReturn + store: UsePopoverReturn } export type PopoverProps = CreateWuiProps<'div', PopoverOptions> @@ -73,4 +73,4 @@ export const Popover = Object.assign(PopoverComponent, { Trigger: Trigger, }) -export * from './usePopoverStore' +export * from './usePopover' diff --git a/packages/Popover/src/usePopoverStore.ts b/packages/Popover/src/usePopover.ts similarity index 84% rename from packages/Popover/src/usePopoverStore.ts rename to packages/Popover/src/usePopover.ts index 59fa142b28..72d51bb56d 100644 --- a/packages/Popover/src/usePopoverStore.ts +++ b/packages/Popover/src/usePopover.ts @@ -1,15 +1,15 @@ import { useCallback, useRef } from 'react' import * as Ariakit from '@ariakit/react' -export interface UsePopoverStoreOptions extends Ariakit.PopoverStoreProps { +export interface UsePopoverOptions extends Ariakit.PopoverStoreProps { hideTimeout?: number showTimeout?: number triggerMethod?: 'hover' | 'click' withCloseButton?: boolean } -export type UsePopoverStoreReturn = Ariakit.PopoverStore & - Pick & { +export type UsePopoverReturn = Ariakit.PopoverStore & + Pick & { /** * Custom hide function who call ariakit hide after a timeout if is hoverable, or not **/ @@ -20,7 +20,7 @@ export type UsePopoverStoreReturn = Ariakit.PopoverStore & show: () => void } -export const usePopoverStore: (props?: UsePopoverStoreOptions) => UsePopoverStoreReturn = ({ +export const usePopover: (props?: UsePopoverOptions) => UsePopoverReturn = ({ animated = 150, hideTimeout = 300, showTimeout = 500, diff --git a/packages/Popover/tests/index.test.tsx b/packages/Popover/tests/index.test.tsx index 9a017c7e77..cdefa76aad 100644 --- a/packages/Popover/tests/index.test.tsx +++ b/packages/Popover/tests/index.test.tsx @@ -2,13 +2,13 @@ import React from 'react' import { fireEvent, screen } from '@testing-library/react' import { render } from '../../../utils/tests' -import { Popover, usePopoverStore } from '../src' +import { Popover, usePopover } from '../src' const contentText = 'Popover open' const buttonText = 'open' const PopoverWrapper = () => { - const store = usePopoverStore() + const store = usePopover() return ( <>