@commercetools-uikit/radio-input
Version:
A RadioInput represents a group of options where only one option can be selected at a time.
287 lines (276 loc) • 15.6 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
var react$1 = require('react');
var utils = require('@commercetools-uikit/utils');
var Constraints = require('@commercetools-uikit/constraints');
var Stack = require('@commercetools-uikit/spacings-stack');
var Inline = require('@commercetools-uikit/spacings-inline');
var inputUtils = require('@commercetools-uikit/input-utils');
var _styled = require('@emotion/styled/base');
var react = require('@emotion/react');
var designSystem = require('@commercetools-uikit/design-system');
var SpacingsInset = require('@commercetools-uikit/spacings-inset');
var jsxRuntime = require('@emotion/react/jsx-runtime');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
var Stack__default = /*#__PURE__*/_interopDefault(Stack);
var Inline__default = /*#__PURE__*/_interopDefault(Inline);
var _styled__default = /*#__PURE__*/_interopDefault(_styled);
var SpacingsInset__default = /*#__PURE__*/_interopDefault(SpacingsInset);
const LabelTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
target: "e1x57rfz6"
} )("grid-area:label;margin-left:", designSystem.designTokens.spacing10, ";font-size:1rem;font-family:inherit;display:flex;align-items:center;" + ("" ));
const AdditionalTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
target: "e1x57rfz5"
} )({
name: "1v76jw6",
styles: "grid-area:content;font-size:1rem;font-family:inherit"
} );
const RadioInputWrapper = /*#__PURE__*/_styled__default["default"]("div", {
target: "e1x57rfz4"
} )({
name: "z022bx",
styles: "display:grid;grid-template-columns:auto;grid-template-rows:auto;grid-template-areas:'radio label' '. content'"
} );
const getBorderColor = props => {
if (props.isDisabled) {
return designSystem.designTokens.colorNeutral;
}
if (props.isReadOnly) {
return designSystem.designTokens.colorNeutral60;
}
if (props.hasError) {
return designSystem.designTokens.borderColorForInputWhenError;
}
if (props.hasWarning) {
return designSystem.designTokens.borderColorForInputWhenWarning;
}
if (props.isHovered && !props.isDisabled) {
if (props.isChecked) {
return designSystem.designTokens.borderColorForInputWhenFocused;
}
return designSystem.designTokens.colorNeutral60;
}
if (props.isChecked) {
return designSystem.designTokens.colorPrimary;
}
return designSystem.designTokens.colorNeutral60;
};
const getKnobColor = props => {
if (props.isDisabled) {
return designSystem.designTokens.colorNeutral;
}
if (props.hasError) {
return designSystem.designTokens.fontColorForInputWhenError;
}
if (props.hasWarning) {
return designSystem.designTokens.fontColorForInputWhenWarning;
}
if (props.isReadOnly) {
return designSystem.designTokens.colorNeutral60;
}
return designSystem.designTokens.borderColorForInputWhenFocused;
};
const getLabelColor = props => {
if (props.isDisabled) {
return designSystem.designTokens.fontColorForInputWhenDisabled;
}
if (props.isReadOnly) {
return designSystem.designTokens.fontColorForInputWhenReadonly;
}
if (props.hasError) {
return designSystem.designTokens.fontColorForInputWhenError;
}
if (props.hasWarning) {
return designSystem.designTokens.fontColorForInputWhenWarning;
}
return designSystem.designTokens.fontColorForInput;
};
const getLabelCursor = props => {
if (props.isDisabled) {
return 'not-allowed';
}
if (props.isReadOnly) {
return 'default';
}
return 'pointer';
};
const RadioOptionKnob = /*#__PURE__*/_styled__default["default"]("div", {
target: "e1x57rfz3"
} )("width:10px;height:10px;border-radius:50%;background-color:", props => getKnobColor(props), ";" + ("" ));
const RadioOptionBorder = /*#__PURE__*/_styled__default["default"]("div", {
target: "e1x57rfz2"
} )("width:18px;height:18px;border-radius:50%;background-color:", designSystem.designTokens.backgroundColorForInput, ";border-width:", designSystem.designTokens.borderWidth2, ";border-style:solid;border-color:", props => getBorderColor(props), ";display:flex;align-items:center;justify-content:center;" + ("" ));
const RadioOptionContainer = /*#__PURE__*/_styled__default["default"]("div", {
target: "e1x57rfz1"
} )("display:flex;align-items:center;grid-area:radio;width:26px;height:26px;border-radius:50%;border:4px solid transparent;", RadioOptionBorder, "{background-color:", props => props.isDisabled ? designSystem.designTokens.backgroundColorForInputWhenDisabled : designSystem.designTokens.backgroundColorForInput, ";}" + ("" ));
const getHoverStyles = props => {
const hoverStyles = /*#__PURE__*/react.css(RadioOptionContainer, "{border-color:", designSystem.designTokens.colorPrimary95, ";}" + ("" ), "" );
return [!props.isDisabled && !props.isReadOnly &&
/*#__PURE__*/
/* prettier-ignore */
react.css("&:hover ", hoverStyles, ";" + ("" ), "" ), props.isHovered && hoverStyles];
};
const RadioOptionLabel = /*#__PURE__*/_styled__default["default"]("label", {
target: "e1x57rfz0"
} )("align-items:center;color:", props => getLabelColor(props), ";cursor:", props => getLabelCursor(props), ";display:flex;", props => {
var _context;
return !props.isReadOnly ? _concatInstanceProperty__default["default"](_context = ":focus-within:has(:focus-visible) ".concat(LabelTextWrapper, " {\n outline: auto 2px ")).call(_context, designSystem.designTokens.borderColorForInputWhenFocused, ";\n outline-offset: 2px;\n width: fit-content;\n }") : '';
}, " ", props => getHoverStyles(props), ";" + ("" ));
const _excluded$1 = ["components"];
function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const Option = _ref => {
let _ref$components = _ref.components,
components = _ref$components === void 0 ? {} : _ref$components,
props = _objectWithoutProperties(_ref, _excluded$1);
const labelProps = props.id ? {
htmlFor: props.id
} : {};
if (!props.isReadOnly) ;
if (components.wrapper) ;
const stylesProps = {
isDisabled: props.isDisabled,
hasError: props.hasError,
hasWarning: props.hasWarning,
isHovered: props.isHovered,
isReadOnly: props.isReadOnly,
isChecked: props.isChecked
};
return jsxRuntime.jsx(RadioOptionLabel, _objectSpread$1(_objectSpread$1(_objectSpread$1({
role: "radio",
"aria-checked": props.isChecked,
onFocus: props.onFocus,
onBlur: props.onBlur
}, stylesProps), utils.filterInvalidAttributes(labelProps)), {}, {
children: jsxRuntime.jsxs(RadioInputWrapper, {
children: [jsxRuntime.jsx("input", _objectSpread$1({
css: inputUtils.accessibleHiddenInputStyles,
id: props.id,
name: props.name,
value: typeof props.value === 'boolean' ? props.value.toString() : props.value,
onChange: props.isReadOnly ? undefined : props.onChange,
disabled: props.isDisabled,
checked: props.isChecked,
type: "radio",
readOnly: props.isReadOnly
}, utils.filterDataAttributes(props))), jsxRuntime.jsx(RadioOptionContainer, _objectSpread$1(_objectSpread$1({}, stylesProps), {}, {
children: jsxRuntime.jsx(RadioOptionBorder, _objectSpread$1(_objectSpread$1({}, stylesProps), {}, {
children: props.isChecked ? jsxRuntime.jsx(RadioOptionKnob, _objectSpread$1({}, stylesProps)) : null
}))
})), jsxRuntime.jsx(LabelTextWrapper, {
isDisabled: props.isDisabled,
children: props.children
}), props.additionalContent && jsxRuntime.jsx(AdditionalTextWrapper, {
isDisabled: props.isDisabled,
children: jsxRuntime.jsx(SpacingsInset__default["default"], {
scale: "xs",
children: props.additionalContent
})
})]
})
}));
};
Option.displayName = 'RadioOption';
var Option$1 = Option;
const _excluded = ["horizontalConstraint", "direction", "directionProps"];
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const Group = _ref => {
let _ref$horizontalConstr = _ref.horizontalConstraint,
horizontalConstraint = _ref$horizontalConstr === void 0 ? 'scale' : _ref$horizontalConstr,
_ref$direction = _ref.direction,
direction = _ref$direction === void 0 ? 'stack' : _ref$direction,
_ref$directionProps = _ref.directionProps,
directionProps = _ref$directionProps === void 0 ? {
scale: 'm'
} : _ref$directionProps,
props = _objectWithoutProperties(_ref, _excluded);
react$1.useEffect(() => {
// NOTE: We allow mixed children rendered as (e.g. spacers)
// as a result we need to filter out children of the correct type.
const childrenAsArray = react$1.Children.toArray(props.children);
_filterInstanceProperty__default["default"](childrenAsArray).call(childrenAsArray, child => child.type.displayName === Option$1.displayName);
}, [props.children]);
const optionElements = _mapInstanceProperty__default["default"](react$1.Children).call(react$1.Children, props.children, (child, index) => {
// NOTE: Allowing to intersperse other elements than `Option`.
if (child && /*#__PURE__*/react$1.isValidElement(child) && child.type.displayName === Option$1.displayName) {
var _context;
const clonedChild = /*#__PURE__*/react$1.cloneElement(child, {
id: props.id && _concatInstanceProperty__default["default"](_context = "".concat(props.id, "-")).call(_context, index),
name: props.name,
isChecked: props.value === child.props.value,
isDisabled: child.props.isDisabled || props.isDisabled,
isReadOnly: props.isReadOnly,
hasError: props.hasError,
hasWarning: props.hasWarning,
onChange: props.onChange,
onFocus: props.onFocus,
onBlur: props.onBlur
});
const _ref2 = child.props.components || {},
wrapper = _ref2.wrapper;
return wrapper ? wrapper(clonedChild) : clonedChild;
}
return child;
});
if (direction === 'inline') {
return jsxRuntime.jsx("div", {
"aria-labelledby": props.id,
"aria-invalid": props['aria-invalid'],
"aria-errormessage": props['aria-errormessage'],
children: jsxRuntime.jsx(Inline__default["default"], _objectSpread(_objectSpread(_objectSpread({}, directionProps), utils.filterDataAttributes(_objectSpread({
horizontalConstraint,
direction
}, props))), {}, {
children: optionElements
}))
});
}
return jsxRuntime.jsx("div", {
"aria-labelledby": props.id,
"aria-invalid": props['aria-invalid'],
"aria-errormessage": props['aria-errormessage'],
children: jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
max: horizontalConstraint,
children: jsxRuntime.jsx(Stack__default["default"], _objectSpread(_objectSpread(_objectSpread({}, directionProps), utils.filterDataAttributes(_objectSpread({
horizontalConstraint,
direction
}, props))), {}, {
children: optionElements
}))
})
});
};
Group.displayName = 'RadioGroup';
var Group$1 = Group;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.3.0";
const RadioInput = {
Group: Group$1,
Option: Option$1
};
exports["default"] = RadioInput;
exports.version = version;