@dxc-technology/halstack-react 7.0.0 → 9.0.0

package/select/Select.js

@@ -140,6 +140,28 @@ 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;
 
@@ -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 = {
@@ -359,12 +382,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, {
@@ -471,7 +488,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"