Skip to content

Commit

Permalink
chore(release): 3.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
jaredLunde committed Aug 11, 2020
1 parent 97ab550 commit 0edd3f7
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 9 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## [3.0.0](https://github.com/accessible-ui/tabs/compare/v0.1.0...v3.0.0) (2020-08-11)

### ⚠ BREAKING CHANGES

- Removes `useDisabled()`, `useControls()`, and `useIsActive()` hooks

- remove superfluous hooks ([97ab550](https://github.com/accessible-ui/tabs/commit/97ab550e9247b6aa50ab11801cd1c0d8bf8f1bea))

## 2.0.2 (2020-08-11)

### Bug Fixes
Expand Down
16 changes: 8 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const Component = () => (
| [`useTabs()`](#usetabs) | This hook returns the value of the [TabsContext object](#tabscontextvalue). |
| [`useTab()`](#usetabindex-number) | This hook returns the value of the [TabContext object](#tabcontextvalue). |

### `<Tabs>`
### &lt;Tabs&gt;

This component creates the context for your tabs and contains some configuration options. You'll need to add
[`<Tab>`](#tab) and [`<Panel>`](#panel) as children in order to actually create tabs.
Expand All @@ -98,15 +98,15 @@ This component creates the context for your tabs and contains some configuration
| onChange | `(active: number) => void` | `undefined` | No | Called each time the active tab changes. It provides the active tab `index` as its only argument. |
| children | `React.ReactNode[]` | `undefined` | Yes | You can define any children here with some caveats listed elsewhere. |

### `<TabList>`
### &lt;TabList&gt;

#### Props

| Prop | Type | Default | Required? | Description |
| -------- | -------------------- | ----------- | --------- | -------------------------------------------------------------------------------- |
| children | `React.ReactElement` | `undefined` | Yes | The child is cloned by this component and given a property for `role='tablist'`. |

### `<Tab>`
### &lt;Tab&gt;

This component clones any React element and turns it into a tab that controls the visible state of a [`<Panel>`](#panel). It must be a child of [`<Tabs>`](#tabs) and all
tabs must be adjacent in the tree. Each tab has a corresponding [`<Panel>`](#panel) that shares the same index.
Expand Down Expand Up @@ -176,7 +176,7 @@ const MyTabs = () => (
| onDelete | `(event: KeyboardEvent) => void` | `undefined` | No | This callback will fire if a user presses the `Delete` key on their keyboard when this tab (not the panel) is focused. |
| children | `React.ReactElement` | `undefined` | Yes | The child is cloned by this component and has aria attributes injected into its props as well as keyboard event handlers for navigating between tabs. |

### `<Panel>`
### &lt;Panel&gt;

This component clones its child and turns it into a panel that corresponds to a [`<Tab>`](#tab) with the same
index. All panels must be adjacent in the tree unless an `index` prop is defined. For example:
Expand Down Expand Up @@ -204,12 +204,12 @@ index. All panels must be adjacent in the tree unless an `index` prop is defined
| index | `number` | `undefined` | No | Setting an index here overrides the default index created when this component mounts. Indexes are used to match panels to their corresponding [`<Tab>`](#tab). I would recommend not setting this property and letting the library handle it automatically. |
| children | `React.ReactElement` | `undefined` | Yes | The child is cloned by this component and has aria attributes injected into its props and will have its visible state controlled by the [`<Tab>`](#tab) component with the same index. |

### `useTab(index: number)`
### useTab(index: number)

Returns [`TabContext object`](#tabcontextvalue) for the [`<Tab>`](#tab) corresponding to the provided `index`.
It must be used within a child of [`<Tabs>`](#tabs).

### `TabContextValue`
### TabContextValue

```typescript
interface TabContextValue {
Expand All @@ -228,11 +228,11 @@ interface TabContextValue {
}
```

### `useTabs()`
### useTabs()

This hook returns the value of the [TabsContext object](#tabscontextvalue). This hook must be within a child of [`<Tabs>`](#tabs).

### `TabsContextValue`
### TabsContextValue

```typescript
interface TabsContextValue {
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@accessible/tabs",
"version": "2.0.2",
"version": "3.0.0",
"homepage": "https://github.com/accessible-ui/tabs#readme",
"repository": "github:accessible-ui/tabs",
"bugs": "https://github.com/accessible-ui/tabs/issues",
Expand Down
129 changes: 129 additions & 0 deletions types/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
import * as React from 'react'
export interface TabsContextValue {
tabs: TabState[]
registerTab: (
index: number,
element: HTMLElement,
id?: string,
disabled?: boolean
) => () => void
active: number | undefined
activate: (index: number | undefined) => void
manualActivation: boolean
preventScroll: boolean
}
export declare const TabsContext: React.Context<TabsContextValue>,
TabsConsumer: React.Consumer<TabsContextValue>,
useTabs: () => TabsContextValue
export interface TabsProps {
active?: number
defaultActive?: number
manualActivation?: boolean
preventScroll?: boolean
onChange?: (active: number | undefined) => void
children: React.ReactNode | React.ReactNode[] | JSX.Element | JSX.Element[]
}
export declare type TabState =
| {
element?: HTMLElement
id?: string
disabled?: boolean
}
| undefined
export declare function Tabs({
active,
defaultActive,
manualActivation,
preventScroll,
onChange,
children,
}: TabsProps): JSX.Element
export declare namespace Tabs {
var displayName: string
}
export interface TabControls {
activate: () => void
}
interface TabContextValue {
id?: string
tabRef?: HTMLElement
index: number
activate: () => void
isActive: boolean
disabled: boolean
}
export declare function useTab(index: number): TabContextValue
export interface TabProps {
id?: string
index?: number
disabled?: boolean
activeClass?: string
inactiveClass?: string
activeStyle?: React.CSSProperties
inactiveStyle?: React.CSSProperties
onDelete?: (event: KeyboardEvent) => void
children: React.ReactElement | JSX.Element
}
export declare function Tab({
id,
index,
disabled,
activeClass,
inactiveClass,
activeStyle,
inactiveStyle,
onDelete,
children,
}: TabProps): JSX.Element
export declare namespace Tab {
var displayName: string
}
export interface TabListProps {
children: React.ReactElement | JSX.Element
}
export declare function TabList({
children,
}: TabListProps): React.ReactElement<
any,
| string
| ((
props: any
) => React.ReactElement<
any,
string | any | (new (props: any) => React.Component<any, any, any>)
> | null)
| (new (props: any) => React.Component<any, any, any>)
>
export declare namespace TabList {
var displayName: string
}
export interface PanelProps {
index?: number
activeClass?: string
inactiveClass?: string
activeStyle?: React.CSSProperties
inactiveStyle?: React.CSSProperties
children: React.ReactElement | JSX.Element
}
export declare function Panel({
index,
activeClass,
inactiveClass,
activeStyle,
inactiveStyle,
children,
}: PanelProps): React.ReactElement<
any,
| string
| ((
props: any
) => React.ReactElement<
any,
string | any | (new (props: any) => React.Component<any, any, any>)
> | null)
| (new (props: any) => React.Component<any, any, any>)
>
export declare namespace Panel {
var displayName: string
}
export {}

0 comments on commit 0edd3f7

Please sign in to comment.