@dxc-technology/halstack-react 0.0.0-64fdce7 → 0.0.0-6501724

package/radio-group/Radio.js

@@ -21,7 +21,9 @@ var _uuid = require("uuid");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 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); }
 
@@ -56,7 +58,7 @@ var DxcRadio = function DxcRadio(_ref) {
       firstUpdate = _useState4[0],
       setFirstUpdate = _useState4[1];
 
-  (0, _react.useLayoutEffect)(function () {
+  (0, _react.useEffect)(function () {
     var _ref$current2;
 
     // Don't apply in the first render
@@ -69,7 +71,7 @@ var DxcRadio = function DxcRadio(_ref) {
   }, [focused]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.radioGroup
-  }, /*#__PURE__*/_react["default"].createElement(RadioMainContainer, null, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
     error: error,
     disabled: disabled,
     readonly: readonly,
@@ -107,11 +109,9 @@ var getRadioInputStateColor = function getRadioInputStateColor(props, state) {
   }
 };
 
-var RadioMainContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n"])));
-
-var RadioInputContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n"])));
+var RadioInputContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n"])));
 
-var RadioInput = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border: 2px solid ", ";\n  border-radius: 50%;\n\n  &:focus {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n  ", "\n"])), function (props) {
+var RadioInput = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border: 2px solid ", ";\n  border-radius: 50%;\n\n  &:focus {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n  ", "\n"])), function (props) {
   return getRadioInputStateColor(props, "enabled");
 }, function (props) {
   return props.theme.focusBorderColor;
@@ -119,11 +119,11 @@ var RadioInput = _styledComponents["default"].span(_templateObject3 || (_templat
   return props.disabled && "pointer-events: none;";
 });
 
-var Dot = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 10px;\n  width: 10px;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (props) {
+var Dot = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 10px;\n  width: 10px;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (props) {
   return getRadioInputStateColor(props, "enabled");
 });
 
-var Label = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  ", "\n"])), function (props) {
+var Label = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  ", "\n"])), function (props) {
   return props.theme.radioInputLabelMargin;
 }, function (props) {
   return props.theme.fontFamily;
@@ -139,7 +139,7 @@ var Label = _styledComponents["default"].span(_templateObject5 || (_templateObje
   return props.disabled ? "color: ".concat(props.theme.disabledRadioInputLabelFontColor, ";") : "color: ".concat(props.theme.radioInputLabelFontColor);
 });
 
-var RadioContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  cursor: ", ";\n\n  &:hover {\n    ", " {\n      border-color: ", ";\n    }\n    ", " {\n      background-color: ", ";\n    }\n  }\n  &:active {\n    ", " {\n      border-color: ", ";\n    }\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
+var RadioContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  cursor: ", ";\n\n  &:hover {\n    ", " {\n      border-color: ", ";\n    }\n    ", " {\n      background-color: ", ";\n    }\n  }\n  &:active {\n    ", " {\n      border-color: ", ";\n    }\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
   return props.disabled ? "not-allowed" : props.readonly ? "default" : "pointer";
 }, RadioInput, function (props) {
   return !props.disabled && getRadioInputStateColor(props, "hover");

package/radio-group/RadioGroup.js

@@ -83,14 +83,13 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
 
   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),
@@ -202,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),
@@ -225,7 +223,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
   }, 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;

package/radio-group/RadioGroup.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import Title from "../../.storybook/components/Title";
 import DxcRadioGroup from "./RadioGroup";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Radio Group",
@@ -19,83 +20,195 @@ const options = [
 
 const single_disabled_options = [{ label: "Option A", value: "A", disabled: true }];
 
+const opinionatedTheme = {
+  radioGroup: {
+    baseColor: "#0086e6",
+    fontColor: "#000000",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <Title title="Radio input states" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
-      <DxcRadioGroup label="Example" defaultValue="A" options={single_option} />
+      <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcRadioGroup label="Example" defaultValue="A" options={single_option} />
+      <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Active" theme="light" level={4} />
-      <DxcRadioGroup label="Example" defaultValue="A" options={single_option} />
+      <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused" theme="light" level={4} />
-      <DxcRadioGroup label="Example" defaultValue="A" options={single_option} />
+      <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_disabled_options} defaultValue="A" />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={single_disabled_options} defaultValue="A" />
     </ExampleContainer>
     <Title title="Readonly radio input sub-states" theme="light" level={3} />
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={single_option} defaultValue="A" readonly />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={single_option} defaultValue="A" readonly />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Active" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={single_option} defaultValue="A" readonly />
     </ExampleContainer>
     <Title title="Error radio input sub-states" theme="light" level={3} />
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_option} defaultValue="A" error="Error message" />
+      <DxcRadioGroup
+        label="Label"
+        helperText="Helper text"
+        options={single_option}
+        defaultValue="A"
+        error="Error message"
+      />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly error="Error message" />
+      <DxcRadioGroup
+        label="Label"
+        helperText="Helper text"
+        options={single_option}
+        defaultValue="A"
+        readonly
+        error="Error message"
+      />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Active" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly error="Error message" />
+      <DxcRadioGroup
+        label="Label"
+        helperText="Helper text"
+        options={single_option}
+        defaultValue="A"
+        readonly
+        error="Error message"
+      />
     </ExampleContainer>
     <Title title="Variants" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Column" theme="light" level={4} />
-      <DxcRadioGroup label="Example" helperText="Helper text" options={options} />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={options} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Row" theme="light" level={4} />
-      <DxcRadioGroup label="Example" helperText="Helper text" options={options} stacking="row" />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={options} stacking="row" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Optional" theme="light" level={4} />
-      <DxcRadioGroup label="Example" optional helperText="Helper text" options={options} stacking="row" />
+      <DxcRadioGroup label="Label" optional helperText="Helper text" options={options} stacking="row" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcRadioGroup label="Example" helperText="Helper text" options={options} disabled />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={options} disabled />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Readonly" theme="light" level={4} />
-      <DxcRadioGroup label="Example" readonly helperText="Helper text" options={options} />
+      <DxcRadioGroup label="Label" readonly helperText="Helper text" options={options} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Error space reserved" theme="light" level={4} />
-      <DxcRadioGroup label="Example" error="" helperText="Helper text" options={options} />
+      <DxcRadioGroup label="Label" error="" helperText="Helper text" options={options} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Error" theme="light" level={4} />
-      <DxcRadioGroup label="Example" error="Error message" helperText="Helper text" options={options} />
+      <DxcRadioGroup label="Label" error="Error message" helperText="Helper text" options={options} />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Enabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Active" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" helperText="Helper text" options={single_disabled_options} defaultValue="A" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Readonly enabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readonly />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Readonly hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readonly />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Readonly active" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readonly />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Readonly focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readonly />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Enabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" error="Error message" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" error="Error message" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Active" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" error="Error message" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" error="Error message" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" helperText="Helper text" options={options} disabled defaultValue="A" />
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );

package/radio-group/RadioGroup.test.js

@@ -73,7 +73,7 @@ describe("Radio Group component tests", function () {
     expect(error.getAttribute("aria-live")).toBe("off");
     radios.forEach(function (radio, index) {
       // if no option was previously selected, first option is the focusable one
-      index === 0 ? expect(radio.tabIndex).toBe(0) : expect(radio.tabIndex).toBe(-1);
+      if (index === 0) expect(radio.tabIndex).toBe(0);else expect(radio.tabIndex).toBe(-1);
       expect(radio.getAttribute("aria-checked")).toBe("false");
       expect(radio.getAttribute("aria-disabled")).toBe("false");
       expect(radio.getAttribute("aria-labelledby")).toBe(getByText("Option 0".concat(index + 1)).id);

package/resultsetTable/ResultsetTable.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _Table = _interopRequireDefault(require("../table/Table"));
 
@@ -29,7 +29,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _Icons = _interopRequireDefault(require("./Icons"));
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 var _templateObject, _templateObject2, _templateObject3;
 

package/resultsetTable/ResultsetTable.test.js

@@ -12,7 +12,7 @@ var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
-var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable"));
+var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable.tsx"));
 
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;

package/resultsetTable/types.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Margin = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type Column = {
+export declare type Column = {
     /**
      * Column display value.
      */

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 {
@@ -163,7 +163,7 @@ var useWidth = function useWidth(target) {
 };
 
 var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var _selectedOption$label;
+  var _ref4, _selectedOption$label;
 
   var label = _ref.label,
       _ref$name = _ref.name,
@@ -256,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);
@@ -422,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,
@@ -437,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, {
@@ -451,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, {