New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@commercetools-uikit/radio-input
Advanced tools
@commercetools-uikit/radio-input - npm Package Compare versions
Comparing version 0.0.0-canary-2020717826 to 0.0.0-canary-202081410933
| # @commercetools-uikit/radio-input | ||
| ## 0.0.0-canary-2020717826 | ||
| ## 0.0.0-canary-202081410933 | ||
| ### Minor Changes | ||
| - [`4cb094a`](https://github.com/commercetools/ui-kit/commit/4cb094a5db4ec3fd27455ad9d7028b43111b3667) [#1539](https://github.com/commercetools/ui-kit/pull/1539) Thanks [@jonnybel](https://github.com/jonnybel)! - Improved keyboard navigation support by adding/enhancing visual indicators for hover and focus states, including for readOnly mode. | ||
| ## 10.30.1 | ||
| ### Patch Changes | ||
@@ -12,5 +18,5 @@ | ||
| * Updated dependencies [[`db6b77c`](https://github.com/commercetools/ui-kit/commit/db6b77c3baf110136440dfc7c6d42cace74eb85e)]: | ||
| - @commercetools-uikit/constraints@0.0.0-canary-2020717826 | ||
| - @commercetools-uikit/spacings-inline@0.0.0-canary-2020717826 | ||
| - @commercetools-uikit/spacings-stack@0.0.0-canary-2020717826 | ||
| - @commercetools-uikit/constraints@10.30.1 | ||
| - @commercetools-uikit/spacings-inline@10.30.1 | ||
| - @commercetools-uikit/spacings-stack@10.30.1 | ||
@@ -17,0 +23,0 @@ ## 10.27.1 |
@@ -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,3 +277,3 @@ 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", { | ||
| var Input = _styled__default['default']("input", { | ||
| target: "e7w4k1b0" | ||
@@ -295,4 +308,4 @@ })("&:focus + div > svg [id$='borderAndContent'] > [id$='border']{stroke:", designSystem.customProperties.borderColorForInputWhenFocused, ";}"); | ||
| 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), | ||
@@ -374,26 +387,26 @@ name: props.name, | ||
| "aria-labelledby": props.id | ||
| }, core.jsx(Inline, _extends({}, props.directionProps, utils.filterDataAttributes(props)), optionElements)); | ||
| }, core.jsx(Inline__default['default'], _extends({}, props.directionProps, utils.filterDataAttributes(props)), optionElements)); | ||
| } | ||
| return core.jsx("div", { | ||
| "aria-labelledby": props.id | ||
| }, core.jsx(Constraints.Horizontal, { | ||
| }, 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,3 +421,3 @@ Group.defaultProps = { | ||
| var version = '0.0.0-canary-2020717826'; | ||
| var version = '0.0.0-canary-202081410933'; | ||
@@ -411,0 +424,0 @@ var index = { |
@@ -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) { | ||
@@ -287,4 +292,4 @@ return [baseStyles, css("cursor:not-allowed;color:", customProperties.fontColorForInputWhenDisabled, ";&:hover svg [id$='borderAndContent'] > [id$='border']{stroke:", customProperties.borderColorForInputWhenDisabled, ";}")]; | ||
| 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)); | ||
@@ -395,3 +400,3 @@ }; | ||
| var version = '0.0.0-canary-2020717826'; | ||
| var version = '0.0.0-canary-202081410933'; | ||
@@ -398,0 +403,0 @@ var index = { |
| { | ||
| "name": "@commercetools-uikit/radio-input", | ||
| "version": "0.0.0-canary-2020717826", | ||
| "version": "0.0.0-canary-202081410933", | ||
| "description": "", | ||
@@ -20,6 +20,6 @@ "main": "dist/radio-input.cjs.js", | ||
| "dependencies": { | ||
| "@commercetools-uikit/constraints": "0.0.0-canary-2020717826", | ||
| "@commercetools-uikit/constraints": "10.30.1", | ||
| "@commercetools-uikit/design-system": "10.18.4", | ||
| "@commercetools-uikit/spacings-inline": "0.0.0-canary-2020717826", | ||
| "@commercetools-uikit/spacings-stack": "0.0.0-canary-2020717826", | ||
| "@commercetools-uikit/spacings-inline": "10.30.1", | ||
| "@commercetools-uikit/spacings-stack": "10.30.1", | ||
| "@commercetools-uikit/utils": "10.21.0", | ||
@@ -26,0 +26,0 @@ "@emotion/core": "^10.0.34", |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by4.74%
44718
- Lines of code
- increased by2.24%
777
Dependency changes
+ Added@commercetools-uikit/constraints@10.30.1(transitive)
+ Added@commercetools-uikit/spacings-inline@10.30.1(transitive)
+ Added@commercetools-uikit/spacings-stack@10.30.1(transitive)
- Removed@commercetools-uikit/constraints@0.0.0-canary-2020717826(transitive)
- Removed@commercetools-uikit/spacings-inline@0.0.0-canary-2020717826(transitive)
- Removed@commercetools-uikit/spacings-stack@0.0.0-canary-2020717826(transitive)