@dxc-technology/halstack-react 0.0.0-8b133ff → 0.0.0-8b5e703

package/select/Select.js

@@ -23,6 +23,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _variables = require("../common/variables.js");
 
 var _uuid = require("uuid");
@@ -39,10 +41,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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 getNotOptionalErrorMessage = function getNotOptionalErrorMessage() {
-  return "This field is required. Please, enter a value.";
-};
-
 var groupsHaveOptions = function groupsHaveOptions(innerOptions) {
   return innerOptions[0].hasOwnProperty("options") ? innerOptions[0].options ? innerOptions.some(function (groupOption) {
     return groupOption.options.length > 0;
@@ -57,6 +55,10 @@ var filteredGroupsHaveOptions = function filteredGroupsHaveOptions(filteredOptio
   }) : true;
 };
 
+var canOpenOptions = function canOpenOptions(options, disabled) {
+  return !disabled && (options === null || options === void 0 ? void 0 : options.length) > 0 && groupsHaveOptions(options);
+};
+
 var filterOptionsBySearchValue = function filterOptionsBySearchValue(options, searchValue) {
   if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
     if (options[0].options) return options.map(function (optionGroup) {
@@ -132,6 +134,10 @@ var getSelectedOption = function getSelectedOption(value, options, multiple, opt
   };
 };
 
+var notOptionalCheck = function notOptionalCheck(value, multiple, optional) {
+  return !optional && (multiple ? value.length === 0 : value === "");
+};
+
 var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _selectedOption$label;
 
@@ -193,6 +199,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var selectSearchInputRef = (0, _react.useRef)(null);
   var selectOptionsListRef = (0, _react.useRef)(null);
   var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   var optionalItem = {
     label: placeholder,
     value: ""
@@ -210,20 +217,8 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       selectedOption = _useMemo.selectedOption,
       singleSelectionIndex = _useMemo.singleSelectionIndex;
 
-  var notOptionalCheck = function notOptionalCheck(value) {
-    return !optional && value === "";
-  };
-
-  var notOptionalMultipleCheck = function notOptionalMultipleCheck(value) {
-    return !optional && value.length === 0;
-  };
-
-  var canBeOpenOptions = function canBeOpenOptions() {
-    return !disabled && (options === null || options === void 0 ? void 0 : options.length) > 0 && groupsHaveOptions(options);
-  };
-
   var openOptions = function openOptions() {
-    if (!isOpen && canBeOpenOptions()) changeIsOpen(true);
+    if (!isOpen && canOpenOptions(options, disabled)) changeIsOpen(true);
   };
 
   var closeOptions = function closeOptions() {
@@ -234,27 +229,21 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   };
 
   var handleSelectChangeValue = function handleSelectChangeValue(newOption) {
+    var newValue;
+
     if (multiple) {
-      var res = [];
-      if ((value !== null && value !== void 0 ? value : innerValue).includes(newOption.value)) res = (value !== null && value !== void 0 ? value : innerValue).filter(function (optionVal) {
+      if ((value !== null && value !== void 0 ? value : innerValue).includes(newOption.value)) newValue = (value !== null && value !== void 0 ? value : innerValue).filter(function (optionVal) {
         return optionVal !== newOption.value;
-      });else res = [].concat((0, _toConsumableArray2["default"])(value !== null && value !== void 0 ? value : innerValue), [newOption.value]);
-      value !== null && value !== void 0 ? value : setInnerValue(res);
-      if (notOptionalMultipleCheck(res)) onChange === null || onChange === void 0 ? void 0 : onChange({
-        value: res,
-        error: getNotOptionalErrorMessage()
-      });else onChange === null || onChange === void 0 ? void 0 : onChange({
-        value: res
-      });
-    } else {
-      value !== null && value !== void 0 ? value : setInnerValue(newOption.value);
-      if (notOptionalCheck(newOption.value)) onChange === null || onChange === void 0 ? void 0 : onChange({
-        value: newOption.value,
-        error: getNotOptionalErrorMessage()
-      });else onChange === null || onChange === void 0 ? void 0 : onChange({
-        value: newOption.value
-      });
-    }
+      });else newValue = [].concat((0, _toConsumableArray2["default"])(value !== null && value !== void 0 ? value : innerValue), [newOption.value]);
+    } else newValue = newOption.value;
+
+    value !== null && value !== void 0 ? value : setInnerValue(newValue);
+    notOptionalCheck(newValue, multiple, optional) ? onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: newValue,
+      error: translatedLabels.formFields.requiredValueErrorMessage
+    }) : onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: newValue
+    });
   };
 
   var handleSelectOnClick = function handleSelectOnClick() {
@@ -275,11 +264,12 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     if (!event.currentTarget.contains(event.relatedTarget)) {
       closeOptions();
       setSearchValue("");
-      if (notOptionalCheck(value !== null && value !== void 0 ? value : innerValue)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
-        value: value !== null && value !== void 0 ? value : innerValue,
-        error: getNotOptionalErrorMessage()
-      });else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
-        value: value !== null && value !== void 0 ? value : innerValue
+      var currentValue = value !== null && value !== void 0 ? value : innerValue;
+      notOptionalCheck(currentValue, multiple, optional) ? onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+        value: currentValue,
+        error: translatedLabels.formFields.requiredValueErrorMessage
+      }) : onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+        value: currentValue
       });
     }
   };
@@ -353,7 +343,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     value !== null && value !== void 0 ? value : setInnerValue([]);
     !optional ? onChange === null || onChange === void 0 ? void 0 : onChange({
       value: [],
-      error: getNotOptionalErrorMessage()
+      error: translatedLabels.formFields.requiredValueErrorMessage
     }) : onChange === null || onChange === void 0 ? void 0 : onChange({
       value: []
     });
@@ -402,7 +392,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       selectContainerRef.current.focus();
     },
     helperText: helperText
-  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
+  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, translatedLabels.formFields.optionalLabel)), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled
   }, helperText), /*#__PURE__*/_react["default"].createElement(Select, {
     id: selectId,
@@ -434,8 +424,8 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     },
     onClick: handleClearOptionsActionOnClick,
     tabIndex: -1,
-    title: "Clear selection",
-    "aria-label": "Clear selection"
+    title: translatedLabels.select.actionClearSelectionTitle,
+    "aria-label": translatedLabels.select.actionClearSelectionTitle
   }, _Icons["default"].clear)), /*#__PURE__*/_react["default"].createElement(SearchableValueContainer, null, /*#__PURE__*/_react["default"].createElement(ValueInput, {
     name: name,
     value: multiple ? (value !== null && value !== void 0 ? value : innerValue).join(",") : value !== null && value !== void 0 ? value : innerValue,
@@ -464,8 +454,8 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     },
     onClick: handleClearSearchActionOnClick,
     tabIndex: -1,
-    title: "Clear search",
-    "aria-label": "Clear search"
+    title: translatedLabels.select.actionClearSearchTitle,
+    "aria-label": translatedLabels.select.actionClearSearchTitle
   }, _Icons["default"].clear), /*#__PURE__*/_react["default"].createElement(CollapseIndicator, {
     disabled: disabled
   }, isOpen ? _Icons["default"].arrowUp : _Icons["default"].arrowDown), isOpen && /*#__PURE__*/_react["default"].createElement(_Listbox["default"], {

package/select/Select.stories.tsx

@@ -371,7 +371,13 @@ const SearchableSelect = () => (
 const SearchableWithValue = () => (
   <ExampleContainer expanded>
     <Title title="Searchable select with value" theme="light" level={4} />
-    <DxcSelect label="Select Label" searchable defaultValue="1" options={single_options} placeholder="Choose an option" />
+    <DxcSelect
+      label="Select Label"
+      searchable
+      defaultValue="1"
+      options={single_options}
+      placeholder="Choose an option"
+    />
   </ExampleContainer>
 );
 
@@ -398,7 +404,13 @@ const DefaultGroupedOptionsSelect = () => (
 const MultipleGroupedOptionsSelect = () => (
   <ExampleContainer expanded>
     <Title title="Grouped options multiple select" theme="light" level={4} />
-    <DxcSelect label="Label" options={group_options} defaultValue={["0", "2"]} multiple placeholder="Choose an option" />
+    <DxcSelect
+      label="Label"
+      options={group_options}
+      defaultValue={["0", "2"]}
+      multiple
+      placeholder="Choose an option"
+    />
   </ExampleContainer>
 );
 const RescaledIcons = () => (