@accessible/drawer
Advanced tools
Comparing version 2.2.1 to 3.0.0
@@ -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'; | ||
} |
@@ -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>` | ||
### <Drawer> | ||
@@ -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 | React.ReactNode[] | JSX.Element | ((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<T> \| 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> | ||
) | ||
} | ||
``` | ||
### <Target> | ||
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" | "right" | "bottom" | "left" </code> | `"left"` | No | Sets the edge of the `window` you want your drawer target to render on. | | ||
| portal | <code>boolean | 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<T> \| 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> | ||
) | ||
} | ||
``` | ||
### <Trigger> | ||
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<T> \| 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> | ||
) | ||
} | ||
``` | ||
### <CloseButton> | ||
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 |
@@ -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 { | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
207002
24
17
1930
497
3
1
1
+ Added@accessible/button@2.0.2(transitive)
+ Added@accessible/disclosure@3.0.2(transitive)
+ Added@accessible/use-conditional-focus@3.0.1(transitive)
+ Added@accessible/use-key@1.0.2(transitive)
+ Added@react-hook/previous@1.0.1(transitive)
- Removed@accessible/button@1.1.1(transitive)
- Removed@accessible/disclosure@1.2.0(transitive)
- Removed@accessible/use-conditional-focus@2.2.0(transitive)
- Removed@accessible/use-keycode@4.0.2(transitive)