@dxc-technology/halstack-react 8.0.0 → 9.0.1

package/dialog/Dialog.test.js

@@ -6,8 +6,43 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Dialog = _interopRequireDefault(require("./Dialog"));
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
+var _Dialog = _interopRequireDefault(require("./Dialog.tsx"));
+
+var _TextInput = _interopRequireDefault(require("../text-input/TextInput.tsx"));
+
+var _Textarea = _interopRequireDefault(require("../textarea/Textarea.tsx"));
+
+var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox.tsx"));
+
+var _Select = _interopRequireDefault(require("../select/Select.tsx"));
+
+var _Button = _interopRequireDefault(require("../button/Button.tsx"));
+
+var _Link = _interopRequireDefault(require("../link/Link.tsx"));
+
+var _Card = _interopRequireDefault(require("../card/Card.tsx"));
+
+var _RadioGroup = _interopRequireDefault(require("../radio-group/RadioGroup.tsx"));
+
+var _Slider = _interopRequireDefault(require("../slider/Slider.tsx"));
+
+var _Switch = _interopRequireDefault(require("../switch/Switch.tsx"));
+
+var options = [{
+  label: "Female",
+  value: "female"
+}, {
+  label: "Male",
+  value: "male"
+}, {
+  label: "Non-binary",
+  value: "non-binary"
+}, {
+  label: "Other",
+  value: "other"
+}];
 describe("Dialog component tests", function () {
   test("Dialog renders with correct text and accesibility attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "dialog-text")),
@@ -50,7 +85,7 @@ describe("Dialog component tests", function () {
 
     expect(onCloseClick).toHaveBeenCalled();
   });
-  test("Calls correct function onCloseClick when 'escape' key is pressed", function () {
+  test("Calls correct function onCloseClick when 'Escape' key is pressed", function () {
     var onCloseClick = jest.fn();
 
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
@@ -58,7 +93,7 @@ describe("Dialog component tests", function () {
     }, "dialog-text")),
         getByRole = _render5.getByRole;
 
-    _react2.fireEvent.keyDown(getByRole("button"), {
+    _react2.fireEvent.keyDown(getByRole("dialog"), {
       key: "Escape",
       code: "Escape",
       keyCode: 27,
@@ -67,4 +102,268 @@ describe("Dialog component tests", function () {
 
     expect(onCloseClick).toHaveBeenCalled();
   });
+});
+describe("Dialog component: Focus lock tests", function () {
+  test("Close action: when there's no focusable content, the focus never leaves the close action (unless you click outside)", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "example-dialog")),
+        getByRole = _render6.getByRole;
+
+    var button = getByRole("button");
+    var dialog = getByRole("dialog");
+    expect(document.activeElement).toEqual(button);
+    expect(button.getAttribute("aria-label")).toBe("Close dialog");
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).toEqual(button);
+
+    _react2.fireEvent.keyDown(dialog, {
+      key: "Tab",
+      shiftKey: true
+    });
+
+    expect(document.activeElement).toEqual(button);
+  });
+  test("Autofocus with Button component", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      label: "Accept"
+    }))),
+        getAllByRole = _render7.getAllByRole;
+
+    var button = getAllByRole("button")[0];
+    expect(document.activeElement).toEqual(button);
+    expect(button.getAttribute("aria-label")).not.toBe("Close dialog");
+  });
+  test("Autofocus with Card component", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+      linkHref: "https://developer.dxc.com/halstack/next/components/card/"
+    }, "example-card"))),
+        getByRole = _render8.getByRole;
+
+    var card = getByRole("link");
+    expect(document.activeElement).toEqual(card);
+  });
+  test("Autofocus with Checkbox component", function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Name"
+    }))),
+        getByRole = _render9.getByRole;
+
+    var checkbox = getByRole("checkbox");
+    expect(document.activeElement).toEqual(checkbox);
+  });
+  test("Autofocus with Link component", function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "This is a text with a ", /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      href: "#"
+    }, "Link"), " to another page.")),
+        getByRole = _render10.getByRole;
+
+    var link = getByRole("link");
+    expect(document.activeElement).toEqual(link);
+  });
+  test("Autofocus with RadioGroup component", function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "Example",
+      options: options
+    }))),
+        getAllByRole = _render11.getAllByRole;
+
+    var checkedRadio = getAllByRole("radio")[0];
+    expect(document.activeElement).toEqual(checkedRadio);
+  });
+  test("Autofocus with Select component", function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "Country",
+      options: options
+    }))),
+        getByRole = _render12.getByRole;
+
+    var select = getByRole("combobox");
+    expect(document.activeElement).toEqual(select);
+  });
+  test("Autofocus with Slider component", function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+      label: "label",
+      minValue: 0,
+      maxValue: 100,
+      showLimitsValues: true
+    }))),
+        getByRole = _render13.getByRole;
+
+    var slider = getByRole("slider");
+    expect(document.activeElement).toEqual(slider);
+  });
+  test("Autofocus with Switch component", function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      label: "Example"
+    }))),
+        getByRole = _render14.getByRole;
+
+    var switchButton = getByRole("switch");
+    expect(document.activeElement).toEqual(switchButton);
+  });
+  test("Autofocus with Text Input component", function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Name"
+    }))),
+        getByRole = _render15.getByRole;
+
+    var input = getByRole("textbox");
+    expect(document.activeElement).toEqual(input);
+  });
+  test("Autofocus with Textarea component", function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Name"
+    }))),
+        getByRole = _render16.getByRole;
+
+    var textarea = getByRole("textbox");
+    expect(document.activeElement).toEqual(textarea);
+  });
+  test("Negative tabindex elements are not automatically focused, even if it is enabled and a valid focusable item (programatically and by click)", function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement("input", {
+      label: "Name",
+      tabIndex: -1
+    }), /*#__PURE__*/_react["default"].createElement("input", {
+      label: "Name"
+    }))),
+        getAllByRole = _render17.getAllByRole,
+        getByRole = _render17.getByRole;
+
+    var inputs = getAllByRole("textbox");
+    var button = getByRole("button");
+    expect(document.activeElement).toEqual(inputs[1]);
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).toEqual(button);
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).toEqual(inputs[1]);
+  });
+  test("Focus jumps disabled components and negative tabIndexes when autofocusing first item", function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      label: "Accept",
+      disabled: true
+    }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Older age",
+      disabled: true
+    }), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "Country",
+      options: options,
+      disabled: true
+    }), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "Country",
+      options: options,
+      disabled: true
+    }), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Name",
+      disabled: true
+    }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      label: "Accept",
+      tabIndex: -1
+    }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Older age",
+      tabIndex: -1
+    }), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "Country",
+      options: options,
+      tabIndex: -1
+    }), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "Country",
+      options: options,
+      tabIndex: -1
+    }), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Name",
+      tabIndex: -1
+    }), /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Description"
+    }))),
+        getAllByRole = _render18.getAllByRole;
+
+    var textarea = getAllByRole("textbox")[2];
+    expect(document.activeElement).toEqual(textarea);
+  });
+  test("Focus jumps from last element to the first", function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Accept",
+      disabled: true
+    }), /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Name"
+    }), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "Name",
+      options: options
+    }))),
+        getByRole = _render19.getByRole;
+
+    var closeAction = getByRole("button");
+    var textarea = getByRole("textbox");
+    expect(document.activeElement).toEqual(textarea);
+
+    _userEvent["default"].tab();
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).toEqual(closeAction);
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).toEqual(textarea);
+  });
+  test("'display: none;', 'visibility: hidden;' and 'type = 'hidden'' elements are never autofocused", function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement("input", {
+      label: "Name",
+      style: {
+        display: "none"
+      }
+    }), /*#__PURE__*/_react["default"].createElement("input", {
+      label: "Name",
+      style: {
+        visibility: "hidden"
+      }
+    }), /*#__PURE__*/_react["default"].createElement("input", {
+      type: "hidden",
+      name: "example"
+    }))),
+        getByRole = _render20.getByRole;
+
+    var closeAction = getByRole("button");
+    expect(document.activeElement).toEqual(closeAction);
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).toEqual(closeAction);
+  });
+  test("Focus gets trapped in the Dialog when there are not focusable elements inside until it is closed", function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Name"
+    }), /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+      isCloseVisible: false
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "Policy agreement"), /*#__PURE__*/_react["default"].createElement("p", null, "Sample text.")), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Surname"
+    }))),
+        getAllByRole = _render21.getAllByRole;
+
+    var inputs = getAllByRole("textbox");
+    var dialog = getAllByRole("dialog")[0];
+
+    _userEvent["default"].tab();
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).not.toEqual(inputs[1]);
+
+    _react2.fireEvent.keyDown(dialog, {
+      key: "Tab",
+      shiftKey: true
+    });
+
+    _react2.fireEvent.keyDown(dialog, {
+      key: "Tab",
+      shiftKey: true
+    });
+
+    expect(document.activeElement).not.toEqual(inputs[0]);
+  });
 });

package/dialog/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Padding = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Padding = {
     top?: Space;
     bottom?: Space;
     left?: Space;

package/dropdown/Dropdown.js

@@ -19,9 +19,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -258,7 +258,6 @@ var DxcDropdown = function DxcDropdown(_ref) {
     asChild: true,
     type: undefined
   }, /*#__PURE__*/_react["default"].createElement(DropdownTrigger, {
-    opened: isOpen,
     onClick: handleTriggerOnClick,
     onKeyDown: handleTriggerOnKeyDown,
     onBlur: function onBlur(event) {
@@ -275,8 +274,6 @@ var DxcDropdown = function DxcDropdown(_ref) {
     tabIndex: tabIndex,
     ref: triggerRef
   }, /*#__PURE__*/_react["default"].createElement(DropdownTriggerContent, null, label && iconPosition === "after" && /*#__PURE__*/_react["default"].createElement(DropdownTriggerLabel, null, label), icon && /*#__PURE__*/_react["default"].createElement(DropdownTriggerIcon, {
-    label: label,
-    iconPosition: iconPosition,
     disabled: disabled,
     role: typeof icon === "string" ? undefined : "img"
   }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
@@ -371,12 +368,12 @@ var DropdownTriggerLabel = _styledComponents["default"].span(_templateObject4 ||
   return props.theme.buttonFontWeight;
 });
 
-var DropdownTriggerIcon = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
-  return props.theme.buttonIconSize;
+var DropdownTriggerIcon = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  color: ", ";\n\n  img,\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
+  return props.disabled ? props.theme.disabledColor : props.theme.buttonIconColor;
 }, function (props) {
   return props.theme.buttonIconSize;
 }, function (props) {
-  return props.disabled ? props.theme.disabledColor : props.theme.buttonIconColor;
+  return props.theme.buttonIconSize;
 });
 
 var CaretIcon = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  color: ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {