@dxc-technology/halstack-react 0.0.0-0e7fa98 → 0.0.0-0ea575c

package/radio-group/RadioGroup.test.js

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _react = _interopRequireDefault(require("react"));
 
-var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
-
 var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
+var _RadioGroup = _interopRequireDefault(require("./RadioGroup.tsx"));
+
 var options = [{
   label: "Option 01",
   value: "1"
@@ -38,7 +38,7 @@ var options = [{
   label: "Option 09",
   value: "9"
 }];
-var single_disabled_options = [{
+var singleDisabledOptions = [{
   label: "Option 01",
   value: "1"
 }, {
@@ -107,8 +107,8 @@ describe("Radio Group component tests", function () {
     });
 
     _react2.fireEvent.keyDown(radioGroup, {
-      key: "Enter",
-      code: "Enter",
+      key: " ",
+      code: "Space",
       keyCode: 13,
       charCode: 13
     });
@@ -135,7 +135,7 @@ describe("Radio Group component tests", function () {
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radioGroup-label",
-      options: single_disabled_options
+      options: singleDisabledOptions
     })),
         getByRole = _render4.getByRole,
         getAllByRole = _render4.getAllByRole;
@@ -403,7 +403,7 @@ describe("Radio Group component tests", function () {
     expect(onChange).not.toHaveBeenCalled();
     expect(document.activeElement).toEqual(checkedRadio);
   });
-  test("The 'enter' key checks the current focused option if anyone is checked", function () {
+  test("The 'space' key checks the current focused option if anyone is checked", function () {
     var onChange = jest.fn();
 
     var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
@@ -422,37 +422,7 @@ describe("Radio Group component tests", function () {
     var submitInput = container.querySelector("input[name=\"test\"]");
 
     _react2.fireEvent.keyDown(radioGroup, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    });
-
-    expect(onChange).toHaveBeenCalledWith("1");
-    expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
-    expect(checkedRadio.tabIndex).toBe(0);
-    expect(submitInput.value).toBe("1");
-  });
-  test("The 'space' key checks the current focused option if anyone is checked", function () {
-    var onChange = jest.fn();
-
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange
-    })),
-        getByRole = _render15.getByRole,
-        getAllByRole = _render15.getAllByRole,
-        container = _render15.container;
-
-    var radioGroup = getByRole("radiogroup");
-    var checkedRadio = getAllByRole("radio")[0];
-    var submitInput = container.querySelector("input[name=\"test\"]");
-
-    _react2.fireEvent.keyDown(radioGroup, {
-      key: "Space",
+      key: " ",
       code: "Space",
       keyCode: 32,
       charCode: 32
@@ -467,7 +437,7 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
@@ -475,9 +445,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render16.getByRole,
-        getAllByRole = _render16.getAllByRole,
-        container = _render16.container;
+        getByRole = _render15.getByRole,
+        getAllByRole = _render15.getAllByRole,
+        container = _render15.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -510,7 +480,7 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       defaultValue: "8",
       name: "test",
       label: "test-radio-group-label",
@@ -519,9 +489,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render17.getByRole,
-        getAllByRole = _render17.getAllByRole,
-        container = _render17.container;
+        getByRole = _render16.getByRole,
+        getAllByRole = _render16.getAllByRole,
+        container = _render16.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -559,7 +529,7 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       defaultValue: "2",
       name: "test",
       label: "test-radio-group-label",
@@ -568,9 +538,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render18.getByRole,
-        getAllByRole = _render18.getAllByRole,
-        container = _render18.container;
+        getByRole = _render17.getByRole,
+        getAllByRole = _render17.getAllByRole,
+        container = _render17.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -607,16 +577,16 @@ describe("Radio Group component tests", function () {
   test("Keyboard focus movement continues from the last radio input clicked", function () {
     var onChange = jest.fn();
 
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
       options: options,
       onChange: onChange
     })),
-        getByRole = _render19.getByRole,
-        getAllByRole = _render19.getAllByRole,
-        container = _render19.container;
+        getByRole = _render18.getByRole,
+        getAllByRole = _render18.getAllByRole,
+        container = _render18.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -655,7 +625,7 @@ describe("Radio Group component tests", function () {
   test("Readonly radio group lets the user move the focus, but neither click nor keyboard press changes the value", function () {
     var onChange = jest.fn();
 
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
@@ -663,9 +633,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       readonly: true
     })),
-        getByRole = _render20.getByRole,
-        getAllByRole = _render20.getAllByRole,
-        container = _render20.container;
+        getByRole = _render19.getByRole,
+        getAllByRole = _render19.getAllByRole,
+        container = _render19.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");

package/radio-group/types.d.ts

@@ -102,8 +102,8 @@ export declare type RefType = HTMLDivElement;
  * Single radio prop types.
  */
 export declare type RadioProps = {
-    option: Option;
-    currentValue?: string;
+    label: string;
+    checked: boolean;
     onClick: () => void;
     error?: string;
     disabled: boolean;

package/resultsetTable/ResultsetTable.test.js

@@ -2,6 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
@@ -10,6 +14,44 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable"));
 
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver(cb) {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+    this.cb = cb;
+  }
+
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {
+      this.cb([{
+        borderBoxSize: {
+          inlineSize: 0,
+          blockSize: 0
+        }
+      }]);
+    }
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }]);
+  return ResizeObserver;
+}();
+
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
 var columns = [{
   displayValue: "Id",
   isSortable: false

package/select/Listbox.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ListboxProps } from "./types";
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ListboxProps & React.RefAttributes<HTMLUListElement>>>;
+declare const _default: React.MemoExoticComponent<({ id, currentValue, options, visualFocusIndex, lastOptionIndex, multiple, optional, optionalItem, searchable, handleOptionOnClick, getSelectWidth, }: ListboxProps) => JSX.Element>;
 export default _default;

package/select/Listbox.js

@@ -11,12 +11,16 @@ exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _Option = _interopRequireDefault(require("./Option"));
 
 var _Icons = _interopRequireDefault(require("./Icons"));
@@ -35,7 +39,7 @@ var groupsHaveOptions = function groupsHaveOptions(options) {
   }) : true;
 };
 
-var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+var Listbox = function Listbox(_ref) {
   var id = _ref.id,
       currentValue = _ref.currentValue,
       options = _ref.options,
@@ -45,8 +49,17 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       optional = _ref.optional,
       optionalItem = _ref.optionalItem,
       searchable = _ref.searchable,
-      handleOptionOnClick = _ref.handleOptionOnClick;
+      handleOptionOnClick = _ref.handleOptionOnClick,
+      getSelectWidth = _ref.getSelectWidth;
   var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
+  var listboxRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      styles = _useState2[0],
+      setStyles = _useState2[1];
+
   var globalIndex = optional && !multiple ? 0 : -1; // index for options, starting from 0 to options.length -1
 
   var mapOptionFunc = function mapOptionFunc(option, mapIndex) {
@@ -89,6 +102,42 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     }
   };
 
+  (0, _react.useLayoutEffect)(function () {
+    if (currentValue && !multiple) {
+      var _listEl$scrollTo;
+
+      var listEl = listboxRef === null || listboxRef === void 0 ? void 0 : listboxRef.current;
+      var selectedListOptionEl = listEl === null || listEl === void 0 ? void 0 : listEl.querySelector("[aria-selected='true']");
+      listEl === null || listEl === void 0 ? void 0 : (_listEl$scrollTo = listEl.scrollTo) === null || _listEl$scrollTo === void 0 ? void 0 : _listEl$scrollTo.call(listEl, {
+        top: (selectedListOptionEl === null || selectedListOptionEl === void 0 ? void 0 : selectedListOptionEl.offsetTop) - (listEl === null || listEl === void 0 ? void 0 : listEl.clientHeight) / 2
+      });
+    }
+  }, [currentValue, multiple]);
+  (0, _react.useLayoutEffect)(function () {
+    var _listboxRef$current, _visualFocusedOptionE;
+
+    var visualFocusedOptionEl = listboxRef === null || listboxRef === void 0 ? void 0 : (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.querySelectorAll("[role='option']")[visualFocusIndex];
+    visualFocusedOptionEl === null || visualFocusedOptionEl === void 0 ? void 0 : (_visualFocusedOptionE = visualFocusedOptionEl.scrollIntoView) === null || _visualFocusedOptionE === void 0 ? void 0 : _visualFocusedOptionE.call(visualFocusedOptionEl, {
+      block: "nearest",
+      inline: "start"
+    });
+  }, [visualFocusIndex]);
+
+  var handleResize = function handleResize() {
+    setStyles({
+      width: getSelectWidth()
+    });
+  };
+
+  (0, _react.useLayoutEffect)(function () {
+    handleResize();
+  }, [getSelectWidth]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener("resize", handleResize);
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [getSelectWidth]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.select
   }, /*#__PURE__*/_react["default"].createElement(ListboxContainer, {
@@ -99,11 +148,12 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     onMouseDown: function onMouseDown(event) {
       event.preventDefault();
     },
-    ref: ref,
+    ref: listboxRef,
     role: "listbox",
     "aria-multiselectable": multiple,
-    "aria-orientation": "vertical"
-  }, searchable && (options.length === 0 || !groupsHaveOptions(options)) ? /*#__PURE__*/_react["default"].createElement(OptionsSystemMessage, null, /*#__PURE__*/_react["default"].createElement(NoMatchesFoundIcon, null, _Icons["default"].searchOff), "No matches found") : optional && !multiple && /*#__PURE__*/_react["default"].createElement(_Option["default"], {
+    style: styles
+  }, searchable && (options.length === 0 || !groupsHaveOptions(options)) ? /*#__PURE__*/_react["default"].createElement(OptionsSystemMessage, null, /*#__PURE__*/_react["default"].createElement(NoMatchesFoundIcon, null, _Icons["default"].searchOff), translatedLabels.select.noMatchesErrorMessage) : optional && !multiple && /*#__PURE__*/_react["default"].createElement(_Option["default"], {
+    key: "option-".concat(optionalItem.value),
     id: "option-".concat(0),
     option: optionalItem,
     onClick: handleOptionOnClick,
@@ -113,9 +163,9 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     isLastOption: lastOptionIndex === 0,
     isSelected: multiple ? currentValue.includes(optionalItem.value) : currentValue === optionalItem.value
   }), options.map(mapOptionFunc)));
-});
+};
 
-var ListboxContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  z-index: 1;\n  max-height: 304px;\n  overflow-y: auto;\n  top: calc(100% + 4px);\n  left: 0;\n  margin: 0;\n  padding: 0.25rem 0;\n  width: 100%;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 0.25rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  cursor: default;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
+var ListboxContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  max-height: 304px;\n  overflow-y: auto;\n  margin: 0;\n  padding: 0.25rem 0;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 0.25rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  cursor: default;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
   return props.theme.listDialogBackgroundColor;
 }, function (props) {
   return props.theme.listDialogBorderColor;