@dxc-technology/halstack-react 0.0.0-63ee6f9 → 0.0.0-64ec938

package/text-input/TextInput.test.js

@@ -118,8 +118,7 @@ describe("TextInput component tests", function () {
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "Test",
-      error: null
+      value: "Test"
     });
   });
   test("Not optional constraint (onChange)", function () {
@@ -143,8 +142,7 @@ describe("TextInput component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "Test",
-      error: null
+      value: "Test"
     });
 
     _userEvent["default"].clear(input);
@@ -205,16 +203,14 @@ describe("TextInput component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "pattern4&",
-      error: null
+      value: "pattern4&"
     });
 
     _react2.fireEvent.blur(input);
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "pattern4&",
-      error: null
+      value: "pattern4&"
     });
   });
   test("Length constraint", function () {
@@ -268,16 +264,14 @@ describe("TextInput component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "length",
-      error: null
+      value: "length"
     });
 
     _react2.fireEvent.blur(input);
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "length",
-      error: null
+      value: "length"
     });
   });
   test("Pattern and length constraints", function () {
@@ -350,16 +344,14 @@ describe("TextInput component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "tests4&",
-      error: null
+      value: "tests4&"
     });
 
     _react2.fireEvent.blur(input);
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "tests4&",
-      error: null
+      value: "tests4&"
     });
   });
   test("onChange function is called correctly", function () {
@@ -378,8 +370,7 @@ describe("TextInput component tests", function () {
     expect(input.value).toBe("onchange event test");
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "onchange event test",
-      error: null
+      value: "onchange event test"
     });
   });
   test("onBlur function is called correctly", function () {
@@ -405,8 +396,7 @@ describe("TextInput component tests", function () {
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "Blur test",
-      error: null
+      value: "Blur test"
     });
   });
   test("Clear action's tooltip is correct", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
@@ -638,7 +628,7 @@ describe("TextInput component tests", function () {
     expect(input.getAttribute("aria-expanded")).toBe("true");
     expect(list.getAttribute("aria-label")).toBe("Autocomplete Countries");
     var options = getAllByRole("option");
-    expect(options[0].getAttribute("aria-selected")).toBe("false");
+    expect(options[0].getAttribute("aria-selected")).toBeNull();
   });
 });
 describe("TextInput component synchronous autosuggest tests", function () {
@@ -944,8 +934,7 @@ describe("TextInput component synchronous autosuggest tests", function () {
             _userEvent["default"].click(getByRole("option"));
 
             expect(onChange).toHaveBeenCalledWith({
-              value: "Andorra",
-              error: null
+              value: "Andorra"
             });
             expect(queryByRole("listbox")).toBeFalsy();
 
@@ -1291,7 +1280,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1363,7 +1352,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1412,7 +1401,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1481,7 +1470,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1508,8 +1497,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
             _userEvent["default"].click(getByRole("option"));
 
             expect(onChange).toHaveBeenCalledWith({
-              value: "Denmark",
-              error: null
+              value: "Denmark"
             });
             expect(input.value).toBe("Denmark");
 
@@ -1533,7 +1521,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1560,8 +1548,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
             _userEvent["default"].click(getByRole("option"));
 
             expect(onChange).toHaveBeenCalledWith({
-              value: "Denmark",
-              error: null
+              value: "Denmark"
             });
             expect(queryByRole("listbox")).toBeFalsy();
 
@@ -1585,7 +1572,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1629,7 +1616,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1693,7 +1680,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               var result = new Promise(function (resolve, reject) {
                 return setTimeout(function () {
                   reject("err");
-                }, 1000);
+                }, 100);
               });
               return result;
             });

package/text-input/types.d.ts

@@ -6,7 +6,7 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+declare type SVG = React.SVGProps<SVGSVGElement>;
 declare type Action = {
     /**
      * This function will be called when the user clicks the action.
@@ -78,26 +78,29 @@ declare type Props = {
      * This function will be called when the user types within the input
      * element of the component. An object including the current value and
      * the error (if the value entered is not valid) will be passed to this
-     * function. If there is no error, error will be null.
+     * function. If there is no error, error will not be defined.
      */
     onChange?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
      * This function will be called when the input element loses the focus.
      * An object including the input value and the error (if the value
      * entered is not valid) will be passed to this function. If there is no error,
-     * error will be null.
+     * error will not be defined.
      */
     onBlur?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
-     * If it is defined, the component will change its appearance, showing
-     * the error below the input component. If it is not defined, the error
-     * messages will be managed internally, but never displayed on its own.
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the input component. If
+     * the defined value is an empty string, it will reserve a space below
+     * the component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
      */
     error?: string;
     /**
@@ -114,7 +117,7 @@ declare type Props = {
      * pattern, the onBlur and onChange functions will be called with the
      * current value and an internal error informing that this value does not
      * match the pattern. If the pattern is met, the error parameter of both
-     * events will be null.
+     * events will not be defined.
      */
     pattern?: string;
     /**
@@ -124,7 +127,7 @@ declare type Props = {
      * comply the minimum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     minLength?: number;
     /**
@@ -134,7 +137,7 @@ declare type Props = {
      * comply the maximum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     maxLength?: number;
     /**
@@ -148,7 +151,7 @@ declare type Props = {
      */
     margin?: Space | Margin;
     /**
-     * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
+     * Size of the component.
      */
     size?: "small" | "medium" | "large" | "fillParent";
     /**
@@ -160,4 +163,16 @@ declare type Props = {
  * Reference to the component.
  */
 export declare type RefType = HTMLDivElement;
+/**
+ * Single suggestion of the Autosuggest Text Input component.
+ */
+export declare type SuggestionProps = {
+    id: string;
+    value: string;
+    onClick: () => void;
+    suggestion: string;
+    isLast: boolean;
+    visuallyFocused: boolean;
+    highlighted: boolean;
+};
 export default Props;

package/textarea/Textarea.js

@@ -23,6 +23,8 @@ var _utils = require("../common/utils.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _variables = require("../common/variables.js");
 
 var _uuid = require("uuid");
@@ -35,14 +37,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 getPatternErrorMessage = function getPatternErrorMessage() {
-  return "Please match the format requested.";
-};
-
 var patternMatch = function patternMatch(pattern, value) {
   return new RegExp(pattern).test(value);
 };
@@ -90,13 +84,10 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
 
   var colorsTheme = (0, _useTheme["default"])();
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   var textareaRef = (0, _react.useRef)(null);
   var errorId = "error-".concat(textareaId);
 
-  var getLengthErrorMessage = function getLengthErrorMessage() {
-    return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
-  };
-
   var isNotOptional = function isNotOptional(value) {
     return value === "" && !optional;
   };
@@ -109,32 +100,30 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     value !== null && value !== void 0 ? value : setInnerValue(newValue);
     if (isNotOptional(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue,
-      error: getNotOptionalErrorMessage()
+      error: translatedLabels.formFields.requiredValueErrorMessage
     });else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue,
-      error: getLengthErrorMessage()
+      error: translatedLabels.formFields.lengthErrorMessage(minLength, maxLength)
     });else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue,
-      error: getPatternErrorMessage()
+      error: translatedLabels.formFields.formatRequestedErrorMessage
     });else onChange === null || onChange === void 0 ? void 0 : onChange({
-      value: newValue,
-      error: null
+      value: newValue
     });
   };
 
   var handleTOnBlur = function handleTOnBlur(event) {
     if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getNotOptionalErrorMessage()
+      error: translatedLabels.formFields.requiredValueErrorMessage
     });else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getLengthErrorMessage()
+      error: translatedLabels.formFields.lengthErrorMessage(minLength, maxLength)
     });else if (event.target.value && pattern && !patternMatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getPatternErrorMessage()
+      error: translatedLabels.formFields.formatRequestedErrorMessage
     });else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
-      value: event.target.value,
-      error: null
+      value: event.target.value
     });
   };
 
@@ -162,7 +151,7 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     disabled: disabled,
     backgroundType: backgroundType,
     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,
     backgroundType: backgroundType
   }, helperText), /*#__PURE__*/_react["default"].createElement(Textarea, {

package/textarea/Textarea.test.js

@@ -152,8 +152,7 @@ describe("Textarea component tests", function () {
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "Test",
-      error: null
+      value: "Test"
     });
   });
   test("Not optional constraint (onChange)", function () {
@@ -178,8 +177,7 @@ describe("Textarea component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "Test",
-      error: null
+      value: "Test"
     });
 
     _userEvent["default"].clear(textarea);
@@ -239,16 +237,14 @@ describe("Textarea component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "pattern4&",
-      error: null
+      value: "pattern4&"
     });
 
     _react2.fireEvent.blur(textarea);
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "pattern4&",
-      error: null
+      value: "pattern4&"
     });
   });
   test("Length constraint", function () {
@@ -301,16 +297,14 @@ describe("Textarea component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "length",
-      error: null
+      value: "length"
     });
 
     _react2.fireEvent.blur(textarea);
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "length",
-      error: null
+      value: "length"
     });
   });
   test("Pattern and length constraints", function () {
@@ -382,16 +376,14 @@ describe("Textarea component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "tests4&",
-      error: null
+      value: "tests4&"
     });
 
     _react2.fireEvent.blur(textarea);
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "tests4&",
-      error: null
+      value: "tests4&"
     });
   });
   test("onBlur function is called correctly", function () {
@@ -415,8 +407,7 @@ describe("Textarea component tests", function () {
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "Blur test",
-      error: null
+      value: "Blur test"
     });
   });
   test("onChange function is called correctly", function () {
@@ -439,8 +430,7 @@ describe("Textarea component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "Controlled test",
-      error: null
+      value: "Controlled test"
     });
     expect(textarea.value).toBe("Test value");
   });

package/textarea/types.d.ts

@@ -56,26 +56,29 @@ declare type Props = {
      * This function will be called when the user types within the textarea.
      * An object including the current value and the error (if the value
      * entered is not valid) will be passed to this function.
-     * If there is no error, error will be null.
+     * If there is no error, error will not be defined.
      */
     onChange?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
      * This function will be called when the textarea loses the focus. An
      * object including the textarea value and the error (if the value entered
      * is not valid) will be passed to this function. If there is no error,
-     * error will be null.
+     * error will not be defined.
      */
     onBlur?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
-     * If it is defined, the component will change its appearance, showing
-     * the error below the textarea. If it is not defined, the error
-     * messages will be managed internally, but never displayed on its own.
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the textarea. If the
+     * defined value is an empty string, it will reserve a space below the
+     * component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
      */
     error?: string;
     /**
@@ -85,7 +88,7 @@ declare type Props = {
      * pattern, the onBlur and onChange functions will be called with the
      * current value and an internal error informing that this value does not
      * match the pattern. If the pattern is met, the error parameter of both
-     * events will be null.
+     * events will not be defined.
      */
     pattern?: string;
     /**
@@ -95,7 +98,7 @@ declare type Props = {
      * comply the minimum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     minLength?: number;
     /**
@@ -105,7 +108,7 @@ declare type Props = {
      * comply the maximum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     maxLength?: number;
     /**
@@ -119,7 +122,7 @@ declare type Props = {
      */
     margin?: Space | Margin;
     /**
-     * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
+     * Size of the component.
      */
     size?: "small" | "medium" | "large" | "fillParent";
     /**

package/toggle-group/ToggleGroup.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import ToogleGroupPropsType from "./types";
-declare const DxcToggleGroup: ({ label, helperText, value, onChange, disabled, options, margin, multiple, tabIndex, }: ToogleGroupPropsType) => JSX.Element;
+declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChange, disabled, options, margin, multiple, tabIndex, }: ToogleGroupPropsType) => JSX.Element;
 export default DxcToggleGroup;

package/toggle-group/ToggleGroup.js

@@ -34,6 +34,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var DxcToggleGroup = function DxcToggleGroup(_ref) {
   var label = _ref.label,
       helperText = _ref.helperText,
+      defaultValue = _ref.defaultValue,
       value = _ref.value,
       onChange = _ref.onChange,
       _ref$disabled = _ref.disabled,
@@ -46,7 +47,7 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
   var colorsTheme = (0, _useTheme["default"])();
 
-  var _useState = (0, _react.useState)(multiple ? [] : -1),
+  var _useState = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : -1),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       selectedValue = _useState2[0],
       setSelectedValue = _useState2[1];
@@ -108,9 +109,9 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
     role: multiple ? "group" : "radiogroup"
   }, options.map(function (option, i) {
     return /*#__PURE__*/_react["default"].createElement(ToggleContainer, {
-      selected: multiple && Array.isArray(value) ? value ? value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
+      selected: multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
       role: multiple ? "switch" : "radio",
-      "aria-checked": multiple && Array.isArray(value) ? value ? value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
+      "aria-checked": multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
       tabIndex: !disabled ? tabIndex : -1,
       onClick: function onClick() {
         return !disabled && handleToggleChange(option.value);
@@ -172,7 +173,7 @@ var ToggleGroup = _styledComponents["default"].div(_templateObject3 || (_templat
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
 
-var OptionsContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  opacity: 1;\n  height: calc(48px - 4px - 4px);\n  border-width: ", ";\n  border-style: ", ";\n  border-radius: ", ";\n  border-color: ", ";\n  background-color: ", ";\n  padding: 4px;\n  margin-top: ", ";\n"])), function (props) {
+var OptionsContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  opacity: 1;\n  height: calc(48px - 4px - 4px);\n  border-width: ", ";\n  border-style: ", ";\n  border-radius: ", ";\n  border-color: ", ";\n  background-color: ", ";\n  padding: 4px;\n  margin-top: ", ";\n"])), function (props) {
   return props.theme.containerBorderThickness;
 }, function (props) {
   return props.theme.containerBorderStyle;

package/toggle-group/ToggleGroup.stories.tsx

@@ -97,7 +97,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Selected" theme="light" level={4} />
-      <DxcToggleGroup label="Selected" helperText="HelperText" value={2} options={options} />
+      <DxcToggleGroup label="Selected" helperText="HelperText" defaultValue={2} options={options} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Icons toggle group" theme="light" level={4} />
@@ -109,11 +109,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcToggleGroup label="Disabled" value={2} options={options} disabled />
+      <DxcToggleGroup label="Disabled" defaultValue={2} options={options} disabled />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcToggleGroup label="Hovered" options={twoOptions} value={2} />
+      <DxcToggleGroup label="Hovered" options={twoOptions} defaultValue={2} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Multiple toggleGroup" theme="light" level={4} />
@@ -121,7 +121,7 @@ export const Chromatic = () => (
         label="Toggle group"
         helperText="Please select one or more"
         options={options}
-        value={[1, 3]}
+        defaultValue={[1, 3]}
         multiple
       ></DxcToggleGroup>
     </ExampleContainer>