Socket
Socket
Sign inDemoInstall

@accessible/drawer

Package Overview
Dependencies
36
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.2.1 to 3.0.0

CHANGELOG.md
dist/esm/index.dev.mjs
dist/esm/index.dev.mjs.map
dist/esm/index.mjs.map
dist/umd/drawer.dev.js
dist/umd/drawer.dev.js.map
dist/umd/drawer.js
dist/umd/drawer.js.map

174

dist/main/index.js

@@ -1,71 +0,75 @@

'use strict'
"use strict";
exports.__esModule = true
exports.Target = exports.useControls = exports.useIsOpen = exports.Trigger = exports.Close = exports.useDrawer = exports.DrawerConsumer = exports.DrawerContext = exports.Drawer = void 0
exports.__esModule = true;
exports.useDrawer = useDrawer;
exports.Drawer = Drawer;
exports.useA11yTarget = useA11yTarget;
exports.Target = Target;
exports.useA11yCloseButton = exports.useA11yTrigger = exports.CloseButton = exports.Trigger = void 0;
var React = /*#__PURE__*/ _interopRequireWildcard(
/*#__PURE__*/ require('react')
)
var React = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
var _disclosure = /*#__PURE__*/ require('@accessible/disclosure')
var _disclosure = /*#__PURE__*/require("@accessible/disclosure");
exports.Drawer = _disclosure.Disclosure
exports.DrawerContext = _disclosure.DisclosureContext
exports.DrawerConsumer = _disclosure.DisclosureConsumer
exports.useDrawer = _disclosure.useDisclosure
exports.Close = _disclosure.Close
exports.Trigger = _disclosure.Trigger
exports.useIsOpen = _disclosure.useIsOpen
exports.useControls = _disclosure.useControls
exports.Trigger = _disclosure.Trigger;
exports.CloseButton = _disclosure.CloseButton;
exports.useA11yTrigger = _disclosure.useA11yTrigger;
exports.useA11yCloseButton = _disclosure.useA11yCloseButton;
function _getRequireWildcardCache() {
if (typeof WeakMap !== 'function') return null
var cache = new WeakMap()
_getRequireWildcardCache = function () {
return cache
}
return cache
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const __reactCreateElement__ = React.createElement;
/**
* This hook provides the current value of the drawer's context object
*/
function useDrawer() {
return (0, _disclosure.useDisclosure)();
}
/**
* This component creates the context for your drawer target and trigger
* and contains some configuration options.
*/
function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) {
return obj
}
if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
return {default: obj}
}
var cache = _getRequireWildcardCache()
if (cache && cache.has(obj)) {
return cache.get(obj)
}
var newObj = {}
var hasPropertyDescriptor =
Object.defineProperty && Object.getOwnPropertyDescriptor
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
var desc = hasPropertyDescriptor
? Object.getOwnPropertyDescriptor(obj, key)
: null
if (desc && (desc.get || desc.set)) {
Object.defineProperty(newObj, key, desc)
} else {
newObj[key] = obj[key]
}
}
}
newObj.default = obj
if (cache) {
cache.set(obj, newObj)
}
return newObj
function Drawer(props) {
return /*#__PURE__*/__reactCreateElement__(_disclosure.Disclosure, { ...props
});
}
/**
* A React hook for creating a headless drawer target to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices/examples/dialog-drawer/dialog.html).
*
* @param target A React ref or HTML element
* @param options Configuration options
*/
const __reactCreateElement__ = React.createElement
const __DEV__ =
typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'
function useA11yTarget(target, options = {}) {
const disclosureProps = (0, _disclosure.useA11yTarget)(target, Object.assign({}, options, {
openStyle: Object.assign(defaultOpenStyles, options.openStyle)
}));
return Object.assign(disclosureProps, {
style: Object.assign(disclosureProps.style, defaultClosedStyles[options.placement || 'left'])
});
}
/**
* This component wraps any React element and turns it into a
* drawer target.
*/
function Target(props) {
const childProps = props.children.props;
return __reactCreateElement__(_disclosure.Target, Object.assign({}, props, {
openStyle: Object.assign({}, defaultOpenStyles, props.openStyle)
}), /*#__PURE__*/React.cloneElement(props.children, {
style: Object.assign({}, defaultClosedStyles[props.placement || 'left'], childProps.style)
}));
}
const defaultClosedStyles = {
top: {
margin: 0,
position: 'fixed',
top: 0,

@@ -75,6 +79,6 @@ right: 0,

left: 0,
transform: 'translate3d(0, -100%, 0)',
transform: 'translate3d(0, -100%, 0)'
},
right: {
margin: 0,
position: 'fixed',
top: 0,

@@ -84,6 +88,6 @@ right: 0,

left: 'auto',
transform: 'translate3d(100%, 0, 0)',
transform: 'translate3d(100%, 0, 0)'
},
bottom: {
margin: 0,
position: 'fixed',
top: 'auto',

@@ -93,6 +97,6 @@ right: 0,

left: 0,
transform: 'translate3d(0, 100%, 0)',
transform: 'translate3d(0, 100%, 0)'
},
left: {
margin: 0,
position: 'fixed',
top: 0,

@@ -102,39 +106,13 @@ right: 'auto',

left: 0,
transform: 'translate3d(-100%, 0, 0)',
},
}
transform: 'translate3d(-100%, 0, 0)'
}
};
const defaultOpenStyles = {
transform: 'translate3d(0, 0, 0)',
}
const defaultStyles = {
position: 'fixed',
margin: 'auto',
left: '50%',
top: '50%',
transform: 'translate3d(-50%, -50%, 0)',
}
transform: 'translate3d(0, 0, 0)'
};
const Target = ({placement = 'left', openStyle, ...props}) => {
const childProps = props.children.props
return __reactCreateElement__(
_disclosure.Target,
Object.assign(props, {
openStyle: Object.assign({}, defaultOpenStyles, openStyle),
}),
/*#__PURE__*/ React.cloneElement(props.children, {
style: Object.assign(
{},
defaultStyles,
defaultClosedStyles[placement],
childProps.style
),
})
)
}
exports.Target = Target
/* istanbul ignore next */
if (__DEV__) {
Target.displayName = 'Target'
}
if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
Drawer.displayName = 'Drawer';
Target.displayName = 'Target';
}

128

dist/module/index.js

@@ -1,34 +0,51 @@

function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {}
var target = {}
var sourceKeys = Object.keys(source)
var key, i
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i]
if (excluded.indexOf(key) >= 0) continue
target[key] = source[key]
}
return target
import * as React from 'react';
const __reactCreateElement__ = React.createElement;
import { Disclosure, Target as DisclosureTarget, useA11yTarget as useA11yDisclosureTarget, useDisclosure } from '@accessible/disclosure';
/**
* This hook provides the current value of the drawer's context object
*/
export function useDrawer() {
return useDisclosure();
}
/**
* This component creates the context for your drawer target and trigger
* and contains some configuration options.
*/
import * as React from 'react'
const __reactCreateElement__ = React.createElement
import {Target as DisclosureTarget} from '@accessible/disclosure'
export {
Disclosure as Drawer,
DisclosureContext as DrawerContext,
DisclosureConsumer as DrawerConsumer,
useDisclosure as useDrawer,
Close,
Trigger,
useIsOpen,
useControls,
} from '@accessible/disclosure'
export function Drawer(props) {
return /*#__PURE__*/__reactCreateElement__(Disclosure, { ...props
});
}
/**
* A React hook for creating a headless drawer target to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices/examples/dialog-drawer/dialog.html).
*
* @param target A React ref or HTML element
* @param options Configuration options
*/
const __DEV__ =
typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'
export function useA11yTarget(target, options = {}) {
const disclosureProps = useA11yDisclosureTarget(target, Object.assign({}, options, {
openStyle: Object.assign(defaultOpenStyles, options.openStyle)
}));
return Object.assign(disclosureProps, {
style: Object.assign(disclosureProps.style, defaultClosedStyles[options.placement || 'left'])
});
}
/**
* This component wraps any React element and turns it into a
* drawer target.
*/
export function Target(props) {
const childProps = props.children.props;
return __reactCreateElement__(DisclosureTarget, Object.assign({}, props, {
openStyle: Object.assign({}, defaultOpenStyles, props.openStyle)
}), /*#__PURE__*/React.cloneElement(props.children, {
style: Object.assign({}, defaultClosedStyles[props.placement || 'left'], childProps.style)
}));
}
const defaultClosedStyles = {
top: {
margin: 0,
position: 'fixed',
top: 0,

@@ -38,6 +55,6 @@ right: 0,

left: 0,
transform: 'translate3d(0, -100%, 0)',
transform: 'translate3d(0, -100%, 0)'
},
right: {
margin: 0,
position: 'fixed',
top: 0,

@@ -47,6 +64,6 @@ right: 0,

left: 'auto',
transform: 'translate3d(100%, 0, 0)',
transform: 'translate3d(100%, 0, 0)'
},
bottom: {
margin: 0,
position: 'fixed',
top: 'auto',

@@ -56,6 +73,6 @@ right: 0,

left: 0,
transform: 'translate3d(0, 100%, 0)',
transform: 'translate3d(0, 100%, 0)'
},
left: {
margin: 0,
position: 'fixed',
top: 0,

@@ -65,39 +82,14 @@ right: 'auto',

left: 0,
transform: 'translate3d(-100%, 0, 0)',
},
}
transform: 'translate3d(-100%, 0, 0)'
}
};
const defaultOpenStyles = {
transform: 'translate3d(0, 0, 0)',
}
const defaultStyles = {
position: 'fixed',
margin: 'auto',
left: '50%',
top: '50%',
transform: 'translate3d(-50%, -50%, 0)',
}
export const Target = (_ref) => {
let {placement = 'left', openStyle} = _ref,
props = _objectWithoutPropertiesLoose(_ref, ['placement', 'openStyle'])
transform: 'translate3d(0, 0, 0)'
};
export { Trigger, CloseButton, useA11yTrigger, useA11yCloseButton } from '@accessible/disclosure';
const childProps = props.children.props
return __reactCreateElement__(
DisclosureTarget,
Object.assign(props, {
openStyle: Object.assign({}, defaultOpenStyles, openStyle),
}),
/*#__PURE__*/ React.cloneElement(props.children, {
style: Object.assign(
{},
defaultStyles,
defaultClosedStyles[placement],
childProps.style
),
})
)
}
/* istanbul ignore next */
if (__DEV__) {
Target.displayName = 'Target'
}
if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
Drawer.displayName = 'Drawer';
Target.displayName = 'Target';
}

113

package.json
{
"name": "@accessible/drawer",
"version": "2.2.1",
"version": "3.0.0",
"homepage": "https://github.com/accessible-ui/drawer#readme",

@@ -9,3 +9,3 @@ "repository": "github:accessible-ui/drawer",

"license": "MIT",
"description": "An accessible and versatile drawer component for React",
"description": "🅰 An accessible and versatile drawer component for React",
"keywords": [

@@ -28,9 +28,5 @@ "react",

"module": "dist/module/index.js",
"unpkg": "dist/umd/drawer.js",
"source": "src/index.tsx",
"types": "types/index.d.ts",
"files": [
"/dist",
"/src",
"/types"
],
"exports": {

@@ -41,2 +37,3 @@ ".": {

"require": "./dist/main/index.js",
"umd": "./dist/umd/drawer.js",
"source": "./src/index.tsx",

@@ -49,20 +46,24 @@ "types": "./types/index.d.ts",

},
"files": [
"/dist",
"/src",
"/types"
],
"sideEffects": false,
"scripts": {
"build": "npm run build-esm && npm run build-main && npm run build-module && npm run build-types",
"build-esm": "npm run compile -- -d dist/esm --env-name esm --out-file-extension .mjs",
"build-main": "npm run compile -- -d dist/main --env-name main",
"build-module": "npm run compile -- -d dist/module --env-name module",
"build-types": "tsc -p tsconfig.json -d --outDir types --emitDeclarationOnly",
"check-types": "tsc --noEmit -p tsconfig.json",
"compile": "babel src -x .ts,.tsx --ignore \"**/*.test.ts\",\"**/*.test.tsx\" --delete-dir-on-start",
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,md,yml,json,eslintrc,prettierrc}\"",
"build": "lundle build",
"check-types": "lundle check-types",
"dev": "lundle build -f module,cjs -w",
"format": "prettier --write \"{,!(node_modules|dist|coverage)/**/}*.{ts,tsx,js,jsx,md,yml,json}\"",
"lint": "eslint . --ext .ts,.tsx",
"prepublishOnly": "npm run lint && npm run test && npm run build && npm run format",
"prepublishOnly": "cli-confirm \"Did you run 'yarn release' first? (y/N)\"",
"prerelease": "npm run validate && npm run build",
"release": "git add . && standard-version -a",
"test": "jest",
"validate": "npm run check-types && npm run lint && npm run test -- --coverage"
"validate": "lundle check-types && npm run lint && jest --coverage"
},
"husky": {
"hooks": {
"pre-commit": "npm run build-types && git add types && lint-staged"
"pre-commit": "lundle check-types && lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}

@@ -72,31 +73,77 @@ },

"**/*.{ts,tsx,js,jsx}": [
"eslint",
"eslint --fix",
"prettier --write"
],
"**/*.{md,yml,json,eslintrc,prettierrc}": [
"**/*.{md,yml,json}": [
"prettier --write"
]
},
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"eslintConfig": {
"extends": [
"lunde"
]
},
"eslintIgnore": [
"node_modules",
"coverage",
"dist",
"/types",
"test",
"*.config.js"
],
"jest": {
"moduleDirectories": [
"node_modules",
"src",
"test"
],
"testMatch": [
"<rootDir>/src/**/?(*.)test.{ts,tsx}"
],
"collectCoverageFrom": [
"**/src/**/*.{ts,tsx}"
],
"setupFilesAfterEnv": [
"./test/setup.js"
],
"snapshotResolver": "./test/resolve-snapshot.js",
"globals": {
"__DEV__": true
}
},
"prettier": {
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true,
"bracketSpacing": false
},
"devDependencies": {
"@babel/preset-react": "latest",
"@lunde/babel-preset-es": "latest",
"@commitlint/cli": "latest",
"@commitlint/config-conventional": "latest",
"@testing-library/jest-dom": "latest",
"@testing-library/react": "latest",
"@testing-library/react-hooks": "latest",
"@testing-library/user-event": "^10.4.0",
"@testing-library/user-event": "latest",
"@types/jest": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",
"@typescript-eslint/eslint-plugin": "latest",
"@typescript-eslint/parser": "latest",
"babel-plugin-annotate-pure-calls": "latest",
"babel-plugin-optimize-react": "latest",
"babel-jest": "latest",
"cli-confirm": "latest",
"cz-conventional-changelog": "latest",
"eslint": "latest",
"eslint-import-resolver-jest": "latest",
"eslint-plugin-jest": "latest",
"eslint-plugin-react": "latest",
"eslint-plugin-react-hooks": "latest",
"eslint-config-lunde": "latest",
"husky": "latest",
"jest": "latest",
"lint-staged": "latest",
"lundle": "latest",
"prettier": "latest",

@@ -106,7 +153,7 @@ "react": "latest",

"react-test-renderer": "latest",
"ts-jest": "latest",
"standard-version": "latest",
"typescript": "latest"
},
"dependencies": {
"@accessible/disclosure": "^1.1.3"
"@accessible/disclosure": "^3.0.1"
},

@@ -113,0 +160,0 @@ "peerDependencies": {

459

README.md

@@ -12,2 +12,5 @@ <hr>

</a>
<a aria-label="Types" href="https://www.npmjs.com/package/@accessible/drawer">
<img alt="Types" src="https://img.shields.io/npm/types/@accessible/drawer?style=for-the-badge&labelColor=24292e">
</a>
<a aria-label="Code coverage report" href="https://codecov.io/gh/accessible-ui/drawer">

@@ -30,36 +33,37 @@ <img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/accessible-ui/drawer?style=for-the-badge&labelColor=24292e">

An accessible and versatile drawer component for React. This drawer is just a few new styles
on top of [@accessible/collapse](https://github.com/accessible-ui/collapse) so when using both,
the drawer costs you nothing.
An accessible and versatile drawer component for React
## Features
- **Style-agnostic** You can use this component with the styling library of your choice. It
works with CSS-in-JS, SASS, plain CSS, plain `style` objects, anything!
- **Portal-friendly** The drawer target will render into React portals of your choice when configured
to do so.
- **a11y/aria-compliant** This component works with screen readers out of the box and manages
focus for you.
- [x] **Style-agnostic** You can use this component with the styling library of your choice. It
works with CSS-in-JS, SASS, plain CSS, plain `style` objects, anything!
- [x] **Portal-friendly** The drawer target will render into React portals of your choice when configured
to do so.
- [x] **a11y/aria-compliant** This component works with screen readers out of the box and manages
focus for you.
## Quick Start
[Check out the example on CodeSandbox](https://codesandbox.io/s/accessibledrawer-example-y65oq)
[Check out the example on **CodeSandbox**](https://codesandbox.io/s/accessibledrawer-example-y65oq)
```jsx harmony
import {Drawer, Target, Trigger, Close} from '@accessible/drawer'
import * as React from 'react'
import * as Drawer from '@accessible/drawer'
const Component = () => (
<Drawer>
<Target>
<div className="my-drawer">
<Close>
<Drawer.Drawer>
<Drawer.Trigger>
<button>Open me</button>
</Drawer.Trigger>
<Drawer.Target>
<div className='my-drawer'>
<Drawer.CloseButton>
<button>Close me</button>
</Close>
</Drawer.CloseButton>
<div>I've been revealed!</div>
</div>
</Target>
<Trigger>
<button>Open me</button>
</Trigger>
</Drawer>
</Drawer.Target>
</Drawer.Drawer>
)

@@ -72,18 +76,19 @@ ```

| Component | Description |
| ----------------------- | -------------------------------------------------------------------------------------------------------------- |
| [`<Drawer>`](#drawer) | This component creates the context for your drawer target and trigger and contains some configuration options. |
| [`<Target>`](#target) | This component wraps any React element and turns it into a drawer target. |
| [`<Trigger>`](#trigger) | This component wraps any React element and turns it into a drawer trigger. |
| [`<Close>`](#close) | This is a convenience component that wraps any React element and adds an onClick handler to close the drawer. | |
| Component | Description |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| [`<Drawer>`](#drawer) | This component creates the context for your drawer target and trigger and contains some configuration options. |
| [`<Target>`](#target) | This component wraps any React element and turns it into a drawer target. |
| [`<Trigger>`](#trigger) | This component wraps any React element and turns it into a drawer trigger. |
| [`<CloseButton>`](#closebutton) | This is a convenience component that wraps any React element and adds an onClick handler to close the drawer. | |
### Hooks
| Hook | Description |
| ------------------------------- | ---------------------------------------------------------------------------------------------- |
| [`useDrawer()`](#usedrawer) | This hook provides the value of the drawer's [DrawerContextValue object](#drawercontextvalue). |
| [`useControls()`](#usecontrols) | This hook provides access to the drawer's `open`, `close`, and `toggle` functions. |
| [`useIsOpen()`](#useisopen) | This hook provides access to the drawer's `isOpen` value. |
| Hook | Description |
| ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`useDrawer()`](#usedrawer) | This hook provides the value of the drawer's [DrawerContextValue object](#drawercontextvalue). |
| [`useA11yTarget()`](#usea11ytargettarget-options) | A React hook for creating a headless drawer 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 drawer 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). |
### `<Drawer>`
### &lt;Drawer&gt;

@@ -95,12 +100,135 @@ This component creates the context for your drawer target and trigger and contains some

| Prop | Type | Default | Required? | Description |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultOpen | `boolean` | `false` | No | This sets the default open state of the drawer. By default the drawer is closed. |
| open | `boolean` | `undefined` | No | You can control the open/closed state of the drawer with this prop. When it isn't undefined, this value will take precedence over any calls to `open()`, `close()`, or `toggle()`. |
| onChange | `(open: boolean) => void` | `undefined` | No | This callback is invoked any time the `open` state of the disclosure changes. |
| 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 | <code>React.ReactNode &#124; React.ReactNode[] &#124; JSX.Element &#124; ((context: DrawerContextValue) => React.ReactNode)</code> | `undefined` | No | Your drawer targets and any other children. |
| Prop | Type | Default | Required? | Description |
| ----------- | ------------------------- | ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultOpen | `boolean` | `false` | No | This sets the default open state of the drawer. By default the drawer is closed. |
| open | `boolean` | `undefined` | No | This creates a controlled drawer component where the open state of the drawer is controlled by this property. |
| onChange | `(open: boolean) => void` | `undefined` | No | This callback is invoked any time the `open` state of the drawer changes. |
| 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 drawer contents and any other children. |
### `<Target>`
### useA11yTarget(target, options?)
A React hook for creating a headless drawer target to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).
#### Arguments
| Argument | Type | Required? | Description |
| -------- | -------------------------------------------------- | --------- | --------------------------- |
| target | <code>React.RefObject&lt;T&gt; \| T \| null</code> | Yes | A React ref or HTML element |
| options | [`UseA11yTargetOptions`](#usea11ytargetoptions) | No | Configuration options |
#### UseA11yTargetOptions
```ts
export interface UseA11yTargetOptions {
/**
* Sets the placement of the drawer menu
* @default "left"
*/
placement?: 'top' | 'right' | 'bottom' | 'left'
/**
* Adds this class name to props when the drawer is open
*/
openClass?: string
/**
* Adds this class name to props when the drawer is closed
*/
closedClass?: string
/**
* Adds this style to props when the drawer is open
*/
openStyle?: React.CSSProperties
/**
* Adds this style to props when the drawer is closed
*/
closedStyle?: React.CSSProperties
/**
* Prevents the `window` from scrolling when the target is
* focused after opening.
*/
preventScroll?: boolean
/**
* When `true`, this closes the target element when the `Escape`
* key is pressed.
* @default true
*/
closeOnEscape?: boolean
}
```
#### Returns
```ts
type A11yProps = {
readonly 'aria-hidden': boolean
readonly id: string | undefined
readonly className: string | undefined
readonly style: {
readonly visibility: 'hidden' | 'visible'
} & React.CSSProperties
} & {
readonly style:
| ({
readonly visibility: 'hidden' | 'visible'
} & React.CSSProperties & {
readonly position: 'fixed'
readonly top: 0
readonly right: 0
readonly bottom: 'auto'
readonly left: 0
readonly transform: 'translate3d(0, -100%, 0)'
})
| ({
readonly visibility: 'hidden' | 'visible'
} & React.CSSProperties & {
readonly position: 'fixed'
readonly top: 0
readonly right: 0
readonly bottom: 0
readonly left: 'auto'
readonly transform: 'translate3d(100%, 0, 0)'
})
| ({
readonly visibility: 'hidden' | 'visible'
} & React.CSSProperties & {
readonly position: 'fixed'
readonly top: 'auto'
readonly right: 0
readonly bottom: 0
readonly left: 0
readonly transform: 'translate3d(0, 100%, 0)'
})
| ({
readonly visibility: 'hidden' | 'visible'
} & React.CSSProperties & {
readonly position: 'fixed'
readonly top: 0
readonly right: 'auto'
readonly bottom: 0
readonly left: 0
readonly transform: 'translate3d(-100%, 0, 0)'
})
}
```
#### Example
```jsx harmony
import * as React from 'react'
import {useA11yTarget} from '@accessible/drawer'
const MyTarget = () => {
const ref = React.useRef(null)
const a11yProps = useA11yTarget(ref, {preventScroll: true})
return (
<div ref={ref} {...a11yProps}>
I am the drawer content
</div>
)
}
```
### &lt;Target&gt;
This component wraps any React element and turns it into a drawer target.

@@ -110,13 +238,13 @@

| Prop | Type | Default | Required? | Description |
| ------------- | ---------------------------------------------------------------- | ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| placement | <code>"top" &#124; "right" &#124; "bottom" &#124; "left" </code> | `"left"` | No | Sets the edge of the `window` you want your drawer target to render on. |
| portal | <code>boolean &#124; string </code> | `false` | No | When `true` this will render the drawer into a React portal with the id `#portals`. You can render it into any portal by providing its query selector here, e.g. `#foobar`, `[data-portal=true]`, or `.foobar`. |
| closeOnEscape | `boolean` | `true` | No | By default the drawer will close when the `Escape` key is pressed. You can turn this off by providing `false` here. |
| closedClass | `string` | `undefined` | No | This class name will be applied to the child element when the drawer is `closed`. |
| openClass | `string` | `undefined` | No | This class name will be applied to the child element when the drawer is `open`. |
| closedStyle | `React.CSSProperties` | `undefined` | No | These styles will be applied to the child element when the drawer is `closed` in addition to the default styles that set the target's visibility. |
| openStyle | `React.CSSProperties` | `undefined` | No | These styles name will be applied to the child element when the drawer is `open` in addition to the default styles that set the target's visibility. |
| preventScroll | `boolean` | `false` | No | When `true` this will prevent your browser from scrolling the document to bring the newly-focused tab into view. |
| children | `React.ReactElement` | `undefined` | Yes | The child is cloned by this component and has aria attributes injected into its props as well as the events defined above. |
| Prop | Type | Default | Required? | Description |
| ------------- | ---------------------------------------- | ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| placement | `"top" \| "right" \| "bottom" \| "left"` | `false` | No | When `true` this will render the drawer into a React portal with the id `#portals`. You can render it into any portal by providing its query selector here, e.g. `#foobar`, `[data-portal=true]`, or `.foobar`. |
| portal | `boolean \| string \| PortalizeProps` | `false` | No | When `true` this will render the drawer into a React portal with the id `#portals`. You can render it into any portal by providing its query selector here, e.g. `#foobar`, `[data-portal=true]`, or `.foobar`. |
| closeOnEscape | `boolean` | `true` | No | By default the drawer will close when the `Escape` key is pressed. You can turn this off by providing `false` here. |
| closedClass | `string` | `undefined` | No | This class name will be applied to the child element when the drawer is `closed`. |
| openClass | `string` | `undefined` | No | This class name will be applied to the child element when the drawer is `open`. |
| closedStyle | `React.CSSProperties` | `undefined` | No | These styles will be applied to the child element when the drawer is `closed` in addition to the default styles that set the target's visibility. |
| openStyle | `React.CSSProperties` | `undefined` | No | These styles name will be applied to the child element when the drawer is `open` in addition to the default styles that set the target's visibility. |
| preventScroll | `boolean` | `false` | No | When `true` this will prevent your browser from scrolling the document to bring the newly-focused tab into view. |
| children | `React.ReactElement` | `undefined` | Yes | The child is cloned by this component and has aria attributes injected into its props as well as the events defined above. |

@@ -127,3 +255,3 @@ #### Example

<Target>
<div className="alert">Alert</div>
<div className='alert'>Alert</div>
</Target>

@@ -134,4 +262,4 @@

// aria-hidden="true"
// id="collapse--12"
// style="visibility: hidden; position: fixed; margin: auto; left: 0px; right: 0px; top: 50%; transform: translateY(-50%); z-index: 1;"
// id="🅰12"
// style="visibility: hidden;"
// >

@@ -142,4 +270,81 @@ // Alert

### `<Trigger>`
### useA11yTrigger(target, options?)
A React hook for creating a headless drawer 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
for interoperability between actual <button> elements and fake ones e.g. <a> and <div> to the
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 | [`UseA11yTriggerOptions`](#usea11ytriggeroptions) | No | Configuration options |
#### UseA11yTriggerOptions
```ts
export interface UseA11yTriggerOptions<E = React.MouseEvent<any, MouseEvent>> {
/**
* Adds this class name to props when the drawer is open
*/
openClass?: string
/**
* Adds this class name to props when the drawer is closed
*/
closedClass?: string
/**
* Adds this style to props when the drawer is open
*/
openStyle?: React.CSSProperties
/**
* Adds this style to props when the drawer is closed
*/
closedStyle?: React.CSSProperties
/**
* Adds an onClick handler in addition to the default one that
* toggles the drawer's open state.
*/
onClick?: (e: E) => any
}
```
#### Returns
```ts
interface A11yProps<E extends React.MouseEvent<any, MouseEvent>> {
readonly 'aria-controls': string | undefined
readonly 'aria-expanded': boolean
readonly role: 'button'
readonly tabIndex: 0
readonly className: string | undefined
readonly style: React.CSSProperties | undefined
readonly onClick: (event: E) => void
}
```
#### Example
```jsx harmony
import * as React from 'react'
import {useA11yTrigger} from '@accessible/drawer'
const MyTrigger = () => {
const ref = React.useRef(null)
const a11yProps = useA11yTrigger(ref, {
openClass: 'open',
closedClass: 'closed',
})
return (
<button ref={ref} {...a11yProps}>
Clicking me toggles the drawer content
</button>
)
}
```
### &lt;Trigger&gt;
This component wraps any React element and adds an `onClick` handler which toggles the open state

@@ -159,4 +364,4 @@ of the drawer target.

```jsx harmony
<Trigger on="click">
<button className="my-button">Open me!</button>
<Trigger on='click'>
<button className='my-button'>Open me!</button>
</Trigger>

@@ -166,3 +371,3 @@

// class="my-button"
// aria-controls="collapse--12"
// aria-controls="🅰12"
// aria-expanded="false"

@@ -174,4 +379,65 @@ // >

### `<Close>`
### 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
for interoperability between actual <button> elements and fake ones e.g. <a> and <div> to the
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 | [`UseA11yCloseButtonOptions`](#usea11yclosebuttonoptions) | No | Configuration options |
#### UseA11yCloseButtonOptions
```ts
export interface UseA11yCloseButtonOptions<
E = React.MouseEvent<any, MouseEvent>
> {
/**
* Adds an onClick handler in addition to the default one that
* closes the drawer.
*/
onClick?: (e: E) => any
}
```
#### Returns
```ts
interface A11yProps<E extends React.MouseEvent<any, MouseEvent>> {
readonly 'aria-controls': string | undefined
readonly 'aria-expanded': boolean
readonly 'aria-label': 'Close'
readonly role: 'button'
readonly tabIndex: 0
readonly onClick: (event: E) => void
}
```
#### Example
```jsx harmony
import * as React from 'react'
import {useA11yCloseButton} from '@accessible/drawer'
const MyTrigger = () => {
const ref = React.useRef(null)
const a11yProps = useA11yCloseButton(ref, {
onClick: () => console.log('Closing!'),
})
return (
<button ref={ref} {...a11yProps}>
Clicking me closes the drawer content
</button>
)
}
```
### &lt;CloseButton&gt;
This is a convenience component that wraps any React element and adds an onClick handler which closes the drawer.

@@ -186,9 +452,9 @@

```jsx harmony
<Close>
<button className="my-button">Close me</button>
</Close>
<CloseButton>
<button className='my-button'>Close me</button>
</CloseButton>
// <button
// class="my-button"
// aria-controls="collapse--12"
// aria-controls="drawer--12"
// aria-expanded="false"

@@ -200,31 +466,33 @@ // >

### `useDrawer()`
### useDrawer()
This hook provides the value of the drawer's [DrawerContextValue object](#drawercontextvalue)
#### Example
### DrawerContextValue
```jsx harmony
const Component = () => {
const {open, close, toggle, isOpen} = useDrawer()
return <button onClick={toggle}>Toggle the drawer</button>
}
```
### `DrawerContextValue`
```typescript
interface DrawerContextValue {
export interface DrawerContextValue {
/**
* The open state of the drawer
*/
isOpen: boolean
/**
* Opens the drawer
*/
open: () => void
/**
* Closes the drawer
*/
close: () => void
/**
* Toggles the open state of the drawer
*/
toggle: () => void
id: string
/**
* A unique ID for the drawer target
*/
id?: string
}
```
### `useControls()`
This hook provides access to the drawer's `open`, `close`, and `toggle` functions
#### Example

@@ -234,32 +502,9 @@

const Component = () => {
const {open, close, toggle} = useControls()
return (
<Target>
<div className="my-drawer">
<button onClick={close}>Close me</button>
</div>
</Target>
)
const {open, close, toggle, isOpen} = useDrawer()
return <button onClick={toggle}>Toggle the drawer</button>
}
```
### `useIsOpen()`
This hook provides access to the drawer's `isOpen` value
#### Example
```jsx harmony
const Component = () => {
const isOpen = useIsOpen()
return (
<Target>
<div className="my-drawer">Am I open? {isOpen ? 'Yes' : 'No'}</div>
</Target>
)
}
```
## LICENSE
MIT

119

types/index.d.ts

@@ -1,28 +0,93 @@

import * as React from 'react'
import {
TargetProps as DisclosureTargetProps,
DisclosureControls,
CloseProps as DisclosureCloseProps,
TriggerProps as DisclosureTriggerProps,
DisclosureProps,
DisclosureContextValue,
} from '@accessible/disclosure'
export {
Disclosure as Drawer,
DisclosureContext as DrawerContext,
DisclosureConsumer as DrawerConsumer,
useDisclosure as useDrawer,
Close,
Trigger,
useIsOpen,
useControls,
} from '@accessible/disclosure'
export declare const Target: React.FC<TargetProps>
export interface DrawerContextValue extends DisclosureContextValue {}
export interface DrawerProps extends DisclosureProps {}
export interface DrawerControls extends DisclosureControls {}
export interface TriggerProps extends DisclosureTriggerProps {}
export interface CloseProps extends DisclosureCloseProps {}
export interface TargetProps extends DisclosureTargetProps {
placement?: 'top' | 'right' | 'bottom' | 'left'
import * as React from 'react';
import type { DisclosureProps, DisclosureContextValue, TargetProps as DisclosureTargetProps, UseA11yTargetOptions as UseA11yDisclosureTargetOptions } from '@accessible/disclosure';
/**
* This hook provides the current value of the drawer's context object
*/
export declare function useDrawer(): DrawerContextValue;
/**
* This component creates the context for your drawer target and trigger
* and contains some configuration options.
*/
export declare function Drawer(props: DrawerProps): JSX.Element;
export declare namespace Drawer {
var displayName: string;
}
/**
* A React hook for creating a headless drawer target to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices/examples/dialog-drawer/dialog.html).
*
* @param target A React ref or HTML element
* @param options Configuration options
*/
export declare function useA11yTarget<T extends HTMLElement>(target: React.RefObject<T> | T | null, options?: UseA11yTargetOptions): {
readonly 'aria-hidden': boolean;
readonly id: string | undefined;
readonly className: string | undefined;
readonly style: {
readonly visibility: "hidden" | "visible";
} & React.CSSProperties;
} & {
readonly style: ({
readonly visibility: "hidden" | "visible";
} & React.CSSProperties & {
readonly position: "fixed";
readonly top: 0;
readonly right: 0;
readonly bottom: "auto";
readonly left: 0;
readonly transform: "translate3d(0, -100%, 0)";
}) | ({
readonly visibility: "hidden" | "visible";
} & React.CSSProperties & {
readonly position: "fixed";
readonly top: 0;
readonly right: 0;
readonly bottom: 0;
readonly left: "auto";
readonly transform: "translate3d(100%, 0, 0)";
}) | ({
readonly visibility: "hidden" | "visible";
} & React.CSSProperties & {
readonly position: "fixed";
readonly top: "auto";
readonly right: 0;
readonly bottom: 0;
readonly left: 0;
readonly transform: "translate3d(0, 100%, 0)";
}) | ({
readonly visibility: "hidden" | "visible";
} & React.CSSProperties & {
readonly position: "fixed";
readonly top: 0;
readonly right: "auto";
readonly bottom: 0;
readonly left: 0;
readonly transform: "translate3d(-100%, 0, 0)";
});
};
/**
* This component wraps any React element and turns it into a
* drawer target.
*/
export declare function Target(props: TargetProps): React.FunctionComponentElement<TargetProps & {
openStyle: {
readonly transform: "translate3d(0, 0, 0)";
} & React.CSSProperties;
}>;
export declare namespace Target {
var displayName: string;
}
export { Trigger, CloseButton, useA11yTrigger, useA11yCloseButton, } from '@accessible/disclosure';
export type { TriggerProps, CloseButtonProps, UseA11yTriggerOptions, UseA11yCloseButtonOptions, } from '@accessible/disclosure';
export interface DrawerProps extends DisclosureProps {
}
export interface DrawerContextValue extends DisclosureContextValue {
}
export interface UseA11yTargetOptions extends UseA11yDisclosureTargetOptions {
/**
* Sets the placement of the drawer menu
* @default "left"
*/
placement?: 'top' | 'right' | 'bottom' | 'left';
}
export interface TargetProps extends DisclosureTargetProps, UseA11yTargetOptions {
}
src/__snapshots__/index.test.tsx.snap
dist/esm/index.mjs

Sorry, the diff of this file is not supported yet

src/index.test.tsx

Sorry, the diff of this file is not supported yet

src/index.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc