New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@commercetools-uikit/radio-input

Package Overview
Dependencies
Maintainers
3
Versions
950
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@commercetools-uikit/radio-input - npm Package Compare versions

Comparing version 0.0.0-canary-13a4f7037f77a041964e36460e7beb59f08a246f to 0.0.0-canary-202010215528

CHANGELOG.md
README.md

137

dist/radio-input.cjs.js

@@ -5,16 +5,24 @@ 'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));
var invariant = _interopDefault(require('tiny-invariant'));
var React = require('react');
var PropTypes = require('prop-types');
var invariant = require('tiny-invariant');
var utils = require('@commercetools-uikit/utils');
var Constraints = _interopDefault(require('@commercetools-uikit/constraints'));
var Stack = _interopDefault(require('@commercetools-uikit/spacings-stack'));
var Inline = _interopDefault(require('@commercetools-uikit/spacings-inline'));
var _styled = _interopDefault(require('@emotion/styled-base'));
var Constraints = require('@commercetools-uikit/constraints');
var Stack = require('@commercetools-uikit/spacings-stack');
var Inline = require('@commercetools-uikit/spacings-inline');
var _styled = require('@emotion/styled-base');
var reactIs = require('react-is');
var designSystem = require('@commercetools-uikit/design-system');
var core = require('@emotion/core');
var designSystem = require('@commercetools-uikit/design-system');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
var Constraints__default = /*#__PURE__*/_interopDefaultLegacy(Constraints);
var Stack__default = /*#__PURE__*/_interopDefaultLegacy(Stack);
var Inline__default = /*#__PURE__*/_interopDefaultLegacy(Inline);
var _styled__default = /*#__PURE__*/_interopDefaultLegacy(_styled);
function _defineProperty(obj, key, value) {

@@ -112,3 +120,3 @@ if (key in obj) {

if (!iconColor) {
invariant(color, "ui-kit/Icon: the specified color '".concat(color, "' is not supported."));
invariant__default['default'](color, "ui-kit/Icon: the specified color '".concat(color, "' is not supported."));
return 'inherit';

@@ -119,7 +127,7 @@ }

var getIconStyles = function getIconStyles(props, theme) {
return core.css("*{fill:", getColor(props.color, theme), ";}", getSizeStyle(props.size));
return core.css("*{fill:", getColor(props.color, theme), ";}", getSizeStyle(props.size), ";flex-shrink:0;");
};
var iconPropTypes = {
color: PropTypes.oneOf(['solid', 'neutral60', 'surface', 'info', 'primary', 'primary40', 'warning', 'error']),
size: PropTypes.oneOf(['small', 'medium', 'big', 'scale'])
color: PropTypes__default['default'].oneOf(['solid', 'neutral60', 'surface', 'info', 'primary', 'primary40', 'warning', 'error']),
size: PropTypes__default['default'].oneOf(['small', 'medium', 'big', 'scale'])
};

@@ -226,2 +234,7 @@

var LabelTextWrapper = _styled__default['default']("div", {
target: "ex16vpg0"
})("margin-left:", designSystem.customProperties.spacingS, ";font-size:1rem;font-family:inherit;color:", function (props) {
return props.isDisabled ? designSystem.customProperties.fontColorForInputWhenDisabled : designSystem.customProperties.fontColorForInput;
}, ";");
var getContainerStyles = function getContainerStyles(props) {

@@ -247,3 +260,3 @@ var baseStyles = core.css("display:flex;align-items:center;svg{fill:", designSystem.customProperties.backgroundColorForInput, ";}svg [id$='borderAndContent'] > [id$='border']{stroke:1px ", designSystem.customProperties.borderColorForInput, " solid;}svg [id$='borderAndContent'] > [id$='content']{fill:", designSystem.customProperties.borderColorForInputWhenFocused, ";}");

var getLabelStyles = function getLabelStyles(props) {
var baseStyles = core.css("cursor:pointer;display:flex;align-items:center;position:relative;&:hover svg [id$='borderAndContent'] > [id$='border']{stroke:", designSystem.customProperties.borderColorForInputWhenFocused, ";}&:active,&:focus{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";}");
var baseStyles = core.css("cursor:pointer;display:flex;align-items:center;position:relative;&:hover svg [id$='borderAndContent'] > [id$='border']{stroke:", designSystem.customProperties.borderColorForInputWhenFocused, ";}:focus-within ", LabelTextWrapper, "{outline:auto 2px ", designSystem.customProperties.borderColorForInputWhenFocused, ";outline-offset:3px;}");
if (props.isDisabled) {

@@ -264,4 +277,4 @@ return [baseStyles, core.css("cursor:not-allowed;color:", designSystem.customProperties.fontColorForInputWhenDisabled, ";&:hover svg [id$='borderAndContent'] > [id$='border']{stroke:", designSystem.customProperties.borderColorForInputWhenDisabled, ";}")];

var Input = _styled("input", {
target: "e1suseyy0"
var Input = _styled__default['default']("input", {
target: "e7w4k1b0"
})("&:focus + div > svg [id$='borderAndContent'] > [id$='border']{stroke:", designSystem.customProperties.borderColorForInputWhenFocused, ";}");

@@ -295,4 +308,4 @@ var Option = function Option(props) {

size: "medium"
})), core.jsx("div", {
css: core.css("width:100%;margin-left:", designSystem.customProperties.spacingS, ";font-size:1rem;font-family:inherit;color:", props.isDisabled ? designSystem.customProperties.fontColorForInputWhenDisabled : designSystem.customProperties.fontColorForInput, ";")
})), core.jsx(LabelTextWrapper, {
isDisabled: props.isDisabled
}, props.children));

@@ -302,5 +315,5 @@ };

Option.propTypes = process.env.NODE_ENV !== "production" ? {
value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
components: PropTypes.shape({
value: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].bool]).isRequired,
children: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].element, PropTypes__default['default'].func]).isRequired,
components: PropTypes__default['default'].shape({
wrapper: function wrapper(props, propName) {

@@ -314,3 +327,3 @@ if (props[propName]) {

}
if (reactIs.isValidElementType(props[propName](React.Fragment))) {
if (reactIs.isValidElementType(props[propName](React__default['default'].Fragment))) {
return new Error("Invalid prop 'components.wrapper' supplied to 'RadioInput.Option': the function supplied should return a valid react element");

@@ -322,13 +335,13 @@ }

}),
id: PropTypes.string,
name: PropTypes.string,
isChecked: PropTypes.bool,
isDisabled: PropTypes.bool,
isReadOnly: PropTypes.bool,
hasError: PropTypes.bool,
hasWarning: PropTypes.bool,
onChange: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
isHovered: PropTypes.bool
id: PropTypes__default['default'].string,
name: PropTypes__default['default'].string,
isChecked: PropTypes__default['default'].bool,
isDisabled: PropTypes__default['default'].bool,
isReadOnly: PropTypes__default['default'].bool,
hasError: PropTypes__default['default'].bool,
hasWarning: PropTypes__default['default'].bool,
onChange: PropTypes__default['default'].func,
onFocus: PropTypes__default['default'].func,
onBlur: PropTypes__default['default'].func,
isHovered: PropTypes__default['default'].bool
} : {};

@@ -340,16 +353,16 @@ Option.defaultProps = {

var directionWrapper = process.env.NODE_ENV !== "production" ? {
stack: Stack,
inline: Inline
stack: Stack__default['default'],
inline: Inline__default['default']
} : {};
var Group = function Group(props) {
React.useEffect(function () {
var childrenAsArray = React.Children.toArray(props.children);
React__default['default'].useEffect(function () {
var childrenAsArray = React__default['default'].Children.toArray(props.children);
var optionChildrenAsArray = childrenAsArray.filter(function (child) {
return child.type.displayName === Option.displayName;
});
invariant(optionChildrenAsArray.length > 0, 'Radio.Group must contain at least one Radio.Option');
invariant__default['default'](optionChildrenAsArray.length > 0, 'Radio.Group must contain at least one Radio.Option');
}, [props.children]);
var optionElements = React.Children.map(props.children, function (child, index) {
var optionElements = React__default['default'].Children.map(props.children, function (child, index) {
if (child && child.type.displayName === Option.displayName) {
var clonedChild = React.cloneElement(child, {
var clonedChild = React__default['default'].cloneElement(child, {
id: props.id && "".concat(props.id, "-").concat(index),

@@ -373,27 +386,27 @@ name: props.name,

return core.jsx("div", {
id: props.id
}, core.jsx(Inline, _extends({}, props.directionProps, utils.filterDataAttributes(props)), optionElements));
"aria-labelledby": props.id
}, core.jsx(Inline__default['default'], _extends({}, props.directionProps, utils.filterDataAttributes(props)), optionElements));
}
return core.jsx("div", {
id: props.id
}, core.jsx(Constraints.Horizontal, {
"aria-labelledby": props.id
}, core.jsx(Constraints__default['default'].Horizontal, {
constraint: props.horizontalConstraint
}, core.jsx(Stack, _extends({}, props.directionProps, utils.filterDataAttributes(props)), optionElements)));
}, core.jsx(Stack__default['default'], _extends({}, props.directionProps, utils.filterDataAttributes(props)), optionElements)));
};
Group.displayName = 'RadioGroup';
Group.propTypes = process.env.NODE_ENV !== "production" ? {
id: PropTypes.string,
name: PropTypes.string,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
onChange: PropTypes.func,
onBlur: PropTypes.func,
onFocus: PropTypes.func,
isDisabled: PropTypes.bool,
isReadOnly: PropTypes.bool,
hasError: PropTypes.bool,
hasWarning: PropTypes.bool,
horizontalConstraint: PropTypes.oneOf(['m', 'l', 'xl', 'scale']),
direction: PropTypes.oneOf(Object.keys(directionWrapper)),
directionProps: PropTypes.object,
children: PropTypes.node.isRequired
id: PropTypes__default['default'].string,
name: PropTypes__default['default'].string,
value: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].bool]).isRequired,
onChange: PropTypes__default['default'].func,
onBlur: PropTypes__default['default'].func,
onFocus: PropTypes__default['default'].func,
isDisabled: PropTypes__default['default'].bool,
isReadOnly: PropTypes__default['default'].bool,
hasError: PropTypes__default['default'].bool,
hasWarning: PropTypes__default['default'].bool,
horizontalConstraint: PropTypes__default['default'].oneOf(['m', 'l', 'xl', 'scale']),
direction: PropTypes__default['default'].oneOf(Object.keys(directionWrapper)),
directionProps: PropTypes__default['default'].object,
children: PropTypes__default['default'].node.isRequired
} : {};

@@ -408,2 +421,4 @@ Group.defaultProps = {

var version = '0.0.0-canary-202010215528';
var index = {

@@ -414,5 +429,3 @@ Group: Group,

var version = '0.0.0-canary-13a4f7037f77a041964e36460e7beb59f08a246f';
exports.default = index;
exports.version = version;

25

dist/radio-input.esm.js

@@ -10,4 +10,4 @@ import React from 'react';

import { isValidElementType } from 'react-is';
import { customProperties } from '@commercetools-uikit/design-system';
import { css, jsx } from '@emotion/core';
import { customProperties } from '@commercetools-uikit/design-system';

@@ -112,3 +112,3 @@ function _defineProperty(obj, key, value) {

var getIconStyles = function getIconStyles(props, theme) {
return css("*{fill:", getColor(props.color, theme), ";}", getSizeStyle(props.size));
return css("*{fill:", getColor(props.color, theme), ";}", getSizeStyle(props.size), ";flex-shrink:0;");
};

@@ -219,2 +219,7 @@ var iconPropTypes = {

var LabelTextWrapper = _styled("div", {
target: "ex16vpg0"
})("margin-left:", customProperties.spacingS, ";font-size:1rem;font-family:inherit;color:", function (props) {
return props.isDisabled ? customProperties.fontColorForInputWhenDisabled : customProperties.fontColorForInput;
}, ";");
var getContainerStyles = function getContainerStyles(props) {

@@ -240,3 +245,3 @@ var baseStyles = css("display:flex;align-items:center;svg{fill:", customProperties.backgroundColorForInput, ";}svg [id$='borderAndContent'] > [id$='border']{stroke:1px ", customProperties.borderColorForInput, " solid;}svg [id$='borderAndContent'] > [id$='content']{fill:", customProperties.borderColorForInputWhenFocused, ";}");

var getLabelStyles = function getLabelStyles(props) {
var baseStyles = css("cursor:pointer;display:flex;align-items:center;position:relative;&:hover svg [id$='borderAndContent'] > [id$='border']{stroke:", customProperties.borderColorForInputWhenFocused, ";}&:active,&:focus{border-color:", customProperties.borderColorForInputWhenFocused, ";}");
var baseStyles = css("cursor:pointer;display:flex;align-items:center;position:relative;&:hover svg [id$='borderAndContent'] > [id$='border']{stroke:", customProperties.borderColorForInputWhenFocused, ";}:focus-within ", LabelTextWrapper, "{outline:auto 2px ", customProperties.borderColorForInputWhenFocused, ";outline-offset:3px;}");
if (props.isDisabled) {

@@ -258,3 +263,3 @@ return [baseStyles, css("cursor:not-allowed;color:", customProperties.fontColorForInputWhenDisabled, ";&:hover svg [id$='borderAndContent'] > [id$='border']{stroke:", customProperties.borderColorForInputWhenDisabled, ";}")];

var Input = _styled("input", {
target: "e1suseyy0"
target: "e7w4k1b0"
})("&:focus + div > svg [id$='borderAndContent'] > [id$='border']{stroke:", customProperties.borderColorForInputWhenFocused, ";}");

@@ -288,4 +293,4 @@ var Option = function Option(props) {

size: "medium"
})), jsx("div", {
css: css("width:100%;margin-left:", customProperties.spacingS, ";font-size:1rem;font-family:inherit;color:", props.isDisabled ? customProperties.fontColorForInputWhenDisabled : customProperties.fontColorForInput, ";")
})), jsx(LabelTextWrapper, {
isDisabled: props.isDisabled
}, props.children));

@@ -362,7 +367,7 @@ };

return jsx("div", {
id: props.id
"aria-labelledby": props.id
}, jsx(Inline, _extends({}, props.directionProps, filterDataAttributes(props)), optionElements));
}
return jsx("div", {
id: props.id
"aria-labelledby": props.id
}, jsx(Constraints.Horizontal, {

@@ -397,2 +402,4 @@ constraint: props.horizontalConstraint

var version = '0.0.0-canary-202010215528';
var index = {

@@ -403,5 +410,3 @@ Group: Group,

var version = '0.0.0-canary-13a4f7037f77a041964e36460e7beb59f08a246f';
export default index;
export { version };

46

package.json
{
"name": "@commercetools-uikit/radio-input",
"version": "0.0.0-canary-13a4f7037f77a041964e36460e7beb59f08a246f",
"description": "",
"main": "dist/radio-input.cjs.js",
"module": "dist/radio-input.esm.js",
"description": "A RadioInput represents a group of options where only one option can be selected at a time.",
"version": "0.0.0-canary-202010215528",
"bugs": "https://github.com/commercetools/ui-kit/issues",
"repository": {
"type": "git",
"url": "https://github.com/commercetools/ui-kit.git",
"directory": "packages/components/inputs/radio-input"
},
"homepage": "https://uikit.commercetools.com",
"keywords": [
"javascript",
"design system",
"react",
"uikit"
],
"license": "MIT",
"private": false,

@@ -11,2 +23,6 @@ "publishConfig": {

},
"sideEffects": false,
"main": "dist/radio-input.cjs.js",
"module": "dist/radio-input.esm.js",
"files": ["dist"],
"scripts": {

@@ -17,15 +33,10 @@ "prepare": "../../../../scripts/version.js replace",

},
"files": [
"dist"
],
"sideEffects": false,
"license": "MIT",
"dependencies": {
"@commercetools-uikit/constraints": "0.0.0-canary-13a4f7037f77a041964e36460e7beb59f08a246f",
"@commercetools-uikit/design-system": "0.0.0-canary-13a4f7037f77a041964e36460e7beb59f08a246f",
"@commercetools-uikit/spacings-inline": "0.0.0-canary-13a4f7037f77a041964e36460e7beb59f08a246f",
"@commercetools-uikit/spacings-stack": "0.0.0-canary-13a4f7037f77a041964e36460e7beb59f08a246f",
"@commercetools-uikit/utils": "0.0.0-canary-13a4f7037f77a041964e36460e7beb59f08a246f",
"@emotion/core": "10.0.28",
"@emotion/styled": "10.0.27",
"@commercetools-uikit/constraints": "0.0.0-canary-202010215528",
"@commercetools-uikit/design-system": "0.0.0-canary-202010215528",
"@commercetools-uikit/spacings-inline": "10.30.1",
"@commercetools-uikit/spacings-stack": "10.30.1",
"@commercetools-uikit/utils": "0.0.0-canary-202010215528",
"@emotion/core": "^10.0.34",
"@emotion/styled": "^10.0.27",
"prop-types": "15.7.2",

@@ -38,4 +49,3 @@ "react-is": "16.13.1",

"react": ">= 16.8.0"
},
"gitHead": "5f63d3ebfe81e02c4166958386725a1bd10f79b2"
}
}
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