Skip to content

Commit

Permalink
chore: General refactors on Composite components (#604)
Browse files Browse the repository at this point in the history
  • Loading branch information
diegohaz committed Mar 30, 2020
1 parent 2811071 commit 3d5b3ed
Show file tree
Hide file tree
Showing 79 changed files with 5,420 additions and 3,007 deletions.
22 changes: 15 additions & 7 deletions README.md
Expand Up @@ -14,11 +14,6 @@
<a href="https://reakit.io"><strong>Explore website »</strong></a>
</p>

<a href="https://reakit.io">
<img src="https://user-images.githubusercontent.com/3068563/57511686-36d9e080-72e0-11e9-912b-8b67ddd135e2.png" alt="Reakit thumbnail" width="100%" />
</a>

<br>
<br>

<p align="center">
Expand Down Expand Up @@ -82,6 +77,19 @@ By donating $5 or more you [become a backer](https://opencollective.com/reakit)
<a href="https://opencollective.com/reakit/backer/23/website"><img src="https://opencollective.com/reakit/backer/23/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/24/website"><img src="https://opencollective.com/reakit/backer/24/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/25/website"><img src="https://opencollective.com/reakit/backer/25/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/26/website"><img src="https://opencollective.com/reakit/backer/26/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/27/website"><img src="https://opencollective.com/reakit/backer/27/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/28/website"><img src="https://opencollective.com/reakit/backer/28/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/29/website"><img src="https://opencollective.com/reakit/backer/29/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/30/website"><img src="https://opencollective.com/reakit/backer/30/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/31/website"><img src="https://opencollective.com/reakit/backer/31/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/32/website"><img src="https://opencollective.com/reakit/backer/32/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/33/website"><img src="https://opencollective.com/reakit/backer/33/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/34/website"><img src="https://opencollective.com/reakit/backer/34/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/35/website"><img src="https://opencollective.com/reakit/backer/35/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/36/website"><img src="https://opencollective.com/reakit/backer/36/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/37/website"><img src="https://opencollective.com/reakit/backer/37/avatar.svg"></a>
<a href="https://opencollective.com/reakit/backer/38/website"><img src="https://opencollective.com/reakit/backer/38/avatar.svg"></a>
</p>


Expand Down Expand Up @@ -129,9 +137,9 @@ Play with this on [CodeSandbox](https://codesandbox.io/s/m4n32vjkoj) and read th

## Contributors

This project exists thanks to all the people who contribute.
This project exists thanks to all the people who contribute. Learn more on the [contributing guide](https://github.com/reakit/reakit/blob/master/CONTRIBUTING.md).

<a href="https://github.com/reakit/reakit/graphs/contributors"><img src="https://opencollective.com/reakit/contributors.svg?width=1023&button=false" /></a>
<a href="https://github.com/reakit/reakit/graphs/contributors"><img src="https://opencollective.com/reakit/contributors.svg?width=1227&button=false" /></a>

<img src="https://user-images.githubusercontent.com/3068563/55114952-118f6b00-50c2-11e9-8879-d047e5686284.png" alt="reakit" height="12" /> [Logo](https://github.com/reakit/reakit/tree/master/logo) by [**Leonardo Elias**](https://github.com/leonardoelias).

Expand Down
3 changes: 2 additions & 1 deletion packages/reakit-playground/src/__deps/reakit-utils.ts
Expand Up @@ -33,5 +33,6 @@ export default {
"reakit-utils/getActiveElement": require("reakit-utils/getActiveElement"),
"reakit-utils/cx": require("reakit-utils/cx"),
"reakit-utils/createOnKeyDown": require("reakit-utils/createOnKeyDown"),
"reakit-utils/closest": require("reakit-utils/closest")
"reakit-utils/closest": require("reakit-utils/closest"),
"reakit-utils/applyState": require("reakit-utils/applyState")
};
1 change: 1 addition & 0 deletions packages/reakit-system-bootstrap/src/Menu.tsx
Expand Up @@ -29,6 +29,7 @@ export function useMenuBarProps(
const isHorizontal = options.orientation === "horizontal";

const menuBar = css`
position: relative;
display: flex;
flex-direction: ${isHorizontal ? "row" : "column"};
white-space: nowrap;
Expand Down
16 changes: 0 additions & 16 deletions packages/reakit-system/README.md
Expand Up @@ -34,29 +34,13 @@ const useA = createHook({ name: "A", compose: useBox });
#### Table of Contents

- [createComponent](#createcomponent)
- [Parameters](#parameters)
- [Examples](#examples)
- [createHook](#createhook)
- [Parameters](#parameters-1)
- [Examples](#examples-1)
- [mergeSystem](#mergesystem)
- [Parameters](#parameters-2)
- [Examples](#examples-2)
- [SystemProvider](#systemprovider)
- [Parameters](#parameters-3)
- [Examples](#examples-3)
- [useCreateElement](#usecreateelement)
- [Parameters](#parameters-4)
- [Examples](#examples-4)
- [useOptions](#useoptions)
- [Parameters](#parameters-5)
- [Examples](#examples-5)
- [useProps](#useprops)
- [Parameters](#parameters-6)
- [Examples](#examples-6)
- [useToken](#usetoken)
- [Parameters](#parameters-7)
- [Examples](#examples-7)

### createComponent

Expand Down
2 changes: 1 addition & 1 deletion packages/reakit-system/package.json
Expand Up @@ -21,7 +21,7 @@
"lint": "eslint . --ext js,ts,tsx",
"clean": "../../scripts/build/clean.js",
"build": "../../scripts/build/build.js",
"docs": "documentation readme src/*.{ts,tsx} --section=API --parse-extension ts --parse-extension tsx",
"docs": "documentation readme src/*.{ts,tsx} --markdown-toc-max-depth=2 --section=API --parse-extension ts --parse-extension tsx",
"preversion": "yarn lint && yarn test && yarn docs && yarn build",
"postpublish": "yarn clean"
},
Expand Down
6 changes: 5 additions & 1 deletion packages/reakit-system/src/createHook.ts
Expand Up @@ -85,7 +85,6 @@ export function createHook<O, P>(options: CreateHookOptions<O, P>) {
if (options.name) {
htmlProps = useProps(options.name, hookOptions, htmlProps) as P;
}

if (options.compose) {
if (options.useComposeOptions) {
hookOptions = options.useComposeOptions(hookOptions, htmlProps);
Expand Down Expand Up @@ -139,6 +138,11 @@ export function createHook<O, P>(options: CreateHookOptions<O, P>) {
}
}

// @ts-ignore
if (prev.children !== next.children) {
return false;
}

return deepEqual(prev, next);
};
}
Expand Down
4 changes: 2 additions & 2 deletions packages/reakit-test-utils/src/blur.ts
@@ -1,4 +1,4 @@
import { warning } from "reakit-utils";
import { warning, getActiveElement } from "reakit-utils";
import { DirtiableElement } from "./__utils/types";
import { fireEvent } from "./fireEvent";
import { act } from "./act";
Expand All @@ -10,7 +10,7 @@ export function blur(element?: DirtiableElement | null) {

if (!element) return;
if (element.tagName === "BODY") return;
if (element.ownerDocument?.activeElement !== element) {
if (getActiveElement(element) !== element) {
warning(
true,
"[reakit-test-utils/blur]",
Expand Down
4 changes: 2 additions & 2 deletions packages/reakit-test-utils/src/focus.ts
@@ -1,12 +1,12 @@
import { isFocusable } from "reakit-utils";
import { isFocusable, getActiveElement } from "reakit-utils";
import { fireEvent } from "./fireEvent";
import { act } from "./act";
import { blur } from "./blur";

import "./mockClientRects";

export function focus(element: Element) {
if (element.ownerDocument?.activeElement === element) return;
if (getActiveElement(element) === element) return;
if (!isFocusable(element)) return;
blur();
act(() => {
Expand Down
1 change: 1 addition & 0 deletions packages/reakit-utils/.gitignore
Expand Up @@ -35,3 +35,4 @@
/cx
/createOnKeyDown
/closest
/applyState
99 changes: 20 additions & 79 deletions packages/reakit-utils/README.md
Expand Up @@ -24,116 +24,57 @@ yarn add reakit-utils

#### Table of Contents

- [applyState](#applystate)
- [closest](#closest)
- [Parameters](#parameters)
- [Examples](#examples)
- [createOnKeyDown](#createonkeydown)
- [Parameters](#parameters-1)
- [cx](#cx)
- [Parameters](#parameters-2)
- [Examples](#examples-1)
- [getActiveElement](#getactiveelement)
- [Parameters](#parameters-3)
- [getDocument](#getdocument)
- [Parameters](#parameters-4)
- [hasFocusWithin](#hasfocuswithin)
- [Parameters](#parameters-5)
- [Examples](#examples-2)
- [isButton](#isbutton)
- [Parameters](#parameters-6)
- [Examples](#examples-3)
- [isEmpty](#isempty)
- [Parameters](#parameters-7)
- [Examples](#examples-4)
- [isInteger](#isinteger)
- [Parameters](#parameters-8)
- [Examples](#examples-5)
- [isObject](#isobject)
- [Parameters](#parameters-9)
- [isPlainObject](#isplainobject)
- [Parameters](#parameters-10)
- [isPromise](#ispromise)
- [Parameters](#parameters-11)
- [isTextField](#istextfield)
- [Parameters](#parameters-12)
- [matches](#matches)
- [Parameters](#parameters-13)
- [omit](#omit)
- [Parameters](#parameters-14)
- [Examples](#examples-6)
- [pick](#pick)
- [Parameters](#parameters-15)
- [Examples](#examples-7)
- [removeIndexFromArray](#removeindexfromarray)
- [Parameters](#parameters-16)
- [Examples](#examples-8)
- [removeItemFromArray](#removeitemfromarray)
- [Parameters](#parameters-17)
- [Examples](#examples-9)
- [scrollIntoViewIfNeeded](#scrollintoviewifneeded)
- [Parameters](#parameters-18)
- [Examples](#examples-10)
- [splitProps](#splitprops)
- [Parameters](#parameters-19)
- [Examples](#examples-11)
- [tabbable](#tabbable)
- [isFocusable](#isfocusable)
- [Parameters](#parameters-20)
- [Examples](#examples-12)
- [isTabbable](#istabbable)
- [Parameters](#parameters-21)
- [Examples](#examples-13)
- [getAllFocusableIn](#getallfocusablein)
- [Parameters](#parameters-22)
- [getFirstFocusableIn](#getfirstfocusablein)
- [Parameters](#parameters-23)
- [getAllTabbableIn](#getalltabbablein)
- [Parameters](#parameters-24)
- [getFirstTabbableIn](#getfirsttabbablein)
- [Parameters](#parameters-25)
- [getLastTabbableIn](#getlasttabbablein)
- [Parameters](#parameters-26)
- [getNextTabbableIn](#getnexttabbablein)
- [Parameters](#parameters-27)
- [getPreviousTabbableIn](#getprevioustabbablein)
- [Parameters](#parameters-28)
- [getClosestFocusable](#getclosestfocusable)
- [Parameters](#parameters-29)
- [ensureFocus](#ensurefocus)
- [Parameters](#parameters-30)
- [Examples](#examples-14)
- [toArray](#toarray)
- [Parameters](#parameters-31)
- [Examples](#examples-15)
- [types](#types)
- [RenderProp](#renderprop)
- [As](#as)
- [ElementType](#elementtype)
- [HTMLAttributesWithRef](#htmlattributeswithref)
- [ExtractHTMLAttributes](#extracthtmlattributes)
- [UnionToIntersection](#uniontointersection)
- [PickByValue](#pickbyvalue)
- [PropsWithAs](#propswithas)
- [ArrayValue](#arrayvalue)
- [AnyFunction](#anyfunction)
- [useAllCallbacks](#useallcallbacks)
- [Parameters](#parameters-32)
- [Examples](#examples-16)
- [useForkRef](#useforkref)
- [Parameters](#parameters-33)
- [Examples](#examples-17)
- [useIsomorphicEffect](#useisomorphiceffect)
- [useLiveRef](#useliveref)
- [Parameters](#parameters-34)
- [usePipe](#usepipe)
- [Parameters](#parameters-35)
- [useSealedState](#usesealedstate)
- [Parameters](#parameters-36)
- [useUpdateEffect](#useupdateeffect)
- [Parameters](#parameters-37)
- [warning](#warning)
- [Parameters](#parameters-38)
- [Examples](#examples-18)

### applyState

Receives a `setState` argument and calls it with `currentValue` if it's a
function. Otherwise return the argument as the new value.

#### Parameters

- `argument` **React.SetStateAction&lt;T>**
- `currentValue` **T**

#### Examples

```javascript
import { applyState } from "reakit-utils";

applyState(value => value + 1, 1); // 2
applyState(2, 1); // 2
```

### closest

Expand Down
2 changes: 1 addition & 1 deletion packages/reakit-utils/package.json
Expand Up @@ -21,7 +21,7 @@
"lint": "eslint . --ext js,ts,tsx",
"clean": "../../scripts/build/clean.js",
"build": "../../scripts/build/build.js",
"docs": "documentation readme src --section=API --parse-extension ts",
"docs": "documentation readme src --markdown-toc-max-depth=2 --section=API --parse-extension ts",
"preversion": "yarn lint && yarn test && yarn docs && yarn build",
"postpublish": "yarn clean"
},
Expand Down
28 changes: 28 additions & 0 deletions packages/reakit-utils/src/__tests__/hasFocusWithin-test.tsx
@@ -0,0 +1,28 @@
import * as React from "react";
import { render, focus } from "reakit-test-utils";
import { hasFocusWithin } from "../hasFocusWithin";

test("hasFocusWithin", () => {
const { getByLabelText: $ } = render(
<>
<div aria-label="item1">
<button aria-label="item1-1" />
</div>
<button aria-label="item2" />
{/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
<div aria-label="item3" tabIndex={0} aria-activedescendant="item3-1">
<div aria-label="item3-1" id="item3-1" />
</div>
</>
);
expect(hasFocusWithin($("item1"))).toBe(false);
focus($("item1-1"));
expect(hasFocusWithin($("item1"))).toBe(true);
expect(hasFocusWithin($("item2"))).toBe(false);
focus($("item2"));
expect(hasFocusWithin($("item2"))).toBe(true);
expect(hasFocusWithin($("item3-1"))).toBe(false);
focus($("item3"));
expect(hasFocusWithin($("item3"))).toBe(true);
expect(hasFocusWithin($("item3-1"))).toBe(true);
});
27 changes: 27 additions & 0 deletions packages/reakit-utils/src/applyState.ts
@@ -0,0 +1,27 @@
import * as React from "react";

function isUpdater<T>(
argument: React.SetStateAction<T>
): argument is React.ReducerWithoutAction<T> {
return typeof argument === "function";
}

/**
* Receives a `setState` argument and calls it with `currentValue` if it's a
* function. Otherwise return the argument as the new value.
*
* @example
* import { applyState } from "reakit-utils";
*
* applyState(value => value + 1, 1); // 2
* applyState(2, 1); // 2
*/
export function applyState<T>(
argument: React.SetStateAction<T>,
currentValue: T
) {
if (isUpdater(argument)) {
return argument(currentValue);
}
return argument;
}
14 changes: 10 additions & 4 deletions packages/reakit-utils/src/hasFocusWithin.ts
@@ -1,4 +1,4 @@
import { getDocument } from "./getDocument";
import { getActiveElement } from "./getActiveElement";

/**
* Checks if `element` has focus.
Expand All @@ -9,7 +9,13 @@ import { getDocument } from "./getDocument";
* hasFocusWithin(document.getElementById("id"));
*/
export function hasFocusWithin(element: Element): boolean {
const document = getDocument(element);
if (!document.activeElement) return false;
return element.contains(document.activeElement);
const activeElement = getActiveElement(element);
if (!activeElement) return false;
if (element.contains(activeElement)) return true;
const activeDescendant = activeElement.getAttribute("aria-activedescendant");
if (!activeDescendant) return false;
return (
activeDescendant === element.id ||
!!element.querySelector(`#${activeDescendant}`)
);
}
2 changes: 2 additions & 0 deletions packages/reakit-utils/src/index.ts
@@ -1,6 +1,8 @@
export * from "./applyState";
export * from "./closest";
export * from "./createOnKeyDown";
export * from "./cx";
export * from "./getActiveElement";
export * from "./getDocument";
export * from "./hasFocusWithin";
export * from "./isButton";
Expand Down
2 changes: 1 addition & 1 deletion packages/reakit-utils/src/tabbable.ts
Expand Up @@ -18,7 +18,7 @@ function isVisible(element: Element) {
}

function hasNegativeTabIndex(element: Element) {
const tabIndex = parseInt(element.getAttribute("tabIndex") || "0", 10);
const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
return tabIndex < 0;
}

Expand Down

0 comments on commit 3d5b3ed

Please sign in to comment.