@dxc-technology/halstack-react 0.0.0-c9c1158 → 0.0.0-c9efd3e

package/select/Select.js

@@ -20,16 +20,17 @@ var _utils = require("../common/utils");
 var _Icons = _interopRequireDefault(require("./Icons"));
 var _Listbox = _interopRequireDefault(require("./Listbox"));
 var Popover = _interopRequireWildcard(require("@radix-ui/react-popover"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17; // @ts-nocheck
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var groupsHaveOptions = function groupsHaveOptions(innerOptions) {
-  return innerOptions[0].hasOwnProperty("options") ? innerOptions[0].options ? innerOptions.some(function (groupOption) {
-    return groupOption.options.length > 0;
-  }) : false : true;
+var isOptionGroup = function isOptionGroup(option) {
+  return "options" in option && option.options != null;
 };
-var filteredGroupsHaveOptions = function filteredGroupsHaveOptions(filteredOptions) {
-  return filteredOptions !== null && filteredOptions !== void 0 && filteredOptions[0].options ? filteredOptions.some(function (groupOption) {
+var isArrayOfOptionGroups = function isArrayOfOptionGroups(options) {
+  return isOptionGroup(options[0]);
+};
+var groupsHaveOptions = function groupsHaveOptions(filteredOptions) {
+  return isArrayOfOptionGroups(filteredOptions) ? filteredOptions.some(function (groupOption) {
     var _groupOption$options;
     return ((_groupOption$options = groupOption.options) === null || _groupOption$options === void 0 ? void 0 : _groupOption$options.length) > 0;
   }) : true;
@@ -39,7 +40,7 @@ var canOpenOptions = function canOpenOptions(options, disabled) {
 };
 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) {
+    if (isArrayOfOptionGroups(options)) return options.map(function (optionGroup) {
       var group = {
         label: optionGroup.label,
         options: optionGroup.options.filter(function (option) {
@@ -58,7 +59,7 @@ var getLastOptionIndex = function getLastOptionIndex(options, filteredOptions, s
     var _current$options;
     return acc + ((_current$options = current.options) === null || _current$options === void 0 ? void 0 : _current$options.length);
   };
-  if (searchable && filteredOptions.length > 0) filteredOptions[0].options ? last = filteredOptions.reduce(reducer, 0) - 1 : last = filteredOptions.length - 1;else if ((options === null || options === void 0 ? void 0 : options.length) > 0) options[0].options ? last = options.reduce(reducer, 0) - 1 : last = options.length - 1;
+  if (searchable && (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0) isArrayOfOptionGroups(filteredOptions) ? last = filteredOptions.reduce(reducer, 0) - 1 : last = filteredOptions.length - 1;else if ((options === null || options === void 0 ? void 0 : options.length) > 0) isArrayOfOptionGroups(options) ? last = options.reduce(reducer, 0) - 1 : last = options.length - 1;
   return optional && !multiple ? last + 1 : last;
 };
 var getSelectedOption = function getSelectedOption(value, options, multiple, optional, optionalItem) {
@@ -67,11 +68,9 @@ var getSelectedOption = function getSelectedOption(value, options, multiple, opt
   if (multiple) {
     if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
       options.forEach(function (option) {
-        if (option.options) {
-          option.options.forEach(function (singleOption) {
-            if (value.includes(singleOption.value) && Array.isArray(selectedOption)) selectedOption.push(singleOption);
-          });
-        } else if (value.includes(option.value) && Array.isArray(selectedOption)) selectedOption.push(option);
+        if (isOptionGroup(option)) option.options.forEach(function (singleOption) {
+          if (value.includes(singleOption.value) && Array.isArray(selectedOption)) selectedOption.push(singleOption);
+        });else if (value.includes(option.value) && Array.isArray(selectedOption)) selectedOption.push(option);
       });
     }
   } else {
@@ -81,7 +80,7 @@ var getSelectedOption = function getSelectedOption(value, options, multiple, opt
     } else if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
       var group_index = 0;
       options.some(function (option, index) {
-        if (option.options) {
+        if (isOptionGroup(option)) {
           option.options.some(function (singleOption) {
             if (singleOption.value === value) {
               selectedOption = singleOption;
@@ -103,6 +102,12 @@ var getSelectedOption = function getSelectedOption(value, options, multiple, opt
     singleSelectionIndex: singleSelectionIndex
   };
 };
+var getSelectedOptionLabel = function getSelectedOptionLabel(placeholder, selectedOption) {
+  var _selectedOption$label;
+  if (Array.isArray(selectedOption)) return selectedOption.length === 0 ? placeholder : selectedOption.map(function (option) {
+    return option.label;
+  }).join(", ");else return (_selectedOption$label = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _selectedOption$label !== void 0 ? _selectedOption$label : placeholder;
+};
 var notOptionalCheck = function notOptionalCheck(value, multiple, optional) {
   return !optional && (multiple ? value.length === 0 : value === "");
 };
@@ -127,7 +132,7 @@ var useWidth = function useWidth(target) {
   return width;
 };
 var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var _ref4, _selectedOption$label;
+  var _ref4;
   var label = _ref.label,
     _ref$name = _ref.name,
     name = _ref$name === void 0 ? "" : _ref$name,
@@ -177,6 +182,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     changeIsOpen = _useState12[1];
   var selectRef = (0, _react.useRef)(null);
   var selectSearchInputRef = (0, _react.useRef)(null);
+  var selectedOptionLabelRef = (0, _react.useRef)(null);
   var width = useWidth(selectRef.current);
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
@@ -231,7 +237,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     if (!event.currentTarget.contains(event.relatedTarget)) searchable && selectSearchInputRef.current.focus();
   };
   var handleSelectOnBlur = function handleSelectOnBlur(event) {
-    // focus leaves container (outside, not to childs)
+    // focus leaves container (outside, not to a child)
     if (!event.currentTarget.contains(event.relatedTarget)) {
       closeOptions();
       setSearchValue("");
@@ -273,7 +279,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
           var accLength = optional && !multiple ? 1 : 0;
           if (searchable) {
             if (filteredOptions.length > 0) {
-              if (optional && !multiple && visualFocusIndex === 0 && filteredGroupsHaveOptions(filteredOptions)) handleSelectChangeValue(optionalItem);else filteredOptions[0].options ? filteredGroupsHaveOptions(filteredOptions) && filteredOptions.some(function (groupOption) {
+              if (optional && !multiple && visualFocusIndex === 0 && groupsHaveOptions(filteredOptions)) handleSelectChangeValue(optionalItem);else isArrayOfOptionGroups(filteredOptions) ? groupsHaveOptions(filteredOptions) && filteredOptions.some(function (groupOption) {
                 var groupLength = accLength + groupOption.options.length;
                 groupLength > visualFocusIndex && handleSelectChangeValue(groupOption.options[visualFocusIndex - accLength]);
                 accLength = groupLength;
@@ -281,7 +287,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
               }) : handleSelectChangeValue(filteredOptions[visualFocusIndex - accLength]);
             }
           } else {
-            if (optional && !multiple && visualFocusIndex === 0) handleSelectChangeValue(optionalItem);else options[0].options ? options.some(function (groupOption) {
+            if (optional && !multiple && visualFocusIndex === 0) handleSelectChangeValue(optionalItem);else isArrayOfOptionGroups(options) ? options.some(function (groupOption) {
               var groupLength = accLength + groupOption.options.length;
               groupLength > visualFocusIndex && handleSelectChangeValue(groupOption.options[visualFocusIndex - accLength]);
               accLength = groupLength;
@@ -318,6 +324,11 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     !multiple && closeOptions();
     setSearchValue("");
   }, [handleSelectChangeValue, closeOptions, multiple]);
+  (0, _react.useEffect)(function () {
+    if ((selectedOptionLabelRef === null || selectedOptionLabelRef === void 0 ? void 0 : selectedOptionLabelRef.current) != null) {
+      if ((selectedOptionLabelRef === null || selectedOptionLabelRef === void 0 ? void 0 : selectedOptionLabelRef.current.scrollWidth) > (selectedOptionLabelRef === null || selectedOptionLabelRef === void 0 ? void 0 : selectedOptionLabelRef.current.clientWidth)) selectedOptionLabelRef.current.title = getSelectedOptionLabel(placeholder, selectedOption);else selectedOptionLabelRef.current.title = "";
+    }
+  }, [placeholder, selectedOption]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.select
   }, /*#__PURE__*/_react["default"].createElement(SelectContainer, {
@@ -384,15 +395,12 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     autoComplete: "nope",
     autoCorrect: "nope",
     size: 1
-  }), (!searchable || searchValue === "") && (multiple ? /*#__PURE__*/_react["default"].createElement(SelectedOption, {
-    disabled: disabled,
-    atBackground: (value !== null && value !== void 0 ? value : innerValue).length === 0 || searchable && isOpen
-  }, /*#__PURE__*/_react["default"].createElement(SelectedOptionLabel, null, Array.isArray(selectedOption) && selectedOption.map(function (option) {
-    return option.label;
-  }).join(", ")), Array.isArray(selectedOption) && selectedOption.length === 0 && placeholder) : /*#__PURE__*/_react["default"].createElement(SelectedOption, {
+  }), (!searchable || searchValue === "") && /*#__PURE__*/_react["default"].createElement(SelectedOption, {
     disabled: disabled,
-    atBackground: !(value !== null && value !== void 0 ? value : innerValue) || searchable && isOpen
-  }, /*#__PURE__*/_react["default"].createElement(SelectedOptionLabel, null, (_selectedOption$label = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _selectedOption$label !== void 0 ? _selectedOption$label : placeholder)))), !disabled && error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, null, _Icons["default"].error), searchable && searchValue.length > 0 && /*#__PURE__*/_react["default"].createElement(ClearSearchAction, {
+    atBackground: (multiple ? (value !== null && value !== void 0 ? value : innerValue).length === 0 : !(value !== null && value !== void 0 ? value : innerValue)) || searchable && isOpen
+  }, /*#__PURE__*/_react["default"].createElement(SelectedOptionLabel, {
+    ref: selectedOptionLabelRef
+  }, getSelectedOptionLabel(placeholder, selectedOption)))), !disabled && error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, null, _Icons["default"].error), searchable && searchValue.length > 0 && /*#__PURE__*/_react["default"].createElement(ClearSearchAction, {
     onMouseDown: function onMouseDown(event) {
       // Avoid input to lose focus
       event.preventDefault();

package/select/Select.stories.tsx

@@ -198,7 +198,6 @@ const url_options = [
         icon: (
           <svg
             version="1.1"
-            id="Capa_1"
             x="0px"
             y="0px"
             width="438.536px"