@dxc-technology/halstack-react 0.0.0-f54247d → 0.0.0-f6d6be5

package/text-input/TextInput.test.js

@@ -16,7 +16,7 @@ var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
-var _TextInput = _interopRequireDefault(require("./TextInput"));
+var _TextInput = _interopRequireDefault(require("./TextInput.tsx"));
 
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
@@ -57,6 +57,7 @@ global.DOMRect = {
   }
 };
 var countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Cayman Islands, The", "Central African Republic", "Chad", "Democratic Republic of the Congo", "Dominican Republic", "Dominica", "Denmark", "Djibouti"];
+var specialCharacters = ["/", "\\", "*", "(", ")", "[", "]", "+", "?", "*{[]}|"];
 describe("TextInput component tests", function () {
   test("Renders with correct error aria attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
@@ -1183,10 +1184,108 @@ describe("TextInput component synchronous autosuggest tests", function () {
     expect(input.value).toBe("");
     expect(queryByRole("listbox")).toBeFalsy();
   });
+  test("Autosuggest escapes special characters", function () {
+    var onChange = jest.fn();
+
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: specialCharacters,
+      onChange: onChange
+    })),
+        getAllByText = _render37.getAllByText,
+        getByRole = _render37.getByRole;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    var list = getByRole("listbox");
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "/"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("/").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "\\"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("\\").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "*"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("*").length).toBe(2);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "("
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("(").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: ")"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText(")").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "["
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("[").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "]"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("]").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "+"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("+").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "?"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("?").length).toBe(1);
+  });
 });
 describe("TextInput component asynchronous autosuggest tests", function () {
   test("Autosuggest 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-    var callbackFunc, onChange, _render37, getByRole, getByText, input;
+    var callbackFunc, onChange, _render38, getByRole, getByText, input;
 
     return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
@@ -1203,11 +1302,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               suggestions: callbackFunc,
               onChange: onChange
-            })), getByRole = _render37.getByRole, getByText = _render37.getByText;
+            })), getByRole = _render38.getByRole, getByText = _render38.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1270,14 +1369,14 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     });
     var onChange = jest.fn();
 
-    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Autosuggest Countries",
       suggestions: callbackFunc,
       onChange: onChange
     })),
-        getByRole = _render38.getByRole,
-        queryByText = _render38.queryByText,
-        queryByRole = _render38.queryByRole;
+        getByRole = _render39.getByRole,
+        queryByText = _render39.queryByText,
+        queryByRole = _render39.queryByRole;
 
     var input = getByRole("combobox");
 
@@ -1299,7 +1398,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     expect(input.value).toBe("");
   });
   test("Autosuggest Esc + arrow down working while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-    var callbackFunc, onChange, _render39, getByRole, getByText, queryByText, queryByRole, input, list;
+    var callbackFunc, onChange, _render40, getByRole, getByText, queryByText, queryByRole, input, list;
 
     return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
@@ -1316,11 +1415,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               suggestions: callbackFunc,
               onChange: onChange
-            })), getByRole = _render39.getByRole, getByText = _render39.getByText, queryByText = _render39.queryByText, queryByRole = _render39.queryByRole;
+            })), getByRole = _render40.getByRole, getByText = _render40.getByText, queryByText = _render40.queryByText, queryByRole = _render40.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1368,7 +1467,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee2);
   })));
   test("Asynchronous uncontrolled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-    var callbackFunc, onChange, _render40, getByRole, getByText, input;
+    var callbackFunc, onChange, _render41, getByRole, getByText, input;
 
     return _regenerator["default"].wrap(function _callee3$(_context3) {
       while (1) {
@@ -1385,11 +1484,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByRole = _render40.getByRole, getByText = _render40.getByText;
+            })), getByRole = _render41.getByRole, getByText = _render41.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1419,7 +1518,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee3);
   })));
   test("Asynchronous controlled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-    var callbackFunc, onChange, _render41, getByRole, getByText, queryByRole, input;
+    var callbackFunc, onChange, _render42, getByRole, getByText, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee4$(_context4) {
       while (1) {
@@ -1436,12 +1535,12 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               value: "Denm",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByRole = _render41.getByRole, getByText = _render41.getByText, queryByRole = _render41.queryByRole;
+            })), getByRole = _render42.getByRole, getByText = _render42.getByText, queryByRole = _render42.queryByRole;
             input = getByRole("combobox");
             expect(input.value).toBe("Denm");
 
@@ -1472,7 +1571,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee4);
   })));
   test("Asynchronous autosuggest closes the listbox after finishing no matches search", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
-    var callbackFunc, onChange, _render42, getByText, getByRole, queryByRole, input;
+    var callbackFunc, onChange, _render43, getByText, getByRole, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee5$(_context5) {
       while (1) {
@@ -1489,11 +1588,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByText = _render42.getByText, getByRole = _render42.getByRole, queryByRole = _render42.queryByRole;
+            })), getByText = _render43.getByText, getByRole = _render43.getByRole, queryByRole = _render43.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1516,7 +1615,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee5);
   })));
   test("Asynchronous autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
-    var callbackFunc, onChange, _render43, getByText, getByRole, queryByRole, input;
+    var callbackFunc, onChange, _render44, getByText, getByRole, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee6$(_context6) {
       while (1) {
@@ -1533,11 +1632,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByText = _render43.getByText, getByRole = _render43.getByRole, queryByRole = _render43.queryByRole;
+            })), getByText = _render44.getByText, getByRole = _render44.getByRole, queryByRole = _render44.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1582,7 +1681,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee6);
   })));
   test("Asynchronous autosuggest request failed, shows 'Error fetching data' message", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
-    var errorCallbackFunc, onChange, _render44, getByRole, getByText, input;
+    var errorCallbackFunc, onChange, _render45, getByRole, getByText, input;
 
     return _regenerator["default"].wrap(function _callee7$(_context7) {
       while (1) {
@@ -1597,11 +1696,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: errorCallbackFunc
-            })), getByRole = _render44.getByRole, getByText = _render44.getByText;
+            })), getByRole = _render45.getByRole, getByText = _render45.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);

package/textarea/Textarea.js

@@ -19,13 +19,13 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 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");
 
@@ -171,7 +171,6 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     backgroundType: backgroundType,
     ref: textareaRef,
     tabIndex: tabIndex,
-    "aria-disabled": disabled,
     "aria-invalid": error ? "true" : "false",
     "aria-errormessage": error ? errorId : undefined,
     "aria-required": optional ? "false" : "true"
@@ -193,7 +192,7 @@ var calculateWidth = function calculateWidth(margin, size) {
   return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
 };
 
-var TextareaContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var TextareaContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";

package/textarea/Textarea.stories.jsx

@@ -4,12 +4,20 @@ import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { BackgroundColorProvider } from "../BackgroundColorContext";
 import DarkContainer from "../../.storybook/components/DarkSection";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Textarea",
   component: DxcTextarea,
 };
 
+const opinionatedTheme = {
+  textarea: {
+    fontColor: "#000000",
+    hoverBorderColor: "#a46ede",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <>
@@ -151,7 +159,58 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcTextarea label="Xxlarge" margin="xxlarge" />
-      <hr />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Hovered" helperText="Sample text" placeholder="Placeholder" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Focused" helperText="Sample text" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Disabled"
+          optional
+          helperText="Sample text"
+          placeholder="Enter your text here..."
+          disabled
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled with value" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Disabled" helperText="Sample text" defaultValue="Example text" disabled />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With error" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Textarea with error"
+          helperText="Helper text"
+          placeholder="Enter your text here..."
+          error="Error message."
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Grow manual" theme="light" level={4} />{" "}
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Manual vertical grow"
+          verticalGrow="manual"
+          defaultValue="Long textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
+        />
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );

package/textarea/Textarea.test.js

@@ -8,7 +8,7 @@ var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
-var _Textarea = _interopRequireDefault(require("./Textarea"));
+var _Textarea = _interopRequireDefault(require("./Textarea.tsx"));
 
 describe("Textarea component tests", function () {
   test("Renders with correct label", function () {
@@ -85,7 +85,6 @@ describe("Textarea component tests", function () {
         getByLabelText = _render7.getByLabelText;
 
     var textarea = getByLabelText("Example label");
-    expect(textarea.getAttribute("aria-disabled")).toBe("false");
     expect(textarea.getAttribute("aria-invalid")).toBe("false");
     expect(textarea.getAttribute("aria-describedBy")).toBeNull();
     expect(textarea.getAttribute("aria-required")).toBe("true");
@@ -101,7 +100,7 @@ describe("Textarea component tests", function () {
     var textarea = getByLabelText("Example label");
     expect(textarea.value).toBe("Example text");
   });
-  test("Disabled textarea renders with correct aria and can not be modified", function () {
+  test("Disabled textarea can not be modified", function () {
     var onChange = jest.fn();
 
     var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
@@ -112,7 +111,6 @@ describe("Textarea component tests", function () {
         getByLabelText = _render9.getByLabelText;
 
     var textarea = getByLabelText("Example label");
-    expect(textarea.getAttribute("aria-disabled")).toBe("true");
 
     _userEvent["default"].type(textarea, "Test");
 

package/toggle-group/ToggleGroup.d.ts

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