@dxc-technology/halstack-react 0.0.0-c18d61a → 0.0.0-c1a6e05

package/select/Select.js

@@ -25,11 +25,11 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _uuid = require("uuid");
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 var _Icons = _interopRequireDefault(require("./Icons"));
 
@@ -99,9 +99,9 @@ var getSelectedOption = function getSelectedOption(value, options, multiple, opt
       options.forEach(function (option) {
         if (option.options) {
           option.options.forEach(function (singleOption) {
-            if (value.includes(singleOption.value)) selectedOption.push(singleOption);
+            if (value.includes(singleOption.value) && Array.isArray(selectedOption)) selectedOption.push(singleOption);
           });
-        } else if (value.includes(option.value)) selectedOption.push(option);
+        } else if (value.includes(option.value) && Array.isArray(selectedOption)) selectedOption.push(option);
       });
     }
   } else {
@@ -140,8 +140,30 @@ var notOptionalCheck = function notOptionalCheck(value, multiple, optional) {
   return !optional && (multiple ? value.length === 0 : value === "");
 };
 
+var useWidth = function useWidth(target) {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (target != null) {
+      setWidth(target.getBoundingClientRect().width);
+      var triggerObserver = new ResizeObserver(function (entries) {
+        var rect = entries[0].target.getBoundingClientRect();
+        setWidth(rect === null || rect === void 0 ? void 0 : rect.width);
+      });
+      triggerObserver.observe(target);
+      return function () {
+        triggerObserver.unobserve(target);
+      };
+    }
+  }, [target]);
+  return width;
+};
+
 var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var _selectedOption$label;
+  var _ref4, _selectedOption$label;
 
   var label = _ref.label,
       _ref$name = _ref.name,
@@ -169,36 +191,37 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
-  var _useState = (0, _react.useState)("select-".concat((0, _uuid.v4)())),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      selectId = _useState2[0];
+  var _useState3 = (0, _react.useState)("select-".concat((0, _uuid.v4)())),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
+      selectId = _useState4[0];
 
   var selectLabelId = "label-".concat(selectId);
   var errorId = "error-".concat(selectId);
   var optionsListId = "".concat(selectId, "-listbox");
 
-  var _useState3 = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : ""),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      innerValue = _useState4[0],
-      setInnerValue = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(""),
+  var _useState5 = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : ""),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      searchValue = _useState6[0],
-      setSearchValue = _useState6[1];
+      innerValue = _useState6[0],
+      setInnerValue = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(-1),
+  var _useState7 = (0, _react.useState)(""),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      visualFocusIndex = _useState8[0],
-      changeVisualFocusIndex = _useState8[1];
+      searchValue = _useState8[0],
+      setSearchValue = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(false),
+  var _useState9 = (0, _react.useState)(-1),
       _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      isOpen = _useState10[0],
-      changeIsOpen = _useState10[1];
+      visualFocusIndex = _useState10[0],
+      changeVisualFocusIndex = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      isOpen = _useState12[0],
+      changeIsOpen = _useState12[1];
 
   var selectRef = (0, _react.useRef)(null);
   var selectSearchInputRef = (0, _react.useRef)(null);
+  var width = useWidth(selectRef.current);
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
   var optionalItem = {
@@ -233,9 +256,11 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     var newValue;
 
     if (multiple) {
-      if ((value !== null && value !== void 0 ? value : innerValue).includes(newOption.value)) newValue = (value !== null && value !== void 0 ? value : innerValue).filter(function (optionVal) {
+      var _ref2, _ref3;
+
+      if ((value !== null && value !== void 0 ? value : innerValue).includes(newOption.value)) newValue = ((_ref2 = value && Array.isArray(value) && value) !== null && _ref2 !== void 0 ? _ref2 : innerValue && Array.isArray(innerValue) && innerValue).filter(function (optionVal) {
         return optionVal !== newOption.value;
-      });else newValue = [].concat((0, _toConsumableArray2["default"])(value !== null && value !== void 0 ? value : innerValue), [newOption.value]);
+      });else newValue = [].concat((0, _toConsumableArray2["default"])((_ref3 = value && Array.isArray(value) && value) !== null && _ref3 !== void 0 ? _ref3 : innerValue && Array.isArray(innerValue) && innerValue), [newOption.value]);
     } else newValue = newOption.value;
 
     value !== null && value !== void 0 ? value : setInnerValue(newValue);
@@ -359,12 +384,6 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     !multiple && closeOptions();
     setSearchValue("");
   }, [handleSelectChangeValue, closeOptions, multiple]);
-  var getSelectWidth = (0, _react.useCallback)(function () {
-    var _selectRef$current;
-
-    var rect = selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.getBoundingClientRect();
-    return rect === null || rect === void 0 ? void 0 : rect.width;
-  }, []);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.select
   }, /*#__PURE__*/_react["default"].createElement(SelectContainer, {
@@ -405,7 +424,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     "aria-invalid": error ? true : false,
     "aria-errormessage": error ? errorId : undefined,
     "aria-required": !disabled && !optional
-  }, multiple && selectedOption.length > 0 && /*#__PURE__*/_react["default"].createElement(SelectionIndicator, null, /*#__PURE__*/_react["default"].createElement(SelectionNumber, {
+  }, multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && /*#__PURE__*/_react["default"].createElement(SelectionIndicator, null, /*#__PURE__*/_react["default"].createElement(SelectionNumber, {
     disabled: disabled
   }, selectedOption.length), /*#__PURE__*/_react["default"].createElement(ClearOptionsAction, {
     disabled: disabled,
@@ -420,7 +439,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   }, _Icons["default"].clear)), /*#__PURE__*/_react["default"].createElement(SearchableValueContainer, null, /*#__PURE__*/_react["default"].createElement(ValueInput, {
     name: name,
     disabled: disabled,
-    value: multiple ? (value !== null && value !== void 0 ? value : innerValue).join(",") : value !== null && value !== void 0 ? value : innerValue,
+    value: multiple ? ((_ref4 = value && Array.isArray(value) && value) !== null && _ref4 !== void 0 ? _ref4 : innerValue && Array.isArray(innerValue) && innerValue).join(",") : value !== null && value !== void 0 ? value : innerValue,
     readOnly: true,
     "aria-hidden": "true"
   }), searchable && /*#__PURE__*/_react["default"].createElement(SearchInput, {
@@ -434,9 +453,9 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   }), (!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, selectedOption.map(function (option) {
+  }, /*#__PURE__*/_react["default"].createElement(SelectedOptionLabel, null, Array.isArray(selectedOption) && selectedOption.map(function (option) {
     return option.label;
-  }).join(", ")), selectedOption.length === 0 && placeholder) : /*#__PURE__*/_react["default"].createElement(SelectedOption, {
+  }).join(", ")), Array.isArray(selectedOption) && selectedOption.length === 0 && placeholder) : /*#__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, {
@@ -471,7 +490,9 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     optionalItem: optionalItem,
     searchable: searchable,
     handleOptionOnClick: handleOptionOnClick,
-    getSelectWidth: getSelectWidth
+    styles: {
+      width: width
+    }
   }))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
     "aria-live": error ? "assertive" : "off"