@dxc-technology/halstack-react 0.0.0-9bd9511 → 0.0.0-9c20370

package/radio-group/RadioGroup.js

@@ -1,85 +1,110 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _uuid = require("uuid");
+
 var _useTheme = _interopRequireDefault(require("../useTheme"));
+
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _Radio = _interopRequireDefault(require("./Radio"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var getInitialFocusIndex = function getInitialFocusIndex(innerOptions, value) {
   var initialSelectedOptionIndex = innerOptions.findIndex(function (option) {
     return option.value === value;
   });
   return initialSelectedOptionIndex !== -1 ? initialSelectedOptionIndex : 0;
 };
+
 var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _ref2;
+
   var label = _ref.label,
-    name = _ref.name,
-    helperText = _ref.helperText,
-    options = _ref.options,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$optional = _ref.optional,
-    optional = _ref$optional === void 0 ? false : _ref$optional,
-    optionalItemLabel = _ref.optionalItemLabel,
-    _ref$readonly = _ref.readonly,
-    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
-    _ref$stacking = _ref.stacking,
-    stacking = _ref$stacking === void 0 ? "column" : _ref$stacking,
-    defaultValue = _ref.defaultValue,
-    value = _ref.value,
-    onChange = _ref.onChange,
-    onBlur = _ref.onBlur,
-    error = _ref.error,
-    _ref$tabIndex = _ref.tabIndex,
-    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+      name = _ref.name,
+      helperText = _ref.helperText,
+      options = _ref.options,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$optional = _ref.optional,
+      optional = _ref$optional === void 0 ? false : _ref$optional,
+      optionalItemLabel = _ref.optionalItemLabel,
+      _ref$readonly = _ref.readonly,
+      readonly = _ref$readonly === void 0 ? false : _ref$readonly,
+      _ref$stacking = _ref.stacking,
+      stacking = _ref$stacking === void 0 ? "column" : _ref$stacking,
+      defaultValue = _ref.defaultValue,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      error = _ref.error,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+
   var _useState = (0, _react.useState)("radio-group-".concat((0, _uuid.v4)())),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-    radioGroupId = _useState2[0];
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+      radioGroupId = _useState2[0];
+
   var radioGroupLabelId = "label-".concat(radioGroupId);
   var errorId = "error-".concat(radioGroupId);
+
   var _useState3 = (0, _react.useState)(defaultValue),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    innerValue = _useState4[0],
-    setInnerValue = _useState4[1];
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      innerValue = _useState4[0],
+      setInnerValue = _useState4[1];
+
   var _useState5 = (0, _react.useState)(true),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    firstTimeFocus = _useState6[0],
-    setFirstTimeFocus = _useState6[1];
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      firstTimeFocus = _useState6[0],
+      setFirstTimeFocus = _useState6[1];
+
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
-  var optionalItem = {
-    label: optionalItemLabel || translatedLabels.radioGroup.optionalItemLabelDefault,
-    value: "",
-    disabled: disabled
-  };
   var innerOptions = (0, _react.useMemo)(function () {
-    return optional ? [].concat((0, _toConsumableArray2["default"])(options), [optionalItem]) : options;
-  }, [optional, options]);
+    return optional ? [].concat((0, _toConsumableArray2["default"])(options), [{
+      label: optionalItemLabel !== null && optionalItemLabel !== void 0 ? optionalItemLabel : translatedLabels.radioGroup.optionalItemLabelDefault,
+      value: "",
+      disabled: disabled
+    }]) : options;
+  }, [optional, options, optionalItemLabel, translatedLabels]);
+
   var _useState7 = (0, _react.useState)(getInitialFocusIndex(innerOptions, value !== null && value !== void 0 ? value : innerValue)),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    currentFocusIndex = _useState8[0],
-    setCurrentFocusIndex = _useState8[1];
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      currentFocusIndex = _useState8[0],
+      setCurrentFocusIndex = _useState8[1];
+
   var handleOnChange = (0, _react.useCallback)(function (newValue) {
     var currentValue = value !== null && value !== void 0 ? value : innerValue;
+
     if (newValue !== currentValue && !readonly) {
       value !== null && value !== void 0 ? value : setInnerValue(newValue);
       onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     }
   }, [value, innerValue, onChange]);
+
   var handleOnBlur = function handleOnBlur(event) {
     // If the radio group loses the focus to an element not contained inside it...
     if (!event.currentTarget.contains(event.relatedTarget)) {
@@ -93,29 +118,37 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       });
     }
   };
+
   var handleOnFocus = function handleOnFocus() {
     firstTimeFocus && setFirstTimeFocus(false);
   };
+
   var setPreviousRadioChecked = function setPreviousRadioChecked() {
     setCurrentFocusIndex(function (currentFocusIndex) {
       var index = currentFocusIndex === 0 ? innerOptions.length - 1 : currentFocusIndex - 1;
+
       while (innerOptions[index].disabled) {
         index = index === 0 ? innerOptions.length - 1 : index - 1;
       }
+
       handleOnChange(innerOptions[index].value);
       return index;
     });
   };
+
   var setNextRadioChecked = function setNextRadioChecked() {
     setCurrentFocusIndex(function (currentFocusIndex) {
       var index = currentFocusIndex === innerOptions.length - 1 ? 0 : currentFocusIndex + 1;
+
       while (innerOptions[index].disabled) {
         index = index === innerOptions.length - 1 ? 0 : index + 1;
       }
+
       handleOnChange(innerOptions[index].value);
       return index;
     });
   };
+
   var handleOnKeyDown = function handleOnKeyDown(event) {
     switch (event.key) {
       case "Left":
@@ -125,6 +158,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
         event.preventDefault();
         setPreviousRadioChecked();
         break;
+
       case "Right":
       case "ArrowRight":
       case "Down":
@@ -132,14 +166,16 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
         event.preventDefault();
         setNextRadioChecked();
         break;
+
       case " ":
         event.preventDefault();
         handleOnChange(innerOptions[currentFocusIndex].value);
         break;
     }
   };
+
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme["radioGroup"]
+    theme: colorsTheme.radioGroup
   }, /*#__PURE__*/_react["default"].createElement(RadioGroupContainer, {
     ref: ref
   }, label && /*#__PURE__*/_react["default"].createElement(Label, {
@@ -165,8 +201,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     name: name,
     disabled: disabled,
     value: (_ref2 = value !== null && value !== void 0 ? value : innerValue) !== null && _ref2 !== void 0 ? _ref2 : "",
-    readOnly: true,
-    "aria-hidden": "true"
+    readOnly: true
   }), innerOptions.map(function (option, index) {
     return /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       key: "radio-".concat(index),
@@ -187,7 +222,9 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     "aria-live": error ? "assertive" : "off"
   }, error)));
 });
-var RadioGroupContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
+
+var RadioGroupContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: inline-flex;\n  flex-direction: column;\n"])));
+
 var Label = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  ", "\n"])), function (props) {
   return props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor;
 }, function (props) {
@@ -203,9 +240,11 @@ var Label = _styledComponents["default"].span(_templateObject2 || (_templateObje
 }, function (props) {
   return !props.helperText && "margin-bottom: ".concat(props.theme.groupLabelMargin);
 });
+
 var OptionalLabel = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  font-weight: ", ";\n"])), function (props) {
   return props.theme.optionalLabelFontWeight;
 });
+
 var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-bottom: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.disabledHelperTextFontColor : props.theme.helperTextFontColor;
 }, function (props) {
@@ -221,6 +260,7 @@ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templat
 }, function (props) {
   return props.theme.groupLabelMargin;
 });
+
 var RadioGroup = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: ", ";\n  row-gap: ", ";\n  column-gap: ", ";\n"])), function (props) {
   return props.stacking;
 }, function (props) {
@@ -228,11 +268,14 @@ var RadioGroup = _styledComponents["default"].div(_templateObject5 || (_template
 }, function (props) {
   return props.theme.groupHorizontalGutter;
 });
+
 var ValueInput = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: none;\n"])));
+
 var Error = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n  margin-top: 0.5rem;\n"])), function (props) {
   return props.theme.errorMessageColor;
 }, function (props) {
   return props.theme.fontFamily;
 });
+
 var _default = DxcRadioGroup;
 exports["default"] = _default;