@dxc-technology/halstack-react 0.0.0-ecc45e2 → 0.0.0-ede733c

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;
@@ -26,6 +26,7 @@ declare type Props = {
      */
     onBackgroundClick?: () => void;
     /**
+     * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
      * Size of the padding to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
      */

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"));
 
@@ -63,6 +63,28 @@ var downArrowIcon = /*#__PURE__*/_react["default"].createElement("svg", {
   fill: "none"
 }));
 
+var useWidth = function useWidth(target) {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (target != null) {
+      setWidth(target.getBoundingClientRect().width);
+      var triggerObserver = new ResizeObserver(function (entries) {
+        var rect = entries[0].target.getBoundingClientRect();
+        setWidth(rect === null || rect === void 0 ? void 0 : rect.width);
+      });
+      triggerObserver.observe(target);
+      return function () {
+        triggerObserver.unobserve(target);
+      };
+    }
+  }, [target]);
+  return width;
+};
+
 var DxcDropdown = function DxcDropdown(_ref) {
   var options = _ref.options,
       _ref$optionsIconPosit = _ref.optionsIconPosition,
@@ -85,21 +107,16 @@ var DxcDropdown = function DxcDropdown(_ref) {
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
-  var _useState = (0, _react.useState)("trigger-".concat((0, _uuid.v4)())),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      triggerId = _useState2[0];
+  var _useState3 = (0, _react.useState)("trigger-".concat((0, _uuid.v4)())),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
+      triggerId = _useState4[0];
 
   var menuId = "menu-".concat(triggerId);
 
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      isOpen = _useState4[0],
-      changeIsOpen = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(null),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      menuStyles = _useState6[0],
-      setMenuStyles = _useState6[1];
+      isOpen = _useState6[0],
+      changeIsOpen = _useState6[1];
 
   var _useState7 = (0, _react.useState)(0),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
@@ -109,6 +126,7 @@ var DxcDropdown = function DxcDropdown(_ref) {
   var colorsTheme = (0, _useTheme["default"])();
   var triggerRef = (0, _react.useRef)(null);
   var menuRef = (0, _react.useRef)(null);
+  var width = useWidth(triggerRef.current);
 
   var handleOnOpenMenu = function handleOnOpenMenu() {
     changeIsOpen(true);
@@ -146,7 +164,7 @@ var DxcDropdown = function DxcDropdown(_ref) {
         handleOnOpenMenu();
         break;
 
-      case "Space":
+      case " ":
       case "Down":
       case "ArrowDown":
       case "Enter":
@@ -186,7 +204,7 @@ var DxcDropdown = function DxcDropdown(_ref) {
         setNextIndexFocus();
         break;
 
-      case "Space":
+      case " ":
       case "Enter":
         event.preventDefault();
         handleMenuItemOnClick(options[visualFocusIndex].value);
@@ -226,23 +244,6 @@ var DxcDropdown = function DxcDropdown(_ref) {
       inline: "start"
     });
   }, [visualFocusIndex]);
-
-  var handleMenuResize = function handleMenuResize() {
-    var _triggerRef$current4;
-
-    var rect = triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.getBoundingClientRect();
-    setMenuStyles({
-      width: rect === null || rect === void 0 ? void 0 : rect.width
-    });
-  };
-
-  (0, _react.useEffect)(function () {
-    handleMenuResize();
-    window.addEventListener("resize", handleMenuResize);
-    return function () {
-      window.removeEventListener("resize", handleMenuResize);
-    };
-  }, []);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.dropdown
   }, /*#__PURE__*/_react["default"].createElement(DropdownContainer, {
@@ -254,9 +255,9 @@ var DxcDropdown = function DxcDropdown(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(Popover.Root, {
     open: isOpen
   }, /*#__PURE__*/_react["default"].createElement(Popover.Trigger, {
-    asChild: true
+    asChild: true,
+    type: undefined
   }, /*#__PURE__*/_react["default"].createElement(DropdownTrigger, {
-    opened: isOpen,
     onClick: handleTriggerOnClick,
     onKeyDown: handleTriggerOnKeyDown,
     onBlur: function onBlur(event) {
@@ -267,14 +268,12 @@ var DxcDropdown = function DxcDropdown(_ref) {
     margin: margin,
     size: size,
     id: triggerId,
-    "aria-disabled": disabled,
     "aria-haspopup": "true",
+    "aria-controls": menuId,
     "aria-expanded": isOpen ? true : undefined,
     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", {
@@ -292,7 +291,9 @@ var DxcDropdown = function DxcDropdown(_ref) {
     visualFocusIndex: visualFocusIndex,
     menuItemOnClick: handleMenuItemOnClick,
     onKeyDown: handleMenuOnKeyDown,
-    styles: menuStyles,
+    styles: {
+      width: width
+    },
     ref: menuRef
   })))));
 };
@@ -302,7 +303,7 @@ var sizes = {
   medium: "240px",
   large: "480px",
   fillParent: "100%",
-  fitContent: "unset"
+  fitContent: "fit-content"
 };
 
 var calculateWidth = function calculateWidth(margin, size) {
@@ -367,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) {