🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Sign inDemoInstall
Socket

@arch-ui/controls

Package Overview
Dependencies
Maintainers
8
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@arch-ui/controls - npm Package Compare versions

Comparing version

to
0.1.9

14

CHANGELOG.md
# @arch-ui/controls
## 0.1.9
### Patch Changes
- [`5935b89f8`](https://github.com/keystonejs/keystone/commit/5935b89f8862b36f14d09da68f056f759a860f3e) [#3477](https://github.com/keystonejs/keystone/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.
* Updated dependencies [[`5935b89f8`](https://github.com/keystonejs/keystone/commit/5935b89f8862b36f14d09da68f056f759a860f3e), [`0fc878fa9`](https://github.com/keystonejs/keystone/commit/0fc878fa918c3196196f943f195ffaa62fce504b)]:
- @arch-ui/input@0.1.11
- @arch-ui/theme@0.0.11
## 0.1.8

@@ -4,0 +18,0 @@

73

dist/controls.cjs.dev.js

@@ -5,23 +5,28 @@ 'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
var _extends = require('@babel/runtime/helpers/extends');
var React = require('react');
var React__default = _interopDefault(React);
var reactRadios = require('react-radios');
var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var reactPseudoState = require('react-pseudo-state');
var styled = _interopDefault(require('@emotion/styled'));
var styled = require('@emotion/styled');
var theme = require('@arch-ui/theme');
var input = require('@arch-ui/input');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var React__default = /*#__PURE__*/_interopDefault(React);
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
var styled__default = /*#__PURE__*/_interopDefault(styled);
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 Wrapper = styled.div({
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 Wrapper = styled__default['default'].div({
display: 'flex',
alignItems: 'center'
});
const Label = styled.label({
const Label = styled__default['default'].label({
alignItems: 'center',

@@ -32,3 +37,3 @@ display: 'flex',

const Text = 'span';
const Icon = styled.div(({
const Icon = styled__default['default'].div(({
checked,

@@ -115,6 +120,6 @@ isDisabled,

} = _ref,
wrapperProps = _objectWithoutProperties(_ref, ["checked", "children", "components", "isDisabled", "isRequired", "name", "onChange", "icon", "tabIndex", "type", "value", "id"]);
wrapperProps = _objectWithoutProperties__default['default'](_ref, ["checked", "children", "components", "isDisabled", "isRequired", "name", "onChange", "icon", "tabIndex", "type", "value", "id"]);
const components = React.useMemo(() => _objectSpread({}, defaultComponents, {}, propComponents), [propComponents]);
return React__default.createElement(components.Wrapper, wrapperProps, React__default.createElement(reactPseudoState.PseudoState, null, ({
const components = React.useMemo(() => _objectSpread(_objectSpread({}, defaultComponents), propComponents), [propComponents]);
return /*#__PURE__*/React__default['default'].createElement(components.Wrapper, wrapperProps, /*#__PURE__*/React__default['default'].createElement(reactPseudoState.PseudoState, null, ({
onBlur,

@@ -147,3 +152,3 @@ onFocus,

const iconProps = _objectSpread({}, snapshot, {
const iconProps = _objectSpread(_objectSpread({}, snapshot), {}, {
checked,

@@ -153,6 +158,6 @@ isDisabled

return React__default.createElement(components.Label, _extends({
return /*#__PURE__*/React__default['default'].createElement(components.Label, _extends__default['default']({
isChecked: checked,
isDisabled: isDisabled
}, labelHandlers), React__default.createElement(input.HiddenInput, _extends({}, inputHandlers, {
}, labelHandlers), /*#__PURE__*/React__default['default'].createElement(input.HiddenInput, _extends__default['default']({}, inputHandlers, {
checked: checked,

@@ -166,7 +171,7 @@ disabled: isDisabled,

id: id
})), React__default.createElement(Icon, iconProps, React__default.createElement(IconContent, null)), children ? React__default.createElement(components.Text, null, children) : null);
})), /*#__PURE__*/React__default['default'].createElement(Icon, iconProps, /*#__PURE__*/React__default['default'].createElement(IconContent, null)), children ? /*#__PURE__*/React__default['default'].createElement(components.Text, null, children) : null);
}));
};
const CheckboxIcon = React.memo(props => React.createElement("svg", _extends({
const CheckboxIcon = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement("svg", _extends__default['default']({
focusable: "false",

@@ -177,5 +182,5 @@ height: "24",

width: "24"
}, props), React.createElement("g", {
}, props), /*#__PURE__*/React.createElement("g", {
fillRule: "evenodd"
}, React.createElement("rect", {
}, /*#__PURE__*/React.createElement("rect", {
className: "outer-stroke",

@@ -188,3 +193,3 @@ fill: "transparent",

rx: "2"
}), React.createElement("rect", {
}), /*#__PURE__*/React.createElement("rect", {
className: "inner-stroke",

@@ -197,7 +202,7 @@ fill: "currentColor",

rx: "2"
}), React.createElement("path", {
}), /*#__PURE__*/React.createElement("path", {
d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
fill: "inherit"
}))));
const RadioIcon = React.memo(props => React.createElement("svg", _extends({
const RadioIcon = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement("svg", _extends__default['default']({
focusable: "false",

@@ -208,5 +213,5 @@ height: "24",

width: "24"
}, props), React.createElement("g", {
}, props), /*#__PURE__*/React.createElement("g", {
fillRule: "evenodd"
}, React.createElement("circle", {
}, /*#__PURE__*/React.createElement("circle", {
className: "outer-stroke",

@@ -217,3 +222,3 @@ fill: "transparent",

r: "7"
}), React.createElement("circle", {
}), /*#__PURE__*/React.createElement("circle", {
className: "inner-stroke",

@@ -224,3 +229,3 @@ fill: "currentColor",

r: "7"
}), React.createElement("circle", {
}), /*#__PURE__*/React.createElement("circle", {
fill: "inherit",

@@ -231,7 +236,7 @@ cx: "12",

}))));
const CheckboxPrimitive = props => React.createElement(Control, _extends({
const CheckboxPrimitive = props => /*#__PURE__*/React.createElement(Control, _extends__default['default']({
icon: CheckboxIcon,
type: "checkbox"
}, props));
const RadioPrimitive = props => React.createElement(Control, _extends({
const RadioPrimitive = props => /*#__PURE__*/React.createElement(Control, _extends__default['default']({
icon: RadioIcon,

@@ -241,10 +246,10 @@ type: "radio"

const Checkbox = props => React__default.createElement(reactRadios.Checkbox, _extends({
const Checkbox = props => /*#__PURE__*/React__default['default'].createElement(reactRadios.Checkbox, _extends__default['default']({
component: CheckboxPrimitive
}, props));
const CheckboxGroup = props => React__default.createElement(reactRadios.CheckboxGroup, props);
const Radio = props => React__default.createElement(reactRadios.Radio, _extends({
const CheckboxGroup = props => /*#__PURE__*/React__default['default'].createElement(reactRadios.CheckboxGroup, props);
const Radio = props => /*#__PURE__*/React__default['default'].createElement(reactRadios.Radio, _extends__default['default']({
component: RadioPrimitive
}, props));
const RadioGroup = props => React__default.createElement(reactRadios.RadioGroup, props);
const RadioGroup = props => /*#__PURE__*/React__default['default'].createElement(reactRadios.RadioGroup, props);

@@ -251,0 +256,0 @@ exports.Checkbox = Checkbox;

"use strict";
function _interopDefault(ex) {
return ex && "object" == typeof ex && "default" in ex ? ex.default : ex;
}
Object.defineProperty(exports, "__esModule", {

@@ -11,4 +7,12 @@ value: !0

var _extends = _interopDefault(require("@babel/runtime/helpers/extends")), React = require("react"), React__default = _interopDefault(React), reactRadios = require("react-radios"), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), _objectWithoutProperties = _interopDefault(require("@babel/runtime/helpers/objectWithoutProperties")), reactPseudoState = require("react-pseudo-state"), styled = _interopDefault(require("@emotion/styled")), theme = require("@arch-ui/theme"), input = require("@arch-ui/input");
var _extends = require("@babel/runtime/helpers/extends"), React = require("react"), reactRadios = require("react-radios"), _defineProperty = require("@babel/runtime/helpers/defineProperty"), _objectWithoutProperties = require("@babel/runtime/helpers/objectWithoutProperties"), reactPseudoState = require("react-pseudo-state"), styled = require("@emotion/styled"), theme = require("@arch-ui/theme"), input = require("@arch-ui/input");
function _interopDefault(e) {
return e && e.__esModule ? e : {
default: e
};
}
var _extends__default = _interopDefault(_extends), React__default = _interopDefault(React), _defineProperty__default = _interopDefault(_defineProperty), _objectWithoutProperties__default = _interopDefault(_objectWithoutProperties), styled__default = _interopDefault(styled);
function ownKeys(object, enumerableOnly) {

@@ -29,3 +33,3 @@ var keys = Object.keys(object);

i % 2 ? ownKeys(Object(source), !0).forEach((function(key) {
_defineProperty(target, key, source[key]);
_defineProperty__default.default(target, key, source[key]);
})) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach((function(key) {

@@ -38,10 +42,10 @@ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));

const Wrapper = styled.div({
const Wrapper = styled__default.default.div({
display: "flex",
alignItems: "center"
}), Label = styled.label({
}), Label = styled__default.default.label({
alignItems: "center",
display: "flex",
lineHeight: 1
}), Text = "span", Icon = styled.div(({checked: checked, isDisabled: isDisabled, isFocus: isFocus, isActive: isActive, isHover: isHover}) => {
}), Text = "span", Icon = styled__default.default.div(({checked: checked, isDisabled: isDisabled, isFocus: isFocus, isActive: isActive, isHover: isHover}) => {
let bg = theme.colors.N10;

@@ -75,5 +79,5 @@ isDisabled && checked ? bg = theme.colors.N30 : isActive ? bg = checked ? theme.colors.B.D10 : theme.colors.N20 : !isFocus && !isHover || checked ? checked && (bg = theme.colors.B.base) : bg = theme.colors.N15;

}, Control = _ref => {
let {checked: checked = !1, children: children, components: propComponents = {}, isDisabled: isDisabled = !1, isRequired: isRequired, name: name, onChange: onChange, icon: IconContent, tabIndex: tabIndex, type: type, value: value, id: id} = _ref, wrapperProps = _objectWithoutProperties(_ref, [ "checked", "children", "components", "isDisabled", "isRequired", "name", "onChange", "icon", "tabIndex", "type", "value", "id" ]);
const components = React.useMemo(() => _objectSpread({}, defaultComponents, {}, propComponents), [ propComponents ]);
return React__default.createElement(components.Wrapper, wrapperProps, React__default.createElement(reactPseudoState.PseudoState, null, ({onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp, onTouchEnd: onTouchEnd, onTouchStart: onTouchStart}, snapshot) => {
let {checked: checked = !1, children: children, components: propComponents = {}, isDisabled: isDisabled = !1, isRequired: isRequired, name: name, onChange: onChange, icon: IconContent, tabIndex: tabIndex, type: type, value: value, id: id} = _ref, wrapperProps = _objectWithoutProperties__default.default(_ref, [ "checked", "children", "components", "isDisabled", "isRequired", "name", "onChange", "icon", "tabIndex", "type", "value", "id" ]);
const components = React.useMemo(() => _objectSpread(_objectSpread({}, defaultComponents), propComponents), [ propComponents ]);
return React__default.default.createElement(components.Wrapper, wrapperProps, React__default.default.createElement(reactPseudoState.PseudoState, null, ({onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp, onTouchEnd: onTouchEnd, onTouchStart: onTouchStart}, snapshot) => {
const labelHandlers = {

@@ -92,10 +96,10 @@ onMouseDown: onMouseDown,

onKeyUp: onKeyUp
}, iconProps = _objectSpread({}, snapshot, {
}, iconProps = _objectSpread(_objectSpread({}, snapshot), {}, {
checked: checked,
isDisabled: isDisabled
});
return React__default.createElement(components.Label, _extends({
return React__default.default.createElement(components.Label, _extends__default.default({
isChecked: checked,
isDisabled: isDisabled
}, labelHandlers), React__default.createElement(input.HiddenInput, _extends({}, inputHandlers, {
}, labelHandlers), React__default.default.createElement(input.HiddenInput, _extends__default.default({}, inputHandlers, {
checked: checked,

@@ -109,5 +113,5 @@ disabled: isDisabled,

id: id
})), React__default.createElement(Icon, iconProps, React__default.createElement(IconContent, null)), children ? React__default.createElement(components.Text, null, children) : null);
})), React__default.default.createElement(Icon, iconProps, React__default.default.createElement(IconContent, null)), children ? React__default.default.createElement(components.Text, null, children) : null);
}));
}, CheckboxIcon = React.memo(props => React.createElement("svg", _extends({
}, CheckboxIcon = React.memo(props => React.createElement("svg", _extends__default.default({
focusable: "false",

@@ -139,3 +143,3 @@ height: "24",

fill: "inherit"
})))), RadioIcon = React.memo(props => React.createElement("svg", _extends({
})))), RadioIcon = React.memo(props => React.createElement("svg", _extends__default.default({
focusable: "false",

@@ -165,15 +169,15 @@ height: "24",

r: "2"
})))), CheckboxPrimitive = props => React.createElement(Control, _extends({
})))), CheckboxPrimitive = props => React.createElement(Control, _extends__default.default({
icon: CheckboxIcon,
type: "checkbox"
}, props)), RadioPrimitive = props => React.createElement(Control, _extends({
}, props)), RadioPrimitive = props => React.createElement(Control, _extends__default.default({
icon: RadioIcon,
type: "radio"
}, props)), Checkbox = props => React__default.createElement(reactRadios.Checkbox, _extends({
}, props)), Checkbox = props => React__default.default.createElement(reactRadios.Checkbox, _extends__default.default({
component: CheckboxPrimitive
}, props)), CheckboxGroup = props => React__default.createElement(reactRadios.CheckboxGroup, props), Radio = props => React__default.createElement(reactRadios.Radio, _extends({
}, props)), CheckboxGroup = props => React__default.default.createElement(reactRadios.CheckboxGroup, props), Radio = props => React__default.default.createElement(reactRadios.Radio, _extends__default.default({
component: RadioPrimitive
}, props)), RadioGroup = props => React__default.createElement(reactRadios.RadioGroup, props);
}, props)), RadioGroup = props => React__default.default.createElement(reactRadios.RadioGroup, props);
exports.Checkbox = Checkbox, exports.CheckboxGroup = CheckboxGroup, exports.CheckboxPrimitive = CheckboxPrimitive,
exports.Radio = Radio, exports.RadioGroup = RadioGroup, exports.RadioPrimitive = RadioPrimitive;
import _extends from '@babel/runtime/helpers/esm/extends';
import React__default, { useMemo, memo, createElement } from 'react';
import React, { useMemo, createElement, memo } from 'react';
import { Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Radio as Radio$1, RadioGroup as RadioGroup$1 } from 'react-radios';

@@ -108,4 +108,4 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';

const components = useMemo(() => _objectSpread({}, defaultComponents, {}, propComponents), [propComponents]);
return React__default.createElement(components.Wrapper, wrapperProps, React__default.createElement(PseudoState, null, ({
const components = useMemo(() => _objectSpread(_objectSpread({}, defaultComponents), propComponents), [propComponents]);
return /*#__PURE__*/React.createElement(components.Wrapper, wrapperProps, /*#__PURE__*/React.createElement(PseudoState, null, ({
onBlur,

@@ -138,3 +138,3 @@ onFocus,

const iconProps = _objectSpread({}, snapshot, {
const iconProps = _objectSpread(_objectSpread({}, snapshot), {}, {
checked,

@@ -144,6 +144,6 @@ isDisabled

return React__default.createElement(components.Label, _extends({
return /*#__PURE__*/React.createElement(components.Label, _extends({
isChecked: checked,
isDisabled: isDisabled
}, labelHandlers), React__default.createElement(HiddenInput, _extends({}, inputHandlers, {
}, labelHandlers), /*#__PURE__*/React.createElement(HiddenInput, _extends({}, inputHandlers, {
checked: checked,

@@ -157,7 +157,7 @@ disabled: isDisabled,

id: id
})), React__default.createElement(Icon, iconProps, React__default.createElement(IconContent, null)), children ? React__default.createElement(components.Text, null, children) : null);
})), /*#__PURE__*/React.createElement(Icon, iconProps, /*#__PURE__*/React.createElement(IconContent, null)), children ? /*#__PURE__*/React.createElement(components.Text, null, children) : null);
}));
};
const CheckboxIcon = memo(props => createElement("svg", _extends({
const CheckboxIcon = /*#__PURE__*/memo(props => /*#__PURE__*/createElement("svg", _extends({
focusable: "false",

@@ -168,5 +168,5 @@ height: "24",

width: "24"
}, props), createElement("g", {
}, props), /*#__PURE__*/createElement("g", {
fillRule: "evenodd"
}, createElement("rect", {
}, /*#__PURE__*/createElement("rect", {
className: "outer-stroke",

@@ -179,3 +179,3 @@ fill: "transparent",

rx: "2"
}), createElement("rect", {
}), /*#__PURE__*/createElement("rect", {
className: "inner-stroke",

@@ -188,7 +188,7 @@ fill: "currentColor",

rx: "2"
}), createElement("path", {
}), /*#__PURE__*/createElement("path", {
d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
fill: "inherit"
}))));
const RadioIcon = memo(props => createElement("svg", _extends({
const RadioIcon = /*#__PURE__*/memo(props => /*#__PURE__*/createElement("svg", _extends({
focusable: "false",

@@ -199,5 +199,5 @@ height: "24",

width: "24"
}, props), createElement("g", {
}, props), /*#__PURE__*/createElement("g", {
fillRule: "evenodd"
}, createElement("circle", {
}, /*#__PURE__*/createElement("circle", {
className: "outer-stroke",

@@ -208,3 +208,3 @@ fill: "transparent",

r: "7"
}), createElement("circle", {
}), /*#__PURE__*/createElement("circle", {
className: "inner-stroke",

@@ -215,3 +215,3 @@ fill: "currentColor",

r: "7"
}), createElement("circle", {
}), /*#__PURE__*/createElement("circle", {
fill: "inherit",

@@ -222,7 +222,7 @@ cx: "12",

}))));
const CheckboxPrimitive = props => createElement(Control, _extends({
const CheckboxPrimitive = props => /*#__PURE__*/createElement(Control, _extends({
icon: CheckboxIcon,
type: "checkbox"
}, props));
const RadioPrimitive = props => createElement(Control, _extends({
const RadioPrimitive = props => /*#__PURE__*/createElement(Control, _extends({
icon: RadioIcon,

@@ -232,11 +232,11 @@ type: "radio"

const Checkbox = props => React__default.createElement(Checkbox$1, _extends({
const Checkbox = props => /*#__PURE__*/React.createElement(Checkbox$1, _extends({
component: CheckboxPrimitive
}, props));
const CheckboxGroup = props => React__default.createElement(CheckboxGroup$1, props);
const Radio = props => React__default.createElement(Radio$1, _extends({
const CheckboxGroup = props => /*#__PURE__*/React.createElement(CheckboxGroup$1, props);
const Radio = props => /*#__PURE__*/React.createElement(Radio$1, _extends({
component: RadioPrimitive
}, props));
const RadioGroup = props => React__default.createElement(RadioGroup$1, props);
const RadioGroup = props => /*#__PURE__*/React.createElement(RadioGroup$1, props);
export { Checkbox, CheckboxGroup, CheckboxPrimitive, Radio, RadioGroup, RadioPrimitive };
{
"name": "@arch-ui/controls",
"description": "Form Controls as used in @keystonejs Admin UI.",
"version": "0.1.8",
"version": "0.1.9",
"author": "Jed Watson",

@@ -15,6 +15,6 @@ "license": "MIT",

"dependencies": {
"@arch-ui/input": "^0.1.9",
"@arch-ui/theme": "^0.0.10",
"@babel/runtime": "^7.8.4",
"@emotion/core": "^10.0.28",
"@arch-ui/input": "^0.1.11",
"@arch-ui/theme": "^0.0.11",
"@babel/runtime": "^7.11.2",
"@emotion/core": "^10.0.35",
"@emotion/styled": "^10.0.27",

@@ -21,0 +21,0 @@ "react-pseudo-state": "^2.2.2",