Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@arch-ui/modal-utils

Package Overview
Dependencies
Maintainers
9
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@arch-ui/modal-utils - npm Package Compare versions

Comparing version 1.0.13 to 1.0.14

76

CHANGELOG.md
# @arch-ui/modal-utils
## 1.0.14
### Patch Changes
- [`04bf1e4bb`](https://github.com/keystonejs/keystone-5/commit/04bf1e4bb0223f4e2e06664bbc9e95c51118eb84) [#2](https://github.com/keystonejs/keystone-5/pull/2) Thanks [@bladey](https://github.com/bladey)! - Updated repository URL in package.json.
- Updated dependencies [[`04bf1e4bb`](https://github.com/keystonejs/keystone-5/commit/04bf1e4bb0223f4e2e06664bbc9e95c51118eb84)]:
- @arch-ui/color-utils@0.0.3
- @arch-ui/theme@0.0.12
## 1.0.13

@@ -7,11 +17,11 @@

- [`6cb4476ff`](https://github.com/keystonejs/keystone/commit/6cb4476ff15923933862c1cd7d4b1ade794106c6) [#3481](https://github.com/keystonejs/keystone/pull/3481) Thanks [@Noviny](https://github.com/Noviny)! - Updated dependencies through a major version - this shouldn't require change by consumers.
- [`6cb4476ff`](https://github.com/keystonejs/keystone-5/commit/6cb4476ff15923933862c1cd7d4b1ade794106c6) [#3481](https://github.com/keystonejs/keystone-5/pull/3481) Thanks [@Noviny](https://github.com/Noviny)! - Updated dependencies through a major version - this shouldn't require change by consumers.
* [`5935b89f8`](https://github.com/keystonejs/keystone/commit/5935b89f8862b36f14d09da68f056f759a860f3e) [#3477](https://github.com/keystonejs/keystone/pull/3477) Thanks [@Noviny](https://github.com/Noviny)! - Updating dependencies:
* [`5935b89f8`](https://github.com/keystonejs/keystone-5/commit/5935b89f8862b36f14d09da68f056f759a860f3e) [#3477](https://github.com/keystonejs/keystone-5/pull/3477) Thanks [@Noviny](https://github.com/Noviny)! - Updating dependencies:
These changes bring the keystone dev experience inline with installing keystone from npm :D
- [`0fc878fa9`](https://github.com/keystonejs/keystone/commit/0fc878fa918c3196196f943f195ffaa62fce504b) [#3439](https://github.com/keystonejs/keystone/pull/3439) Thanks [@renovate](https://github.com/apps/renovate)! - Updated babel dependencies.
- [`0fc878fa9`](https://github.com/keystonejs/keystone-5/commit/0fc878fa918c3196196f943f195ffaa62fce504b) [#3439](https://github.com/keystonejs/keystone-5/pull/3439) Thanks [@renovate](https://github.com/apps/renovate)! - Updated babel dependencies.
- Updated dependencies [[`0fc878fa9`](https://github.com/keystonejs/keystone/commit/0fc878fa918c3196196f943f195ffaa62fce504b)]:
- Updated dependencies [[`0fc878fa9`](https://github.com/keystonejs/keystone-5/commit/0fc878fa918c3196196f943f195ffaa62fce504b)]:
- @arch-ui/theme@0.0.11

@@ -23,3 +33,3 @@

- [`51aef1ef0`](https://github.com/keystonejs/keystone/commit/51aef1ef06a89422e89a6118b7820848d5970669) [#3146](https://github.com/keystonejs/keystone/pull/3146) Thanks [@Vultraz](https://github.com/Vultraz)! - Migrated to @primer/octicons-react v10.
- [`51aef1ef0`](https://github.com/keystonejs/keystone-5/commit/51aef1ef06a89422e89a6118b7820848d5970669) [#3146](https://github.com/keystonejs/keystone-5/pull/3146) Thanks [@Vultraz](https://github.com/Vultraz)! - Migrated to @primer/octicons-react v10.

@@ -30,3 +40,3 @@ ## 1.0.11

- [`a212ae6e7`](https://github.com/keystonejs/keystone/commit/a212ae6e780d36160cf6089a59601acaaadaf210) [#3131](https://github.com/keystonejs/keystone/pull/3131) Thanks [@Vultraz](https://github.com/Vultraz)! - Converted withModalHandlers to a functional component.
- [`a212ae6e7`](https://github.com/keystonejs/keystone-5/commit/a212ae6e780d36160cf6089a59601acaaadaf210) [#3131](https://github.com/keystonejs/keystone-5/pull/3131) Thanks [@Vultraz](https://github.com/Vultraz)! - Converted withModalHandlers to a functional component.

@@ -37,3 +47,3 @@ ## 1.0.10

- [`577b5e69`](https://github.com/keystonejs/keystone/commit/577b5e69ac4f949d1be2a80d8f391cb0a4b1333a) [#2799](https://github.com/keystonejs/keystone/pull/2799) Thanks [@MadeByMike](https://github.com/MadeByMike)! - Upgraded React and Emotion packages.
- [`577b5e69`](https://github.com/keystonejs/keystone-5/commit/577b5e69ac4f949d1be2a80d8f391cb0a4b1333a) [#2799](https://github.com/keystonejs/keystone-5/pull/2799) Thanks [@MadeByMike](https://github.com/MadeByMike)! - Upgraded React and Emotion packages.

@@ -44,3 +54,3 @@ ## 1.0.9

- Updated dependencies [[`0de5f232`](https://github.com/keystonejs/keystone/commit/0de5f2321ef8f9fe6dd247c3201372a4156e61e9)]:
- Updated dependencies [[`0de5f232`](https://github.com/keystonejs/keystone-5/commit/0de5f2321ef8f9fe6dd247c3201372a4156e61e9)]:
- @arch-ui/theme@0.0.10

@@ -52,7 +62,7 @@

- [`6b353eff`](https://github.com/keystonejs/keystone/commit/6b353effc8b617137a3978b2c845e01403889722) Thanks [@timleslie](https://github.com/timleslie)! - Upgraded React to 16.13.0.
- [`6b353eff`](https://github.com/keystonejs/keystone-5/commit/6b353effc8b617137a3978b2c845e01403889722) Thanks [@timleslie](https://github.com/timleslie)! - Upgraded React to 16.13.0.
* [`5ba330b8`](https://github.com/keystonejs/keystone/commit/5ba330b8b2609ea0033a636daf9a215a5a192c20) [#2487](https://github.com/keystonejs/keystone/pull/2487) Thanks [@Noviny](https://github.com/Noviny)! - Small changes to package.json (mostly adding a repository field)
* [`5ba330b8`](https://github.com/keystonejs/keystone-5/commit/5ba330b8b2609ea0033a636daf9a215a5a192c20) [#2487](https://github.com/keystonejs/keystone-5/pull/2487) Thanks [@Noviny](https://github.com/Noviny)! - Small changes to package.json (mostly adding a repository field)
* Updated dependencies [[`5ba330b8`](https://github.com/keystonejs/keystone/commit/5ba330b8b2609ea0033a636daf9a215a5a192c20)]:
* Updated dependencies [[`5ba330b8`](https://github.com/keystonejs/keystone-5/commit/5ba330b8b2609ea0033a636daf9a215a5a192c20)]:
- @arch-ui/color-utils@0.0.2

@@ -65,7 +75,7 @@ - @arch-ui/theme@0.0.9

- [`d8a7b8a2`](https://github.com/keystonejs/keystone/commit/d8a7b8a23b4c3e1545d101a92323be165ad362e2) [#2395](https://github.com/keystonejs/keystone/pull/2395) Thanks [@timleslie](https://github.com/timleslie)! - Upgraded all `@emotion.*` dependencies.
- [`d8a7b8a2`](https://github.com/keystonejs/keystone-5/commit/d8a7b8a23b4c3e1545d101a92323be165ad362e2) [#2395](https://github.com/keystonejs/keystone-5/pull/2395) Thanks [@timleslie](https://github.com/timleslie)! - Upgraded all `@emotion.*` dependencies.
* [`dcdd8ed9`](https://github.com/keystonejs/keystone/commit/dcdd8ed9142cf3328a7af80bc167ef93c7669b09) [#2381](https://github.com/keystonejs/keystone/pull/2381) Thanks [@timleslie](https://github.com/timleslie)! - Updated `@babel/*` dependency packages to latest versions.
* [`dcdd8ed9`](https://github.com/keystonejs/keystone-5/commit/dcdd8ed9142cf3328a7af80bc167ef93c7669b09) [#2381](https://github.com/keystonejs/keystone-5/pull/2381) Thanks [@timleslie](https://github.com/timleslie)! - Updated `@babel/*` dependency packages to latest versions.
* Updated dependencies [[`dcdd8ed9`](https://github.com/keystonejs/keystone/commit/dcdd8ed9142cf3328a7af80bc167ef93c7669b09)]:
* Updated dependencies [[`dcdd8ed9`](https://github.com/keystonejs/keystone-5/commit/dcdd8ed9142cf3328a7af80bc167ef93c7669b09)]:
- @arch-ui/theme@0.0.8

@@ -77,4 +87,4 @@

- [`38f88b62`](https://github.com/keystonejs/keystone/commit/38f88b62d9592d91b56528d4d9c40e9399440c4a) [#2144](https://github.com/keystonejs/keystone/pull/2144) - Upgraded all @babel/\* dependencies.
- Updated dependencies [[`38f88b62`](https://github.com/keystonejs/keystone/commit/38f88b62d9592d91b56528d4d9c40e9399440c4a)]:
- [`38f88b62`](https://github.com/keystonejs/keystone-5/commit/38f88b62d9592d91b56528d4d9c40e9399440c4a) [#2144](https://github.com/keystonejs/keystone-5/pull/2144) - Upgraded all @babel/\* dependencies.
- Updated dependencies [[`38f88b62`](https://github.com/keystonejs/keystone-5/commit/38f88b62d9592d91b56528d4d9c40e9399440c4a)]:
- @arch-ui/theme@0.0.7

@@ -86,6 +96,6 @@

- [`129b0f6`](https://github.com/keystonejs/keystone/commit/129b0f61f34adb7482901d2da4ddb14ce1aedd62) [#2092](https://github.com/keystonejs/keystone/pull/2092) - Upgrade all Babel deps to the same version (7.7.4)
- [`129b0f6`](https://github.com/keystonejs/keystone-5/commit/129b0f61f34adb7482901d2da4ddb14ce1aedd62) [#2092](https://github.com/keystonejs/keystone-5/pull/2092) - Upgrade all Babel deps to the same version (7.7.4)
* [`129b0f6`](https://github.com/keystonejs/keystone/commit/129b0f61f34adb7482901d2da4ddb14ce1aedd62) [#2092](https://github.com/keystonejs/keystone/pull/2092) - Upgrade react-transition-group to 4.3.0
* Updated dependencies [[`129b0f6`](https://github.com/keystonejs/keystone/commit/129b0f61f34adb7482901d2da4ddb14ce1aedd62)]:
* [`129b0f6`](https://github.com/keystonejs/keystone-5/commit/129b0f61f34adb7482901d2da4ddb14ce1aedd62) [#2092](https://github.com/keystonejs/keystone-5/pull/2092) - Upgrade react-transition-group to 4.3.0
* Updated dependencies [[`129b0f6`](https://github.com/keystonejs/keystone-5/commit/129b0f61f34adb7482901d2da4ddb14ce1aedd62)]:
- @arch-ui/theme@0.0.6

@@ -97,3 +107,3 @@

- [`946a52fd`](https://github.com/keystonejs/keystone/commit/946a52fd7057bb73f4ffd465ef51498172926866) [#1995](https://github.com/keystonejs/keystone/pull/1995) Thanks [@Vultraz](https://github.com/Vultraz)! - Updated `react` and `react-dom` to 16.12.0.
- [`946a52fd`](https://github.com/keystonejs/keystone-5/commit/946a52fd7057bb73f4ffd465ef51498172926866) [#1995](https://github.com/keystonejs/keystone-5/pull/1995) Thanks [@Vultraz](https://github.com/Vultraz)! - Updated `react` and `react-dom` to 16.12.0.

@@ -104,5 +114,5 @@ ## 1.0.3

- [`8226eb47`](https://github.com/keystonejs/keystone/commit/8226eb4709ea8ad5773c900eaaa96068d3cb6bad) [#1819](https://github.com/keystonejs/keystone/pull/1819) Thanks [@w01fgang](https://github.com/w01fgang)! - Upgraded `flow` and fixed flow errors and (probably) bugs.
- [`8226eb47`](https://github.com/keystonejs/keystone-5/commit/8226eb4709ea8ad5773c900eaaa96068d3cb6bad) [#1819](https://github.com/keystonejs/keystone-5/pull/1819) Thanks [@w01fgang](https://github.com/w01fgang)! - Upgraded `flow` and fixed flow errors and (probably) bugs.
* [`8226eb47`](https://github.com/keystonejs/keystone/commit/8226eb4709ea8ad5773c900eaaa96068d3cb6bad) [#1819](https://github.com/keystonejs/keystone/pull/1819) Thanks [@w01fgang](https://github.com/w01fgang)! - Upgraded `@emotion/core` and `@emotion/styled`.
* [`8226eb47`](https://github.com/keystonejs/keystone-5/commit/8226eb4709ea8ad5773c900eaaa96068d3cb6bad) [#1819](https://github.com/keystonejs/keystone-5/pull/1819) Thanks [@w01fgang](https://github.com/w01fgang)! - Upgraded `@emotion/core` and `@emotion/styled`.

@@ -113,7 +123,7 @@ ## 1.0.2

- [42c3fbc9](https://github.com/keystonejs/keystone/commit/42c3fbc9): Upgrade emotion to 10.0.14
- [42c3fbc9](https://github.com/keystonejs/keystone-5/commit/42c3fbc9): Upgrade emotion to 10.0.14
## 1.0.1
- Updated dependencies [19fe6c1b](https://github.com/keystonejs/keystone/commit/19fe6c1b):
- Updated dependencies [19fe6c1b](https://github.com/keystonejs/keystone-5/commit/19fe6c1b):
- @arch-ui/theme@0.0.5

@@ -125,3 +135,3 @@

- [5f1a5cf3](https://github.com/keystonejs/keystone/commit/5f1a5cf3):
- [5f1a5cf3](https://github.com/keystonejs/keystone-5/commit/5f1a5cf3):

@@ -132,11 +142,11 @@ - Change transition API from a component which uses cloneElement to a function that accepts a transitionState and returns a style object

- [a03fd601](https://github.com/keystonejs/keystone/commit/a03fd601):
- [a03fd601](https://github.com/keystonejs/keystone-5/commit/a03fd601):
- add some delight to the popout component
- [81dc0be5](https://github.com/keystonejs/keystone/commit/81dc0be5):
- [81dc0be5](https://github.com/keystonejs/keystone-5/commit/81dc0be5):
- Update dependencies
- [5f1a5cf3](https://github.com/keystonejs/keystone/commit/5f1a5cf3):
- [5f1a5cf3](https://github.com/keystonejs/keystone-5/commit/5f1a5cf3):

@@ -147,3 +157,3 @@ - Update usage of transition API

- [patch][e75c105c](https://github.com/keystonejs/keystone/commit/e75c105c):
- [patch][e75c105c](https://github.com/keystonejs/keystone-5/commit/e75c105c):

@@ -154,3 +164,3 @@ - admin revamp

- [patch][302930a4](https://github.com/keystonejs/keystone/commit/302930a4):
- [patch][302930a4](https://github.com/keystonejs/keystone-5/commit/302930a4):

@@ -161,11 +171,11 @@ - Minor internal code cleanups

- [patch][11c372fa](https://github.com/keystonejs/keystone/commit/11c372fa):
- [patch][11c372fa](https://github.com/keystonejs/keystone-5/commit/11c372fa):
- Update minor-level dependencies
- [patch][d9a1be91](https://github.com/keystonejs/keystone/commit/d9a1be91):
- [patch][d9a1be91](https://github.com/keystonejs/keystone-5/commit/d9a1be91):
- Update dependencies
- [patch][7417ea3a](https://github.com/keystonejs/keystone/commit/7417ea3a):
- [patch][7417ea3a](https://github.com/keystonejs/keystone-5/commit/7417ea3a):

@@ -172,0 +182,0 @@ - Update patch-level dependencies

24

dist/modal-utils.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _extends = require('@babel/runtime/helpers/extends');

@@ -18,11 +18,5 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');

var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
var React__default = /*#__PURE__*/_interopDefault(React);
var ScrollLock__default = /*#__PURE__*/_interopDefault(ScrollLock);
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
const transitionDurationMs = 220;

@@ -36,7 +30,7 @@ const transitionDuration = `${transitionDurationMs}ms`;

} = _ref,
props = _objectWithoutProperties__default['default'](_ref, ["children", "isOpen"]);
props = _objectWithoutProperties(_ref, ["children", "isOpen"]);
return /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.TransitionGroup, {
component: null
}, isOpen ? /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.Transition, _extends__default['default']({
}, isOpen ? /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.Transition, _extends({
appear: true,

@@ -52,7 +46,7 @@ mountOnEnter: true,

} = _ref2,
props = _objectWithoutProperties__default['default'](_ref2, ["isOpen"]);
props = _objectWithoutProperties(_ref2, ["isOpen"]);
return /*#__PURE__*/React__default['default'].createElement(TransitionProvider, {
isOpen: Boolean(isOpen)
}, state => /*#__PURE__*/React__default['default'].createElement(Comp, _extends__default['default']({
}, state => /*#__PURE__*/React__default['default'].createElement(Comp, _extends({
transitionState: state

@@ -196,3 +190,3 @@ }, props)));

} = _ref,
props = _objectWithoutProperties__default['default'](_ref, ["isTinted", "isLight"]);
props = _objectWithoutProperties(_ref, ["isTinted", "isLight"]);

@@ -205,3 +199,3 @@ let bg = 'transparent';

return core.jsx("div", _extends__default['default']({
return core.jsx("div", _extends({
css: {

@@ -251,3 +245,3 @@ backgroundColor: bg,

} = _ref,
props = _objectWithoutProperties__default['default'](_ref, ["defaultIsOpen", "mode", "onClose", "onOpen", "target"]);
props = _objectWithoutProperties(_ref, ["defaultIsOpen", "mode", "onClose", "onOpen", "target"]);

@@ -354,3 +348,3 @@ const [isOpen, setIsOpen] = React.useState(defaultIsOpen); // TODO: remove. Wrapped components (currently only Dropdown) use these for calculating position,

onExited: onClose
}, transitionState => /*#__PURE__*/React__default['default'].createElement(WrappedComponent, _extends__default['default']({
}, transitionState => /*#__PURE__*/React__default['default'].createElement(WrappedComponent, _extends({
close: close,

@@ -357,0 +351,0 @@ open: open,

473

dist/modal-utils.cjs.prod.js

@@ -1,68 +0,63 @@

"use strict";
'use strict';
Object.defineProperty(exports, "__esModule", {
value: !0
});
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require("@babel/runtime/helpers/defineProperty"), _extends = require("@babel/runtime/helpers/extends"), _objectWithoutProperties = require("@babel/runtime/helpers/objectWithoutProperties"), React = require("react"), reactTransitionGroup = require("react-transition-group"), core = require("@emotion/core"), theme = require("@arch-ui/theme"), colorUtils = require("@arch-ui/color-utils"), ScrollLock = require("react-scrolllock");
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _extends = require('@babel/runtime/helpers/extends');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var core = require('@emotion/core');
var theme = require('@arch-ui/theme');
var colorUtils = require('@arch-ui/color-utils');
var ScrollLock = require('react-scrolllock');
function _interopDefault(e) {
return e && e.__esModule ? e : {
default: e
};
}
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var _defineProperty__default = _interopDefault(_defineProperty), _extends__default = _interopDefault(_extends), _objectWithoutProperties__default = _interopDefault(_objectWithoutProperties), React__default = _interopDefault(React), ScrollLock__default = _interopDefault(ScrollLock);
var React__default = /*#__PURE__*/_interopDefault(React);
var ScrollLock__default = /*#__PURE__*/_interopDefault(ScrollLock);
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
enumerableOnly && (symbols = symbols.filter((function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
}))), keys.push.apply(keys, symbols);
}
return keys;
}
const transitionDurationMs = 220;
const transitionDuration = `${transitionDurationMs}ms`;
const transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
const TransitionProvider = (_ref) => {
let {
children,
isOpen
} = _ref,
props = _objectWithoutProperties(_ref, ["children", "isOpen"]);
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(Object(source), !0).forEach((function(key) {
_defineProperty__default.default(target, key, source[key]);
})) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach((function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
}));
}
return target;
}
const transitionDurationMs = 220, transitionDuration = "220ms", transitionTimingFunction = "cubic-bezier(0.2, 0, 0, 1)", TransitionProvider = _ref => {
let {children: children, isOpen: isOpen} = _ref, props = _objectWithoutProperties__default.default(_ref, [ "children", "isOpen" ]);
return React__default.default.createElement(reactTransitionGroup.TransitionGroup, {
return /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.TransitionGroup, {
component: null
}, isOpen ? React__default.default.createElement(reactTransitionGroup.Transition, _extends__default.default({
appear: !0,
mountOnEnter: !0,
unmountOnExit: !0,
timeout: 220
}, isOpen ? /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.Transition, _extends({
appear: true,
mountOnEnter: true,
unmountOnExit: true,
timeout: transitionDurationMs
}, props), state => children(state)) : null);
}, withTransitionState = Comp => _ref2 => {
let {isOpen: isOpen} = _ref2, props = _objectWithoutProperties__default.default(_ref2, [ "isOpen" ]);
return React__default.default.createElement(TransitionProvider, {
};
const withTransitionState = Comp => (_ref2) => {
let {
isOpen
} = _ref2,
props = _objectWithoutProperties(_ref2, ["isOpen"]);
return /*#__PURE__*/React__default['default'].createElement(TransitionProvider, {
isOpen: Boolean(isOpen)
}, state => React__default.default.createElement(Comp, _extends__default.default({
}, state => /*#__PURE__*/React__default['default'].createElement(Comp, _extends({
transitionState: state
}, props)));
};
}; // ==============================
// Transitions
// ==============================
function makeTransitionBase(transitionProperty) {
return {
transitionProperty: transitionProperty,
transitionDuration: "220ms",
transitionTimingFunction: transitionTimingFunction
transitionProperty,
transitionDuration,
transitionTimingFunction
};
}
const fade = transitionState => _objectSpread(_objectSpread({}, makeTransitionBase("opacity")), {}, {
const fade = transitionState => _objectSpread(_objectSpread({}, makeTransitionBase('opacity')), {}, {
opacity: {

@@ -74,8 +69,11 @@ entering: 1,

}[transitionState]
}), slideUp = transitionState => {
}); // Slide Up
// ------------------------------
const slideUp = transitionState => {
const out = {
opacity: 0,
transform: "scale(0.95) translate3d(0,20px,0)"
transform: 'scale(0.95) translate3d(0,20px,0)'
};
return _objectSpread(_objectSpread({}, makeTransitionBase("opacity, transform")), {
return _objectSpread(_objectSpread({}, makeTransitionBase('opacity, transform')), {
entering: {

@@ -90,3 +88,6 @@ opacity: 1

}[transitionState]);
}, slideDown = (transitionState, {from: from = "-8px"} = {}) => {
};
const slideDown = (transitionState, {
from = '-8px'
} = {}) => {
const out = {

@@ -96,3 +97,3 @@ opacity: 0,

};
return _objectSpread(_objectSpread({}, makeTransitionBase("opacity, transform")), {
return _objectSpread(_objectSpread({}, makeTransitionBase('opacity, transform')), {
entering: {

@@ -107,13 +108,18 @@ opacity: 1

}[transitionState]);
}, fromMap = {
left: "-100%",
right: "100%"
}, slideInHorizontal = (transitionState, {slideInFrom: slideInFrom}) => {
};
const fromMap = {
left: '-100%',
right: '100%'
}; // NOTE: should be able to use $Keys<typeof fromMap>
const slideInHorizontal = (transitionState, {
slideInFrom
}) => {
const initial = fromMap[slideInFrom];
return _objectSpread(_objectSpread({}, makeTransitionBase("transform")), {
return _objectSpread(_objectSpread({}, makeTransitionBase('transform')), {
entering: {
transform: "translate3d(0,0,0)"
transform: 'translate3d(0,0,0)'
},
entered: {
transform: "translate3d(0,0,0)"
transform: 'translate3d(0,0,0)'
},

@@ -127,50 +133,68 @@ exiting: {

}[transitionState]);
}, zoomInDown = transitionState => _objectSpread({
transformOrigin: "top",
transitionProperty: "opacity, transform",
transitionDuration: "220ms",
transitionTimingFunction: transitionTimingFunction
}, {
entering: {
opacity: 1,
transform: "translate3d(0, 0, 0)"
},
entered: {
opacity: 1,
transform: "translate3d(0, 0, 0)"
},
exiting: {
opacity: 0,
transform: "scale3d(0.33, 0.33, 0.33) translate3d(0, -100%, 0)"
},
exited: {
opacity: 0,
transform: "scale3d(0.33, 0.33, 0.33) translate3d(0, -100%, 0)"
};
const zoomInDown = transitionState => {
return _objectSpread({
transformOrigin: 'top',
transitionProperty: 'opacity, transform',
transitionDuration,
transitionTimingFunction
}, {
entering: {
opacity: 1,
transform: 'translate3d(0, 0, 0)'
},
entered: {
opacity: 1,
transform: 'translate3d(0, 0, 0)'
},
exiting: {
opacity: 0,
transform: 'scale3d(0.33, 0.33, 0.33) translate3d(0, -100%, 0)'
},
exited: {
opacity: 0,
transform: 'scale3d(0.33, 0.33, 0.33) translate3d(0, -100%, 0)'
}
}[transitionState]);
};
const springDown = transitionState => {
return _objectSpread({
transformOrigin: 'top',
transitionProperty: 'opacity, transform',
transitionDuration,
transitionTimingFunction: 'cubic-bezier(0.2, 0, 0.16, 1.6)'
}, {
entering: {
opacity: 1,
transform: 'translate3d(0, 0, 0)'
},
entered: {
opacity: 1,
transform: 'translate3d(0, 0, 0)'
},
exiting: {
opacity: 0,
transform: 'scale(0.93) translate3d(0, -12px, 0)'
},
exited: {
opacity: 0,
transform: 'scale(0.93) translate3d(0, -12px, 0)'
}
}[transitionState]);
};
const Blanket = (_ref) => {
let {
isTinted,
isLight
} = _ref,
props = _objectWithoutProperties(_ref, ["isTinted", "isLight"]);
let bg = 'transparent';
if (isTinted) {
bg = isLight ? 'rgba(255, 255, 255, 0.5)' : colorUtils.alpha(theme.colors.N100, 0.2);
}
}[transitionState]), springDown = transitionState => _objectSpread({
transformOrigin: "top",
transitionProperty: "opacity, transform",
transitionDuration: "220ms",
transitionTimingFunction: "cubic-bezier(0.2, 0, 0.16, 1.6)"
}, {
entering: {
opacity: 1,
transform: "translate3d(0, 0, 0)"
},
entered: {
opacity: 1,
transform: "translate3d(0, 0, 0)"
},
exiting: {
opacity: 0,
transform: "scale(0.93) translate3d(0, -12px, 0)"
},
exited: {
opacity: 0,
transform: "scale(0.93) translate3d(0, -12px, 0)"
}
}[transitionState]), Blanket = _ref => {
let {isTinted: isTinted, isLight: isLight} = _ref, props = _objectWithoutProperties__default.default(_ref, [ "isTinted", "isLight" ]), bg = "transparent";
return isTinted && (bg = isLight ? "rgba(255, 255, 255, 0.5)" : colorUtils.alpha(theme.colors.N100, .2)),
core.jsx("div", _extends__default.default({
return core.jsx("div", _extends({
css: {

@@ -180,3 +204,3 @@ backgroundColor: bg,

left: 0,
position: "fixed",
position: 'fixed',
right: 0,

@@ -187,3 +211,16 @@ top: 0,

}, props));
}, getDisplayName = C => `withModalHandlers(${C.displayName || C.name || "Component"})`, Target = React.memo(({isOpen: isOpen, mode: mode, target: target, targetRef: targetRef, open: open, toggle: toggle}) => {
};
const getDisplayName = C => {
return `withModalHandlers(${C.displayName || C.name || 'Component'})`;
};
const Target = /*#__PURE__*/React.memo(({
isOpen,
mode,
target,
targetRef,
open,
toggle
}) => {
const cloneProps = {

@@ -193,76 +230,154 @@ isActive: isOpen,

};
return "click" === mode && (cloneProps.onClick = toggle), "contextmenu" === mode && (cloneProps.onContextMenu = open),
target(cloneProps);
}), withModalHandlers = (WrappedComponent, {transition: transition}) => React.forwardRef((_ref, ref) => {
let {defaultIsOpen: defaultIsOpen = !1, mode: mode = "click", onClose: onClose = (() => {}), onOpen: onOpen = (() => {}), target: target} = _ref, props = _objectWithoutProperties__default.default(_ref, [ "defaultIsOpen", "mode", "onClose", "onOpen", "target" ]);
const [isOpen, setIsOpen] = React.useState(defaultIsOpen), [clientX, setClientX] = React.useState(0), [clientY, setClientY] = React.useState(0), contentNode = React.useRef(), targetNode = React.useRef();
var C;
React.useImperativeHandle(ref, () => ({
open: open,
close: close
})), React.useEffect(() => {
if (!isOpen) return;
const handleMouseDown = event => {
const {target: target} = event;
if (!(target instanceof HTMLElement || target instanceof SVGElement)) return;
const clickNotIn = node => !node.current.contains(target);
isOpen && clickNotIn(contentNode) && clickNotIn(targetNode) && close(event);
}, handleKeyDown = event => {
const {key: key} = event;
"Escape" === key && close(event);
if (mode === 'click') cloneProps.onClick = toggle;
if (mode === 'contextmenu') cloneProps.onContextMenu = open;
return target(cloneProps);
});
const withModalHandlers = (WrappedComponent, {
transition
}) => {
return /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
defaultIsOpen = false,
mode = 'click',
onClose = () => {},
onOpen = () => {},
target
} = _ref,
props = _objectWithoutProperties(_ref, ["defaultIsOpen", "mode", "onClose", "onOpen", "target"]);
const [isOpen, setIsOpen] = React.useState(defaultIsOpen); // TODO: remove. Wrapped components (currently only Dropdown) use these for calculating position,
// but react-popper should be used instead
const [clientX, setClientX] = React.useState(0);
const [clientY, setClientY] = React.useState(0);
const contentNode = React.useRef();
const targetNode = React.useRef(); // Expose open() and close() for via ref
React.useImperativeHandle(ref, () => ({
open,
close
}));
React.useEffect(() => {
// If the dialog was closed, don't do anything. The cleanup function already removed the handlers.
if (!isOpen) return;
const handleMouseDown = event => {
const {
target
} = event;
if (!(target instanceof HTMLElement) && !(target instanceof SVGElement)) {
return;
}
const clickNotIn = node => !node.current.contains(target); // NOTE: Why not use the <Blanket /> component to close?
// We don't want to interrupt the user's flow. Taking this approach allows
// user to click "through" to other elements and close the popout.
if (isOpen && clickNotIn(contentNode) && clickNotIn(targetNode)) {
close(event);
}
};
const handleKeyDown = event => {
const {
key
} = event;
if (key === 'Escape') {
close(event);
}
};
document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('keydown', handleKeyDown, false);
return () => {
document.removeEventListener('mousedown', handleMouseDown);
document.removeEventListener('keydown', handleKeyDown, false);
};
}, [isOpen]);
React.useDebugValue(getDisplayName(WrappedComponent));
const open = event => {
if (event.defaultPrevented) return;
if (mode === 'contextmenu') event.preventDefault();
const {
clientX,
clientY
} = event;
setIsOpen(true);
setClientX(clientX);
setClientY(clientY);
};
return document.addEventListener("mousedown", handleMouseDown), document.addEventListener("keydown", handleKeyDown, !1),
() => {
document.removeEventListener("mousedown", handleMouseDown), document.removeEventListener("keydown", handleKeyDown, !1);
const close = event => {
if (event && event.defaultPrevented) return;
setIsOpen(false);
setClientX(0);
setClientY(0);
};
}, [ isOpen ]), React.useDebugValue(`withModalHandlers(${(C = WrappedComponent).displayName || C.name || "Component"})`);
const open = event => {
if (event.defaultPrevented) return;
"contextmenu" === mode && event.preventDefault();
const {clientX: clientX, clientY: clientY} = event;
setIsOpen(!0), setClientX(clientX), setClientY(clientY);
}, close = event => {
event && event.defaultPrevented || (setIsOpen(!1), setClientX(0), setClientY(0));
}, getContent = ref => {
contentNode.current = ref;
};
return React__default.default.createElement(React.Fragment, null, React__default.default.createElement(Target, {
targetRef: ref => {
const toggle = event => {
if (isOpen) {
close(event);
} else {
open(event);
}
};
const getTarget = ref => {
targetNode.current = ref;
},
target: target,
mode: mode,
isOpen: isOpen,
toggle: event => {
isOpen ? close(event) : open(event);
},
open: open
}), isOpen && React__default.default.createElement(ScrollLock__default.default, null), React__default.default.createElement(TransitionProvider, {
isOpen: isOpen,
onEntered: onOpen,
onExited: onClose
}, transitionState => React__default.default.createElement(WrappedComponent, _extends__default.default({
close: close,
open: open,
getModalRef: getContent,
targetNode: targetNode.current,
contentNode: contentNode.current,
isOpen: isOpen,
mouseCoords: {
clientX: clientX,
clientY: clientY
},
style: transition(transitionState)
}, props))));
});
};
const getContent = ref => {
contentNode.current = ref;
};
return /*#__PURE__*/React__default['default'].createElement(React.Fragment, null, /*#__PURE__*/React__default['default'].createElement(Target, {
targetRef: getTarget,
target: target,
mode: mode,
isOpen: isOpen,
toggle: toggle,
open: open
}), isOpen && /*#__PURE__*/React__default['default'].createElement(ScrollLock__default['default'], null), /*#__PURE__*/React__default['default'].createElement(TransitionProvider, {
isOpen: isOpen,
onEntered: onOpen,
onExited: onClose
}, transitionState => /*#__PURE__*/React__default['default'].createElement(WrappedComponent, _extends({
close: close,
open: open,
getModalRef: getContent,
targetNode: targetNode.current,
contentNode: contentNode.current,
isOpen: isOpen,
mouseCoords: {
clientX,
clientY
},
style: transition(transitionState)
}, props))));
});
};
function generateUEID() {
let first = 46656 * Math.random() | 0, second = 46656 * Math.random() | 0;
return first = ("000" + first.toString(36)).slice(-3), second = ("000" + second.toString(36)).slice(-3),
first + second;
let first = Math.random() * 46656 | 0;
let second = Math.random() * 46656 | 0;
first = ('000' + first.toString(36)).slice(-3);
second = ('000' + second.toString(36)).slice(-3);
return first + second;
}
exports.Blanket = Blanket, exports.TransitionProvider = TransitionProvider, exports.fade = fade,
exports.generateUEID = generateUEID, exports.slideDown = slideDown, exports.slideInHorizontal = slideInHorizontal,
exports.slideUp = slideUp, exports.springDown = springDown, exports.withModalHandlers = withModalHandlers,
exports.withTransitionState = withTransitionState, exports.zoomInDown = zoomInDown;
exports.Blanket = Blanket;
exports.TransitionProvider = TransitionProvider;
exports.fade = fade;
exports.generateUEID = generateUEID;
exports.slideDown = slideDown;
exports.slideInHorizontal = slideInHorizontal;
exports.slideUp = slideUp;
exports.springDown = springDown;
exports.withModalHandlers = withModalHandlers;
exports.withTransitionState = withTransitionState;
exports.zoomInDown = zoomInDown;

7

dist/modal-utils.esm.js

@@ -1,5 +0,5 @@

import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import _extends from '@babel/runtime/helpers/esm/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import React, { forwardRef, useState, useRef, useImperativeHandle, useEffect, useDebugValue, Fragment, memo } from 'react';
import React, { memo, forwardRef, useState, useRef, useImperativeHandle, useEffect, useDebugValue, Fragment } from 'react';
import { TransitionGroup, Transition } from 'react-transition-group';

@@ -11,5 +11,2 @@ import { jsx } from '@emotion/core';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
const transitionDurationMs = 220;

@@ -16,0 +13,0 @@ const transitionDuration = `${transitionDurationMs}ms`;

16

package.json
{
"name": "@arch-ui/modal-utils",
"description": "Modal Utilities as used in @keystonejs Admin UI.",
"version": "1.0.13",
"version": "1.0.14",
"author": "Jed Watson",

@@ -9,12 +9,12 @@ "license": "MIT",

"peerDependencies": {
"react": "^16.13.1"
"react": "^17.0.1"
},
"devDependencies": {
"react": "^16.13.1"
"react": "^17.0.1"
},
"dependencies": {
"@arch-ui/color-utils": "^0.0.2",
"@arch-ui/theme": "^0.0.11",
"@babel/runtime": "^7.11.2",
"@emotion/core": "^10.0.35",
"@arch-ui/color-utils": "^0.0.3",
"@arch-ui/theme": "^0.0.12",
"@babel/runtime": "^7.12.13",
"@emotion/core": "^10.1.1",
"@emotion/styled": "^10.0.27",

@@ -25,3 +25,3 @@ "react-scrolllock": "^5.0.1",

"module": "dist/modal-utils.esm.js",
"repository": "https://github.com/keystonejs/keystone/tree/master/packages/arch/packages/modal-utils"
"repository": "https://github.com/keystonejs/keystone-5/tree/master/packages/arch/packages/modal-utils"
}
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc