@accessible/drawer - npm Package Compare versions

Comparing version 1.0.6 to 2.0.0

dist/cjs/index.d.ts

@@ -1,28 +0,28 @@
-import React from 'react'
+import {FC} from 'react'
 import {
-  DialogProps,
-  ModalControls,
-  CloseProps as CloseProps_,
-  TriggerProps as TriggerProps_,
-  ModalProps,
-  ModalContextValue,
-} from '@accessible/modal'
+  TargetProps as CollapseTargetProps,
+  CollapseControls,
+  CloseProps as CollapseCloseProps,
+  TriggerProps as CollapseTriggerProps,
+  CollapseProps,
+  CollapseContextValue,
+} from '@accessible/collapse'
 export {
-  Modal as Drawer,
-  ModalContext as DrawerContext,
-  ModalConsumer as DrawerConsumer,
-  useModal as useDrawer,
+  Collapse as Drawer,
+  CollapseContext as DrawerContext,
+  CollapseConsumer as DrawerConsumer,
+  useCollapse as useDrawer,
+  Close,
   Trigger,
-  Close,
   useIsOpen,
   useControls,
-} from '@accessible/modal'
-export interface DrawerContextValue extends ModalContextValue {}
-export interface DrawerProps extends ModalProps {}
-export interface DrawerControls extends ModalControls {}
-export interface TriggerProps extends TriggerProps_ {}
-export interface TriggerProps extends CloseProps_ {}
-export interface ContentProps extends DialogProps {
+} from '@accessible/collapse'
+export interface DrawerContextValue extends CollapseContextValue {}
+export interface DrawerProps extends CollapseProps {}
+export interface DrawerControls extends CollapseControls {}
+export interface TriggerProps extends CollapseTriggerProps {}
+export interface CloseProps extends CollapseCloseProps {}
+export interface TargetProps extends CollapseTargetProps {
   placement?: 'top' | 'right' | 'bottom' | 'left'
 }
-export declare const Content: React.FC<ContentProps>
+export declare const Target: FC<TargetProps>

dist/cjs/index.js

 'use strict'
 
 exports.__esModule = true
-exports.Content = exports.useControls = exports.useIsOpen = exports.Close = exports.Trigger = exports.useDrawer = exports.DrawerConsumer = exports.DrawerContext = exports.Drawer = void 0
+exports.Target = exports.useControls = exports.useIsOpen = exports.Trigger = exports.Close = exports.useDrawer = exports.DrawerConsumer = exports.DrawerContext = exports.Drawer = void 0
 
@@ -10,12 +10,12 @@ var _propTypes = _interopRequireDefault(require('prop-types'))
 
-var _modal = require('@accessible/modal')
+var _collapse = require('@accessible/collapse')
 
-exports.Drawer = _modal.Modal
-exports.DrawerContext = _modal.ModalContext
-exports.DrawerConsumer = _modal.ModalConsumer
-exports.useDrawer = _modal.useModal
-exports.Trigger = _modal.Trigger
-exports.Close = _modal.Close
-exports.useIsOpen = _modal.useIsOpen
-exports.useControls = _modal.useControls
+exports.Drawer = _collapse.Collapse
+exports.DrawerContext = _collapse.CollapseContext
+exports.DrawerConsumer = _collapse.CollapseConsumer
+exports.useDrawer = _collapse.useCollapse
+exports.Close = _collapse.Close
+exports.Trigger = _collapse.Trigger
+exports.useIsOpen = _collapse.useIsOpen
+exports.useControls = _collapse.useControls
 
@@ -72,3 +72,3 @@ function _interopRequireDefault(obj) {
 
-const __reactCreateElement__ = _react.default.createElement
+const {createElement, cloneElement} = _react.default
 
@@ -115,25 +115,29 @@ const __DEV__ =
 }
+const defaultStyles = {
+  position: 'fixed',
+  margin: 'auto',
+  left: '50%',
+  top: '50%',
+  transform: 'translate3d(-50%, -50%, 0)',
+  zIndex: 1,
+}
 
-const Content = _ref => {
-  let {placement = 'left', openStyle, closedStyle} = _ref,
-    props = _objectWithoutProperties(_ref, [
-      'placement',
-      'openStyle',
-      'closedStyle',
-    ])
+const Target = _ref => {
+  let {placement = 'left', openStyle} = _ref,
+    props = _objectWithoutProperties(_ref, ['placement', 'openStyle'])
 
-  return __reactCreateElement__(
-    _modal.Dialog,
-    _extends(
-      {
-        closedStyle: _extends({}, defaultClosedStyles[placement], closedStyle),
-        openStyle: _extends(
-          {},
-          defaultClosedStyles[placement],
-          defaultOpenStyles,
-          openStyle
-        ),
-      },
-      props
-    )
+  const childProps = props.children.props
+  return createElement(
+    _collapse.Target,
+    _extends(props, {
+      openStyle: _extends({}, defaultOpenStyles, openStyle),
+    }),
+    cloneElement(props.children, {
+      style: _extends(
+        {},
+        defaultStyles,
+        defaultClosedStyles[placement],
+        childProps.style
+      ),
+    })
   )
@@ -143,4 +147,4 @@ }
 
-exports.Content = Content
-Content.propTypes = {
+exports.Target = Target
+Target.propTypes = {
   placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
@@ -150,3 +154,3 @@ }
 if (__DEV__) {
-  Content.displayName = 'Content'
+  Target.displayName = 'Target'
 }

dist/es/index.d.ts

@@ -1,28 +0,28 @@
-import React from 'react'
+import {FC} from 'react'
 import {
-  DialogProps,
-  ModalControls,
-  CloseProps as CloseProps_,
-  TriggerProps as TriggerProps_,
-  ModalProps,
-  ModalContextValue,
-} from '@accessible/modal'
+  TargetProps as CollapseTargetProps,
+  CollapseControls,
+  CloseProps as CollapseCloseProps,
+  TriggerProps as CollapseTriggerProps,
+  CollapseProps,
+  CollapseContextValue,
+} from '@accessible/collapse'
 export {
-  Modal as Drawer,
-  ModalContext as DrawerContext,
-  ModalConsumer as DrawerConsumer,
-  useModal as useDrawer,
+  Collapse as Drawer,
+  CollapseContext as DrawerContext,
+  CollapseConsumer as DrawerConsumer,
+  useCollapse as useDrawer,
+  Close,
   Trigger,
-  Close,
   useIsOpen,
   useControls,
-} from '@accessible/modal'
-export interface DrawerContextValue extends ModalContextValue {}
-export interface DrawerProps extends ModalProps {}
-export interface DrawerControls extends ModalControls {}
-export interface TriggerProps extends TriggerProps_ {}
-export interface TriggerProps extends CloseProps_ {}
-export interface ContentProps extends DialogProps {
+} from '@accessible/collapse'
+export interface DrawerContextValue extends CollapseContextValue {}
+export interface DrawerProps extends CollapseProps {}
+export interface DrawerControls extends CollapseControls {}
+export interface TriggerProps extends CollapseTriggerProps {}
+export interface CloseProps extends CollapseCloseProps {}
+export interface TargetProps extends CollapseTargetProps {
   placement?: 'top' | 'right' | 'bottom' | 'left'
 }
-export declare const Content: React.FC<ContentProps>
+export declare const Target: FC<TargetProps>

dist/es/index.js

 import _pt from 'prop-types'
 
-function _extends() {
-  _extends =
-    Object.assign ||
-    function(target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i]
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key]
-          }
-        }
-      }
-      return target
-    }
-  return _extends.apply(this, arguments)
-}
-
 function _objectWithoutProperties(source, excluded) {
@@ -50,14 +33,14 @@ if (source == null) return {}
 import React from 'react'
-const __reactCreateElement__ = React.createElement
-import {Dialog} from '@accessible/modal'
+const {createElement, cloneElement} = React
+import {Target as CollapseTarget} from '@accessible/collapse'
 export {
-  Modal as Drawer,
-  ModalContext as DrawerContext,
-  ModalConsumer as DrawerConsumer,
-  useModal as useDrawer,
+  Collapse as Drawer,
+  CollapseContext as DrawerContext,
+  CollapseConsumer as DrawerConsumer,
+  useCollapse as useDrawer,
+  Close,
   Trigger,
-  Close,
   useIsOpen,
   useControls,
-} from '@accessible/modal'
+} from '@accessible/collapse'
 
@@ -104,28 +87,28 @@ const __DEV__ =
 }
-export const Content = _ref => {
-  let {placement = 'left', openStyle, closedStyle} = _ref,
-    props = _objectWithoutProperties(_ref, [
-      'placement',
-      'openStyle',
-      'closedStyle',
-    ])
+const defaultStyles = {
+  position: 'fixed',
+  margin: 'auto',
+  left: '50%',
+  top: '50%',
+  transform: 'translate3d(-50%, -50%, 0)',
+  zIndex: 1,
+}
+export const Target = _ref => {
+  let {placement = 'left', openStyle} = _ref,
+    props = _objectWithoutProperties(_ref, ['placement', 'openStyle'])
 
-  return __reactCreateElement__(
-    Dialog,
-    _extends(
-      {
-        closedStyle: Object.assign(
-          {},
-          defaultClosedStyles[placement],
-          closedStyle
-        ),
-        openStyle: Object.assign(
-          {},
-          defaultClosedStyles[placement],
-          defaultOpenStyles,
-          openStyle
-        ),
-      },
-      props
-    )
+  const childProps = props.children.props
+  return createElement(
+    CollapseTarget,
+    Object.assign(props, {
+      openStyle: Object.assign({}, defaultOpenStyles, openStyle),
+    }),
+    cloneElement(props.children, {
+      style: Object.assign(
+        {},
+        defaultStyles,
+        defaultClosedStyles[placement],
+        childProps.style
+      ),
+    })
   )
@@ -135,3 +118,3 @@ }
 
-Content.propTypes = {
+Target.propTypes = {
   placement: _pt.oneOf(['top', 'right', 'bottom', 'left']),
@@ -141,3 +124,3 @@ }
 if (__DEV__) {
-  Content.displayName = 'Content'
+  Target.displayName = 'Target'
 }

package.json

 {
   "name": "@accessible/drawer",
-  "version": "1.0.6",
+  "version": "2.0.0",
   "homepage": "https://github.com/accessible-ui/drawer#readme",
@@ -89,3 +89,3 @@ "repository": "github:accessible-ui/drawer",
   "dependencies": {
-    "@accessible/modal": "^1.1.0"
+    "@accessible/collapse": "^1.0.5"
   },
@@ -92,0 +92,0 @@ "peerDependencies": {

README.md

@@ -30,3 +30,3 @@ <hr>
 An accessible and versatile drawer component for React. This drawer is just a few new styles
-on top of [@accessible/modal](https://github.com/accessible-ui/modal) so when using both,
+on top of [@accessible/collapse](https://github.com/accessible-ui/collapse) so when using both,
 the drawer costs you nothing.
@@ -38,5 +38,5 @@
   works with CSS-in-JS, SASS, plain CSS, plain `style` objects, anything!
-- **Portal-friendly** The drawer content will render into React portals of your choice when configured
+- **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
+- **a11y/aria-compliant** This component works with screen readers out of the target and manages
   focus for you.
@@ -49,7 +49,7 @@
 ```jsx harmony
-import {Drawer, Content, Trigger, Close} from '@accessible/drawer'
+import {Drawer, Target, Trigger, Close} from '@accessible/drawer'
 
 const Component = () => (
   <Drawer>
-    <Content>
+    <Target>
       <div className="my-drawer">
@@ -60,3 +60,3 @@ <Close>
       </div>
-    </Content>
+    </Target>
 
@@ -74,8 +74,8 @@ <Trigger>
 
-| Component               | Description                                                                                                   |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------- |
-| [`<Drawer>`](#drawer)   | This component creates the context for your drawer box and trigger and contains some configuration options.   |
-| [`<Content>`](#content) | This component wraps any React element and turns it into a drawer box.                                        |
-| [`<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.                                     |
+| [`<Close>`](#close)     | This is a convenience component that wraps any React element and adds an onClick handler to close the drawer.  |  |
 
@@ -92,3 +92,3 @@ ### Hooks
 
-This component creates the context for your drawer box and trigger and contains some
+This component creates the context for your drawer target and trigger and contains some
 configuration options.
@@ -103,20 +103,20 @@
 | 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 contents and any other children.                                                                                                                                       |
+| 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.                                                                                                                                        |
 
-### `<Content>`
+### `<Target>`
 
-This component wraps any React element and turns it into a drawer content.
+This component wraps any React element and turns it into a drawer target.
 
 #### Props
 
-| 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 content 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`                                                         | `"modal--open"` | 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 box'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 box's visibility.                                                               |
-| 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     | <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.                                                            |
+| 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.                                                                                      |
 
@@ -126,5 +126,5 @@ #### Example
 ```jsx harmony
-<Content>
+<Target>
   <div className="alert">Alert</div>
-</Content>
+</Target>
 
@@ -134,5 +134,3 @@ // <div
 //   aria-hidden="true"
-//   aria-drawer="false"
-//   id="modal--12"
-//   role="content"
+//   id="collapse--12"
 //   style="visibility: hidden; position: fixed; margin: auto; left: 0px; right: 0px; top: 50%; transform: translateY(-50%); z-index: 1;"
@@ -147,3 +145,3 @@ // >
 This component wraps any React element and adds an `onClick` handler which toggles the open state
-of the drawer content.
+of the drawer target.
 
@@ -167,4 +165,3 @@ #### Props
 //   class="my-button"
-//   aria-controls="modal--12"
-//   aria-haspopup="content"
+//   aria-controls="collapse--12"
 //   aria-expanded="false"
@@ -193,4 +190,3 @@ // >
 //   class="my-button"
-//   aria-controls="modal--12"
-//   aria-haspopup="content"
+//   aria-controls="collapse--12"
 //   aria-expanded="false"
@@ -237,7 +233,7 @@ // >
   return (
-    <Content>
+    <Target>
       <div className="my-drawer">
         <button onClick={close}>Close me</button>
       </div>
-    </Content>
+    </Target>
   )
@@ -257,5 +253,5 @@ }
   return (
-    <Content>
+    <Target>
       <div className="my-drawer">Am I open? {isOpen ? 'Yes' : 'No'}</div>
-    </Content>
+    </Target>
   )
@@ -262,0 +258,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

26172

decreased by-0.35%

Lines of code

305

decreased by-3.79%

Number of lines in readme file

250

decreased by-1.57%

Dependency changes

• + Added@accessible/collapse@^1.0.5

• + Added@accessible/button@1.1.1(transitive)

• + Added@accessible/collapse@1.1.1(transitive)

• + Added@accessible/use-id@1.1.2(transitive)

• + Added@accessible/use-keycode@3.0.14.0.2(transitive)

• + Added@react-hook/event@1.2.6(transitive)

• - Removed@accessible/modal@^1.1.0

• - Removed@accessible/modal@1.1.0(transitive)

• - Removed@accessible/use-keycode@1.0.3(transitive)

• - Removed@reach/auto-id@0.6.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedscheduler@0.19.1(transitive)